8

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.

NSCoder
  • 1,594
  • 5
  • 25
  • 47

4 Answers4

15

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'}}
/>
brentvatne
  • 7,603
  • 4
  • 38
  • 55
Agu Dondo
  • 12,638
  • 7
  • 57
  • 68
  • The video doesn't stop playing when user navigates to some other screen. – yogeshhkumarr Dec 02 '17 at 10:11
  • @yogeshhkumarr you have to remove/kill the webview – Joshua King Mar 02 '18 at 16:27
  • 1
    I used this method but it was rejected from the Google Play store because " violates the Device and Network Abuse policy by enabling background play of YouTube videos. This can be observed by pressing the power button to turn the screen off while a YouTube video is playing. " --- I could not reproduce what they are describing on my own device though so perhaps it is an issue with other devices (???). Anyway, solutions are described here: https://stackoverflow.com/questions/36382935/how-to-prevent-react-native-android-webview-from-running-youtube-in-the-backgrou – Clay Apr 21 '18 at 16:34
  • 1
    @Clay you could pause the video when the app goes to the background, check https://facebook.github.io/react-native/docs/appstate.html – Agu Dondo Jul 16 '18 at 15:15
  • In my comment I link to a stackoverflow answer (that you answered) that is instructions to do what you suggest. – Clay Jul 16 '18 at 20:59
8

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

LonelyCpp
  • 2,533
  • 1
  • 17
  • 36
5

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.

Jim
  • 1,274
  • 1
  • 10
  • 15
1

(work only in website)
Install npm i react-player
basic usage

import ReactPlayer from 'react-player'

export default function App() {
  return (
    <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

  );
}

Props = https://www.npmjs.com/package/react-player

rafiulah
  • 149
  • 5