Numerous Philanthropic Misanthropes


    1.0.12 • Public • Published


    npm version

    Example Gif


    • 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

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

    Manual installation


    1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
    2. Go to node_modulesreact-native-youtube-sdk and add YouTubeSdk.xcodeproj
    3. In XCode, in the project navigator, select your project. Add libYouTubeSdk.a to your project's Build PhasesLink Binary With Libraries
    4. Run your project (Cmd+R)


    1. Open up android/app/src/main/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
    1. 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')
    2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      implementation project(':react-native-youtube-sdk')


    Example Component

      ref={ref => (this.youTubePlayer = ref)}
      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}>
                ref={ref => (this.youTubePlayer = ref)}
                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)}
                <TouchableOpacity style={styles.button} onPress={() => this.youTubePlayer.loadVideo("QdgRNIAdLi4", 0)}>
                  <Text style={{ color: "#ffffff" }}>loadVideo</Text>
                <TouchableOpacity style={styles.button} onPress={() => this.youTubePlayer.seekTo(10)}>
                  <Text style={{ color: "#ffffff" }}>SeekTo(10)</Text>
                <TouchableOpacity style={styles.button} onPress={() =>}>
                  <Text style={{ color: "#ffffff" }}>Play</Text>
                <TouchableOpacity style={styles.button} onPress={() => this.youTubePlayer.pause()}>
                  <Text style={{ color: "#ffffff" }}>Pause</Text>
                  onPress={async () => {
                    const currentTime = await this.youTubePlayer.getCurrentTime();
          , ToastAndroid.SHORT);
                  <Text style={{ color: "#ffffff" }}>getCurrentTime</Text>
                  onPress={async () => {
                    const duration = await this.youTubePlayer.getVideoDuration();
          , ToastAndroid.SHORT);
                  <Text style={{ color: "#ffffff" }}>getVideoDuration</Text>
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      button: {
        backgroundColor: "red",
        margin: 12,
        padding: 12,
        borderRadius: 4,



    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


    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


    • >= 1.0.6 iOS (
    • <= 1.0.4- iOS (
    • Android (


    npm i react-native-youtube-sdk

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    784 kB

    Total Files


    Last publish


    • avatar