react-native-youtube-sdk

    1.0.12 • Public • Published

    react-native-youtube-sdk

    npm version

    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

    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

    iOS

    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)

    Android

    1. 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
    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')
      

    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

    Thanks

    • >= 1.0.6 iOS (https://github.com/mukeshydv/YoutubePlayerView)
    • <= 1.0.4- iOS (https://github.com/malkouz/youtube-ios-player-helper-swift)
    • Android (https://github.com/PierfrancescoSoffritti/android-youtube-player)

    Install

    npm i react-native-youtube-sdk

    DownloadsWeekly Downloads

    202

    Version

    1.0.12

    License

    Apache 2.0

    Unpacked Size

    784 kB

    Total Files

    85

    Last publish

    Collaborators

    • avatar