React Native Video Streaming App Example

This tutorial explains how to play any video in Android and IOS device in react native application. React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also works with the React Native asset management system to load videos. Having a flexible video component is essential to developing and enhancing your application. Like many React Native elements, the video element is very basic and doesn't ship with anything besides a flexible API. This allows you to develop the exact layout, controls, and custom overlays to match your application. There are many libraries available to play any video in React Native but React Native Video is the basic and one of the react-native-community members which means it is accepted by the React Native development team so I personally like to use it.

Installation of Dependency

To use video palyer in react native we need to use react-native-video in our project directory first.

npm install --save react-native-video

Run below command to link react-native-video library in your project :

react-native link react-native-video

React Native Video Library to Play Video in Android and IOS

Lets see the complete source code that helps to play any video in Android and IOS device in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Video from 'react-native-video';
import VideoLink from "./demovideo.mp4"

Step 4: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        
        <Video style={styles.backgroundVideo}
          fullscreenOrientation="all"
          onBuffer={this.onBuffer}   // Callback function
          onError={this.videoError}
          source={VideoLink}
          resizeMode="contain"
          rate={1}
          volume={1}
          muted={false}
          ignoreSilentSwitch={null}
          fullscreen={true}
          // onLoad={(data) => { Alert.alert(' onLoad!') }}
          //onBuffer={() => { Alert.alert(onBuffer!') }}
          // onProgress={() => { Alert.alert('onProgress!') }}
          // onEnd={() => { Alert.alert('onEnd!') }}
          repeat={false}
          controls={true}
        />

      </View>
    );
  }
}

Step 5 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to play any video in Android and IOS device in react native application.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Video from 'react-native-video';
import VideoLink from "./demovideo.mp4"

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        
        <Video style={styles.backgroundVideo}
          fullscreenOrientation="all"
          onBuffer={this.onBuffer}   // Callback function
          onError={this.videoError}
          source={VideoLink}
          resizeMode="contain"
          rate={1}
          volume={1}
          muted={false}
          ignoreSilentSwitch={null}
          fullscreen={true}
          // onLoad={(data) => { Alert.alert(' onLoad!') }}
          //onBuffer={() => { Alert.alert(onBuffer!') }}
          // onProgress={() => { Alert.alert('onProgress!') }}
          // onEnd={() => { Alert.alert('onEnd!') }}
          repeat={false}
          controls={true}
        />

      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },

});

Screenshot : 

This is all about React Native Video Steaming Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.