React Native Video

This is a video component for react native .

Installation of react native video

using yarn

yarn add react-native-video

Using npm

npm install --save react-native-video

React Native Video Usage

import Video from '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} />

var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Props

1. audioOnly – only for audio, no video content (true, false)
2. controls – for showing controls on video player(true, false)
3. fullscreen – for fullscreen button (true, false)
4. muted – audio muted (true, false)
5. paused – paused the video
6. resizeMode – none, contain, cover, stretch

If you have any problem you can comment down below.

If you have any problem running the component then you can do this additional configuration for your react native cli app.

Ios installation

For latest react native version

npx pod-install

for older than 0.59

react-native link react-native-video

Using CocoaPods

Setup your Podfile like it is described in the react-native documentation.

Video without caching: add this to your pod file

pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'

Video with caching:

pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'

Android Installation

for old react native just link the library with

react-native link react-native-video