React-native-youtube-sdk NPM

react-native-youtube-sdk

Example Gif

Note

Your android app needs to be using the androidx libraries instead of the old support libraries.

Video is unavailable problem

Origin is already set up in the library but you will notice that some videos are not playing. This is because the video is shared as not embeddable by provider.
You can use YouTube Data API to solve this problem
Do not open an issue related to this

Getting started

$ npm install react-native-youtube-sdk --save

Mostly automatic installation

$ react-native link react-native-youtube-sdk

iOS With CocoaPods

Create a blank Swift file with bridge in your project (you can name it whatever you want) (to build swift code easily)
$ cd /ios
$ pod install
Have fun

Manual installation

iOS

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-youtube-sdk and add YouTubeSdk.xcodeproj
In XCode, in the project navigator, select your project. Add libYouTubeSdk.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)

Android

Open up android/app/src/main/java/[...]/MainApplication.java

Add import com.srfaytkn.reactnative.YouTubeSdkPackage; to the imports at the top of the file
Add new YouTubeSdkPackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

include ':react-native-youtube-sdk'
project(':react-native-youtube-sdk').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-youtube-sdk/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
implementation project(':react-native-youtube-sdk')
```

Usage

Example Component

<YouTubePlayer
  ref={ref => (this.youTubePlayer = ref)}
  videoId="t_aIEOqB8VM"
  autoPlay={true}
  fullscreen={true}
  showFullScreenButton={true}
  showSeekBar={true}
  showPlayPauseButton={true}
  startTime={5}
  style={{ width: "100%", height: 200 }}
  onError={e => console.log(e)}
  onChangeState={e => console.log(e)}
  onChangeFullscreen={e => console.log(e)}
/>

Example Usage

import React from "react";
import { ScrollView, StyleSheet, View, TouchableOpacity, Text, ToastAndroid } from "react-native";
import YouTubePlayer from "react-native-youtube-sdk";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <YouTubePlayer
            ref={ref => (this.youTubePlayer = ref)}
            videoId="t_aIEOqB8VM"
            autoPlay={true}
            fullscreen={false}
            showFullScreenButton={true}
            showSeekBar={true}
            showPlayPauseButton={true}
            startTime={5}
            style={{ width: "100%", height: 200 }}
            onReady={e => console.log("onReady", e.type)}
            onError={e => console.log("onError", e.error)}
            onChangeState={e => console.log("onChangeState", e.state)}
            onChangeFullscreen={e => console.log("onChangeFullscreen", e.isFullscreen)}
          />
          <View>
            <TouchableOpacity style={styles.button} onPress={() => this.youTubePlayer.loadVideo("QdgRNIAdLi4", 0)}>
              <Text style={{ color: "#ffffff" }}>loadVideo</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={() => this.youTubePlayer.seekTo(10)}>
              <Text style={{ color: "#ffffff" }}>SeekTo(10)</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={() => this.youTubePlayer.play()}>
              <Text style={{ color: "#ffffff" }}>Play</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={() => this.youTubePlayer.pause()}>
              <Text style={{ color: "#ffffff" }}>Pause</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={async () => {
                const currentTime = await this.youTubePlayer.getCurrentTime();
                ToastAndroid.show(String(currentTime), ToastAndroid.SHORT);
              }}
            >
              <Text style={{ color: "#ffffff" }}>getCurrentTime</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={async () => {
                const duration = await this.youTubePlayer.getVideoDuration();
                ToastAndroid.show(String(duration), ToastAndroid.SHORT);
              }}
            >
              <Text style={{ color: "#ffffff" }}>getVideoDuration</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  button: {
    backgroundColor: "red",
    margin: 12,
    padding: 12,
    borderRadius: 4,
  },
});

API

Props

Prop	Required	Type	Default value	Description
videoId	false	string		YouTube video id
autoPlay	false	bool	false	Plays when video loaded
fullscreen	false	bool	false	The video is play in fullscreen
showFullScreenButton	false	bool	false	Show or hide fullscreen button
showSeekBar	false	bool	true	Show or hide seekbar
showPlayPauseButton	false	bool	true	Show or hide play/pause button
startTime	false	number	0	start time of video for first play
onReady	false	func		triggered when the player ready
onError	false	func		triggered when error occurs
onChangeState	false	func		triggered when the state changes (UNKNOWN/UNSTARTED/ENDED/PLAYING/PAUSED/BUFFERING/VIDEO_CUED)
onChangeFullscreen	false	func		triggered when the player enters or exits the fullscreen mode

Methods

Name	Params	Return	Descriptipon
seekTo	seconds	void	Seeks to a specified time in the video
play		void	play the video
pause		void	pause the video
loadVideo	videoId, startTime	void	load a video to the player
getCurrentTime		promise	Returns promise that results with the current time of the played video
getVideoDuration		promise	Returns promise that results with the duration of the played video