Is there a way to stream video in react-native?

Question

Does react-native support video component(Officially, like without using any 3rd party libs)? I want to stream/playback a video from my cloud and looking for a way to integrate it to my react-native project.

Thanks in advance, any leads to the solution will be helpful.

Solution 1

If you build your app using Expo (i.e. running the create-react-native-app command), then the Expo library includes a video component.

Here is a code sample:

<Video
  source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
  rate={1.0}
  volume={1.0}
  muted={false}
  resizeMode="cover"
  shouldPlay
  isLooping
  style={{ width: 300, height: 300 }}
/>

I suppose Expo is technically a library. To my knowledge, there is no video library built into react-native. You will need to use a package.

Solution 2

If you are using react-native with native code(not using expo) : https://github.com/react-native-community/react-native-video

<Video source={{uri: "background"}}   // Can be a URL or a local file.
   ref={(ref) => {
     this.player = ref
   }}                                      // Store reference
   onBuffer={this.onBuffer}                // Callback when remote video is buffering
   onError={this.videoError}               // Callback when video cannot be loaded
   style={styles.backgroundVideo} />

and also there is the need to link the libraries

Comments

[Akash D]

Hi can you please tell me What is the difference between react-native-video and expo video.i'm using react-native-video but it's not working for Android.thanks

[HarshitMadhav]

broken link! Can you repost the link?

[MoHammaD ReZa DehGhani]

is react-native-video stream video when u use url or it will download video first ??

[osdamv]

it streams the video

[Alexy]

Do you have source that explain that it streams ? I can't find this

[Amit Bravo]

I need both features , streaming as well as downloading . can I use react-native-fetch-blob or rn-fetch-blob to download videos and use react-native-video for streaming. again I want to be sure if react-native-video streams the video or download whole video before play.