How to play Youtube videos using Expo

7
votes

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.

3
iosreact-nativeyoutubeexpo
Github issue: github.com/inProgress-team/react-native-youtube/issues/158 – reergymerej
For anyone still looking for this, try this package with expo support - github.com/LonelyCpp/react-native-youtube-iframe – LonelyCpp

3 Answers

13
votes

At the moment, YouTube is not supported by Expo. You can either eject 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'}}
/>
7
votes

For anyone still looking for this, try this package with expo support

https://github.com/LonelyCpp/react-native-youtube-iframe

A wrapper of the Youtube IFrame player API build for react native. Uses the webview player which is known to be more stable compared to the native youtube app.

As the new expo SDK has support for the modern community maintained webview, it should work seamlessly across platforms

5
votes

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.