How to play Youtube videos using Expo

Question

I am trying to use the react-native-youtube component in my expo project. However, I couldn't get it to work. All I have so far is a black screen with red borders. I tried following the video instructions on online however, expo doesn't have an iOS or Android folder, which means I can't open it in XCode and fiddle with it. How can I play youtube videos using expo? As you might have noticed from my question I'm new to react-native using expo.

Answer 1

At the moment, YouTube is not supported by Expo. You can either deatach the project and install the react-native-youtube library or load your videos from a WebView like this:

<WebView
    style={{flex:1}}
    javaScriptEnabled={true}
    source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0'}}
/>

Answer 2

The current way to get a YouTube video in a React Native application is to use React Native's WebView component in your project.

Here is a snack that shows an example of how the WebView works using an Instagram signup flow as an example: https://snack.expo.io/HJRKKTmAx.

I'm sorry if that wasn't exactly what you're looking for :(

To use react-native-youtube component you would have to detach your Expo project ExpoKit:

ExpoKit is an Objective-C and Java library that allows you to use the Expo platform and your existing Expo project as part of a larger standard native project — one that you would normally create using Xcode, Android Studio, or react-native init.

More information here: https://docs.expo.io/versions/v18.0.0/guides/detach.html

I hope these two options solve your problem, let me know if theres any other way I can help.