React Native: play video error Component Exception

Question

import { SafeAreaView, ScrollView, StyleSheet, View, Text } from 'react-native';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Container, Content, List, ListItem } from 'native-base';
import Video from 'react-native-video';


function VideoListScreen({ navigation }) {
  return (
    <Container>
      <Content>
        <List>

          <ListItem onPress={()=> navigation.navigate('Video Player', {
            external: true,
            videoURL: 'https://www.w3schools.com/html/mov_bbb.mp4'
          })}>
            <Text>External video source</Text>
          </ListItem>

        </List>
      </Content>
    </Container>
  );
}

function VideoPlayerScreen({ route, navigation }) {
  const {external, videoURL } = route.params;

  return (
    <Container>
      <Video 
        source={{uri: videoURL}}   // Can be a URL or a local file.                                
        style={styles.backgroundVideo} 
      />                                      
    </Container>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
   <NavigationContainer>
     <Stack.Navigator>
       <Stack.Screen name ='Video List' component={VideoListScreen} />
       <Stack.Screen name ='Video Player' component={VideoPlayerScreen} />
     </Stack.Navigator>
   </NavigationContainer>

  );
}

I want to play video when the user taps on the item in the list, but right now im getting an error -> Component Exception, undefined is not an object (evaluating 'RTCVideoInsance.Constants'),

this is the video player library im using https://github.com/react-native-video/react-native-video.

Thanks for the help

Answer 1

Running pod install in cd ios after yarn install

source : https://github.com/react-native-video/react-native-video/issues/1502

if you already install pod then try to clean xcode project and then build again.

Answer 2

This will help if developing with expo

1). expo install expo-av

2). Your App.js should be look like this.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Video } from 'expo-av';

export default class App extends React.Component {
render(){
return (
< View style={styles.container} >
< Text >Open up App.js to start working on your app!< / Text >

    < Video
    source={{ uri: 'https://www.yourdomain.com/uploads/video_file.mp4' }}
    shouldPlay
    useNativeControls 
    style={{ width: "100%", height: "50%" }}
  />

  </ View >
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

3). Then expo start