CODEWITHSUNDEEP
react-nativereact-native-video
liming
liming

Reputation: 242

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

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.

Upvotes: 3

Views: 21455

Answers (2)

R.K
R.K

Reputation: 1839

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.

Upvotes: 8

Nicholas Kuhne
Nicholas Kuhne

Reputation: 113

Okay a few things:

  1. You do not need to import requireNativeComponent from react-native.

  2. You are using a functional component. I.e not a class component. Functional components do not have access to "this".

This is how you would write it using classes. (Did not compile and test, but you should get a general idea.

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

export default class App extends React.Component {
    //VIDEO FUNCTIONS
    onLoad(data) {
        console.log('On load fired!');
        this.setState({ duration: data.duration });
    }

    onProgress(data) {
        this.setState({ currentTime: data.currentTime });
    }

    onBuffer({ isBuffering }: { isBuffering: boolean }) {
        this.setState({ isBuffering });
    }

    videoError(err) {
        console.log("ERROR is " + err)
    }

     render() {
         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>
        )
    }
}

Upvotes: 0

Related Questions