How to create web specific components in react-native-web?

user_3090989 0
Viewed 467

I'm looking to create a video streaming app using react-native and roll out its web version via react-native-web so I can share the codebase. Unfortunetaly I can't wrap my head around how to properly create e.g. a <video /> element when in the browser context.

This is what I currently have:

import { RTCView, /* ... some other components */ } from 'react-native-webrtc';
import { Platform } from 'react-native';

const VideoViewNative = () => {
  // Some logic

  return <RTCView {/* props for RTCView */};
}

const VideoViewWeb = () => {
  return <video {/* props for web video */} />;
}


export default Platform.OS === 'web' ? VideoViewWeb : VideoViewNative;

While this works as expected it does not "feel" right. I think I am bypassing react-native-web here and gettings some drawbacks from that later on.

What would be the proper way to achieve what I want to achieve and why is the approach above wrong?

react-native-web webrtc react-native reactjs html
1 Answers

you can try splitting the code out into separate files. React Native will detect when a file has a .ios. or .android. or .web. extension and load the relevant platform file when required from other components.

Example:

VideoView.native.js for android and ios, also can be separate platform-specific VideoView.ios.js and VideoView.android.js

VideoView.js for others or you can also make it VideoView.web.js

And You can then require the component as follows:

import VideoView from './VideoView';

React Native will automatically pick up the right file based on the running platform.

user_74398400
Related