Menu
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.
893
To achieve playing Youtube videos in React Native, we will be making use of the npm dependency named react-native-youtube-iframe. We will work through using this library by fully integrating it into an app.
After project creation, we can now import the Video component. The Video component is a component from expo-av that displays a video in line with the other UI elements in your app, so to use the Video component we should install expo-av first.
Running your React Native applicationInstall the Expo Go app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app.
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'}}
/>
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
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
