CODEWITHSUNDEEP
react-nativeyoutube-data-api
Kristin Harper
Kristin Harper

Reputation: 11

using react-native-youtube api : youtube videos not rendering

I'm trying to get youtube videos to play in my react-native project. I am using the react-native-youtube module and have enabled YouTubeDataAPIv3 and YouTubeAnalyticsAPI. But I'm getting a blank screen. Sometimes, after a little delay, the screen will resize leaving a smaller white square in the corner and a black background. But still no video.

MY api key does work. I tested this by passing a text-based request through postman. I've also made sure the api is also correctly being passed down to the component. I've tried different videos/videoIds. I've played around with various settings and looked at other examples of working code. My current theory is that this may have something to do with nested views/containers and settings. The videos are in component that is embedded in a parent screen. Maybe a flex:1 is overriding another view? I really don't know. . Has anyone else run into this problem? Any ideas how to fix this?

parent screen:

return (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={{ flex: 1 }}>
      <LeaderBoard />
      <CurrentVideos />
    </View>
  </SafeAreaView>
);

}

video screen: 

return (
  <ScrollView style={{ flex: 1}>
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'pink'
      }}
    >
      <YouTube
        videoId={'BunklIatIK4'}
        play={true}
        apiKey={config.API_KEY}
        controls={1}
        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 }}
      />
    </View>
  </ScrollView>
);

Upvotes: 0

Views: 538

Answers (1)

Kristin Harper
Kristin Harper

Reputation: 11

Figured it out! The issue was that I hadn't manually moved a copy of the the youtube iframe file from the node modules to the project in Xcode. Now, it's BEAUTIFUL!

Upvotes: 1

Related Questions