I am getting this error after I included {Video} from 'react-native-video'. Otherwise my code was working fine

Question

**This is the error code I am getting and below is my complete code. I installed react-native-video with yarn and then also linked it with ios and android ** I am getting this error after I included {Video} from 'react-native-video'. Otherwise my code was working fine. I wanted to have a background video in my app but it won't work.

import React, {Component,Fragment} from 'react';
import { StyleSheet, Text, View, ImageBackground,Image,TouchableOpacity,Dimensions} from 'react-native';
import Video from 'react-native-video';



import Img from './Src/Assets/Images/3.jpg';
import arrow from './Src/Assets/Icons/arrow_right.png';
import videomp4 from './Src/Assets/video.mp4';

const { height } = Dimensions.get("window");


export default class getStarted extends Component {






    render() {


      return (
        <View style={styles.container}  >

          <ImageBackground style={styles.background} source={Img}>
         <Video style={styles.backgroundVideo} source = {videomp4}/>
          <Text style={styles.appName}  >Welcome</Text>
          <Text style={styles.introduction}>Feel less stressed and more mindful with meditation.</Text>
        
        <TouchableOpacity
        style={styles.button}>
          <View style={styles.OpacityView}>
            <Text style={styles.login}>Get Started</Text>
            <Image style={styles.icon} source={arrow}/>
         </View>
        </TouchableOpacity>
        <View style = {styles.EndView}>
        <Text style={styles.haveNoAccount}>Don't have an account?</Text>
        <Text style={styles.SignUp}>SignUp</Text>
        </View>
         </ImageBackground>
         
        </View>
      );
    }
  }




const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#ffffff',
    },
    backgroundVideo: {
      height: height,
      position: "absolute",
      top: 0,
      left: 0,
      alignItems: "stretch",
      bottom: 0,
      right: 0
      },
    OpacityView:
    {
    flexDirection:'row', 
    backgroundColor:'#333333',
    height:50,
    width:320,
  },
    background:{
      flex:1,
      height:'100%',
      width:'100%',
      justifyContent: 'center',
    },
    appName:{
      textAlign: 'center',
      color: '#ffffff',
      fontWeight:'bold',
      fontSize:50,
      marginBottom:4,
      marginTop:450,
     },
    login:{
      textAlign: 'center',
      color: '#ffffff',
      fontWeight:'bold',
      alignSelf:'flex-start',
      paddingTop:18,
      paddingLeft:20,
      fontSize:18,
    },
      button: {
        alignItems: "center",
        backgroundColor: "#333333",
        width:350,
        height:60,
        alignSelf:"center",
        marginTop:10,
        opacity:20,
        borderRadius:10,
      },
    icon:{
      height:22,
      width:22,
      marginLeft:160,
      marginTop:17,
    },
    introduction: {
      textAlign: 'center',
      color: '#ffffff',
      fontSize:20, 
      marginLeft:33,
      marginBottom:20,
      justifyContent:"center",
      marginRight:33,
    },
    haveNoAccount: {
      textAlign: 'center',
      color: '#ffffff',
      fontSize:16, 
      marginTop:20,
      justifyContent:"center",
      alignSelf:'center',
    },
    SignUp: {
      color: '#ffffff',
      fontSize:15, 
      fontWeight:'bold',
      marginLeft:5,
      marginTop:20,
    },
    EndView:{
    flexDirection:'row', 
    alignSelf:'center',
    alignItems:'center',
    height:50,
    marginLeft:0,
    marginRight:0,
    }
  });

Answer 1

React-native-video module does not seem to be installed correctly.

Please check the following staff.

1. npm install --save react-native-video

IOS :

React Native 0.60 and above

Run pod install in the ios directory. Linking is not required in React Native 0.60 and above.

React Native 0.59 and below

Run react-native link react-native-video to link the react-native-video library.

Using CocoaPods (required to enable caching) Setup your Podfile like it is described in the react-native documentation.

Depending on your requirements you have to choose between the two possible subpodspecs:

Video only:

  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end

Video with caching (more info):

  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end

Android :

Run react-native link react-native-video to link the react-native-video library.

Or if you have trouble, make the following additions to the given files manually:

android/settings.gradle The newer ExoPlayer library will work for most people.

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

android/app/build.gradle From version >= 5.0.0, you have to apply these changes:

dependencies {
   ...
    compile project(':react-native-video')
+   implementation "androidx.appcompat:appcompat:1.0.0"
-   implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

}

android/gradle.properties Migrating to AndroidX (needs version >= 5.0.0):

android.useAndroidX=true
android.enableJetifier=true

MainApplication.java On top, where imports are:

import com.brentvatne.react.ReactVideoPackage;

Add the ReactVideoPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactVideoPackage()
    );
}