How to fix import error : 'requireNativeComponent' from 'react-native-web'

Question

I am starter at React-native and I want to show a video on my app. I am using react-native-video now.

import React from 'react';
import { StyleSheet, Text, View, requireNativeComponent } from 'react-native';
import Video from 'react-native-video';

export default function App() {
  return (
    <View style={styles.container}>
        <Video source={{uri:"loading.mp4"}}
            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}/> 
    </View>

  );
}

Then I have this Error

Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

Please tell me why this is happening and how can i fix it.

Answer 1

This is an old question but would like to answer it. None of the solutions above suggested why this error & how can I resolve.

I faced a similar issue and reading the problem details on Git realized its a bug that arises due to a mismatch in lib version & expo version. So make it a practice to install all the libs with expo instead of npm or yarn. To fix this bug install all your libraries using the cmd expo install <lib>.

In this case, performing expo install react-native-video should solve the problem.