react-nativeyoutubeyoutube-api

Invariant Violation: requireNativeComponent: "RCTYouTube" was not found in the UIManager

here is the detail:- I generated my react native expo project using the command line npx expo-cli init youtube then I refered to this link:- https://www.npmjs.com/package/react-native-youtube

I installed the react-native-youtube dependencies using the command:- npm i react-native-youtube I also got my official youtube API from https://developers.google.com/youtube/android/player/register

In App.js file the below are the codes written

`import React from 'react'
import {View,StyleSheet,Text,SafeAreaView} from 'react-native'
import YouTube from 'react-native-youtube';


 

const App=()=>{
    
  
  const linkTest="https://www.youtube.com/watch?v=aqz-KE-bpKQ"

    return (
      
      
      <SafeAreaView style={styles.container}>
  
      <YouTube
      apiKey="*******************"
      videoId={linkTest} // The YouTube video ID
      play // control playback of video with true/false
      fullscreen // control whether the video should play in fullscreen or inline
      loop // control whether the video should loop when ended
      onReady={e => this.setState({ isReady: true })}
      onChangeState={e => this.setState({ status: e.state })}
      onChangeQuality={e => this.setState({ quality: e.quality })}
      onError={e => this.setState({ error: e.error })}
      style={{ alignSelf: 'stretch', height: 300 }}
    />  
      
     
        </SafeAreaView>
        
        
         )
}


const styles= StyleSheet.create({
    container:{ backgroundColor:"white", flex:1},
    
    

})
export default App

After this, in my cmd I ran :- npm start Scanned the QRCode and opened the App in my EXPO App in my mobile the following is the screenshot of the error I got

Click here for show larger image:

enter image description here

Click here for show larger image:

enter image description here

Click here for show larger image:

enter image description here

The below picture are screenshots of project running on expo on android platform or mobile:

Click here for show larger image:

enter image description here

Solution

  • module 'react-native-youtube' doesnt support youtube link. Rather than that use

    <WebView
      style={ styles.styleCode }
      javaScriptEnabled={true}
      domStorageEnabled={true}
      source={{uri: 'https://www.youtube.com/embed/dFKhWe2bBkM' }}
/>

    Find the youtube uri from ( share > embed ).