React-native-youtube: Black screen when embedding youtube video

[nancyhuynh]

Hi,

I just integrated react-native-youtube into my project and am seeing just a black background using the example snippet. I am using react-native 0.34.0. Is there something wrong with the snippet?

render() {
    return (
      <YouTube
        ref="youtubePlayer"
        videoId="CebcmJKutaQ" // The YouTube video ID
        play={true}           // control playback of video with true/false
        hidden={false}        // control visiblity of the entire view
        playsInline={true}    // control whether the video should play inline
        loop={false}          // control whether the video should loop when ended

        style={{alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10}}
      />
    );
  }

[nancyhuynh]

More info:

I get the the following warning in console:

ExceptionsManager.js:82 Warning: Native component for "RCTYouTube" does not exist

I used rnpm to link the library, and RCTYouTube appears in my project.

Also, none of the following callbacks get triggered:

<YouTube
        ref="youtubePlayer"
        videoId="CebcmJKutaQ" // The YouTube video ID
        play={true}           // control playback of video with true/false
        hidden={false}        // control visiblity of the entire view
        playsInline={true}    // control whether the video should play inline
        loop={false}          // control whether the video should loop when ended

        onReady={(e)=>{ console.log('YOUTUBE READY', e)}}
        onChangeState={(e)=>{ console.log('YOUTUBE CHANGE STATE', e) }}
        onChangeQuality={(e)=>{ console.log('YOUTUBE CHANGE QUALITY', e) }}
        onError={(e)=>{ console.log('YOUTUBE ERROR', e) }}
        onProgress={(e)=>{ console.log('YOUTUBE PROGRESS', e)}}

        style={{alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10}}
      />

[adeebbasheer]

videoId={this.props.item.id.videoId} // The YouTube video ID
apiKey={Config.youtube.apiKey}
onReady={(e)=>{}}
onChangeState={this._onStateChange}
onError={(e)=>{console.log(e);}}
onProgress={(e)=>{}}
style={[{alignSelf: 'stretch', backgroundColor: 'black', marginVertical: 10}]} />

[mahyarmblb]

@nancyhuynh did you find out the reason by any chance?

[nancyhuynh]

@mahyarse unfortunately, I did not. I ended up just using a WebView instead, which suits our current needs:

<WebView
  source={{ uri: `https://www.youtube.com/embed/${this.props.item.videoId}` }}
/>

[onpaws]

ExceptionsManager.js:82 Warning: Native component for "RCTYouTube" does not exist

Just resolved this error. For me it wasn't enough to simply use rnpm because it didn't include RCTYouTube.a in the linker. I was able to fix by double checking the library was included over in the target's Build Phases (same process as described in the linking docs.

[onpaws]

Don't forget to include Assets/YTPlayerView-iframe-player.html in the Xcode project.
Without this file you'll get an error like the following in Console.app, and no errors in JavaScript:
Received error rendering template: Error Domain=NSCocoaErrorDomain Code=258 "The file name is invalid."

[jr-k]

Same problem on Android

[gauravsbagul]

ExceptionsManager.js:82 Warning: Native component for "RCTYouTube" does not exist

Just resolved this error. For me it wasn't enough to simply use rnpm because it didn't include RCTYouTube.a in the linker. I was able to fix by double checking the library was included over in the target's Build Phases (same process as described in the linking docs.

@onpaws
I did the same but still getting the same error
`Invariant Violation: requireNativeComponent: "RCTYouTube" was not

found in the UIManaager.