YouTube Video Integration in React Native

This tutorial explains how to integrate youtube video in react native application. To integrate the YouTube video in our demo we will use a library called react-native-youtube, Which provides a YouTube component which is very easy to use.

Installation of Dependency

To integrate youtube video in react native project we need to use react-native-youtube in our project directory.

npm install react-native-youtube --save

React Native react-native-youtube Library

Lets see the complete source code that helps to integrate youtube video in react native application.

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  PixelRatio,
  Dimensions,
  Platform,
} from 'react-native';
import YouTube, {
  YouTubeStandaloneIOS,
  YouTubeStandaloneAndroid,
} from 'react-native-youtube';
 
export default class RCTYouTubeExample extends React.Component {
  state = {
    isReady: false,
    status: null,
    quality: null,
    error: null,
    isPlaying: true,
    isLooping: true,
    duration: 0,
    currentTime: 0,
    fullscreen: false,
    containerMounted: false,
    containerWidth: null,
  };
 
  render() {
    return (
      <ScrollView
        style={styles.container}
        onLayout={({
          nativeEvent: {
            layout: { width },
          },
        }) => {
          if (!this.state.containerMounted)
            this.setState({ containerMounted: true });
          if (this.state.containerWidth !== width)
            this.setState({ containerWidth: width });
        }}>
        {this.state.containerMounted && (
          <YouTube
            ref={component => {
              this._youTubeRef = component;
            }}
            // You must have an API Key for the player to load in Android
            apiKey="YOUR_API_KEY"
            // Un-comment one of videoId / videoIds / playlist.
            // You can also edit these props while Hot-Loading in development mode to see how
            // it affects the loaded native module
            videoId="ncw4ISEU5ik"
            // videoIds={['HcXNPI-IPPM', 'XXlZfc1TrD0', 'czcjU1w-c6k', 'uMK0prafzw0']}
            // playlistId="PLF797E961509B4EB5"
            play={this.state.isPlaying}
            loop={this.state.isLooping}
            fullscreen={this.state.fullscreen}
            
            controls={1}
            style={[
              {
                height: PixelRatio.roundToNearestPixel(
                  this.state.containerWidth / (16 / 9)
                ),
              },
              styles.player,
            ]}
            onError={e => this.setState({ error: e.error })}
            onReady={e => this.setState({ isReady: true })}
            onChangeState={e => this.setState({ status: e.state })}
            onChangeQuality={e => this.setState({ quality: e.quality })}
            onChangeFullscreen={e =>
              this.setState({ fullscreen: e.isFullscreen })
            }
            onProgress={e =>
              this.setState({
                duration: e.duration,
                currentTime: e.currentTime,
              })
            }
          />
        )}
 
        {/* Playing / Looping */}
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.setState(s => ({ isPlaying: !s.isPlaying }))}>
            <Text style={styles.buttonText}>
              {this.state.status == 'playing' ? 'Pause' : 'Play'}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.setState(s => ({ isLooping: !s.isLooping }))}>
            <Text style={styles.buttonText}>
              {this.state.isLooping ? 'Looping' : 'Not Looping'}
            </Text>
          </TouchableOpacity>
        </View>
 
        {/* Previous / Next video */}
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() =>
              this._youTubeRef && this._youTubeRef.previousVideo()
            }>
            <Text style={styles.buttonText}>Previous Video</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this._youTubeRef && this._youTubeRef.nextVideo()}>
            <Text style={styles.buttonText}>Next Video</Text>
          </TouchableOpacity>
        </View>
 
        {/* Go To Specific time in played video with seekTo() */}
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this._youTubeRef && this._youTubeRef.seekTo(15)}>
            <Text style={styles.buttonText}>15 Seconds</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this._youTubeRef && this._youTubeRef.seekTo(2 * 60)}>
            <Text style={styles.buttonText}>2 Minutes</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() =>
              this._youTubeRef && this._youTubeRef.seekTo(15 * 60)
            }>
            <Text style={styles.buttonText}>15 Minutes</Text>
          </TouchableOpacity>
        </View>
 
        {/* Play specific video in a videoIds array by index */}
        {this._youTubeRef &&
          this._youTubeRef.props.videoIds &&
          Array.isArray(this._youTubeRef.props.videoIds) && (
            <View style={styles.buttonGroup}>
              {this._youTubeRef.props.videoIds.map((videoId, i) => (
                <TouchableOpacity
                  key={i}
                  style={styles.button}
                  onPress={() =>
                    this._youTubeRef && this._youTubeRef.playVideoAt(i)
                  }>
                  <Text
                    style={[
                      styles.buttonText,
                      styles.buttonTextSmall,
                    ]}>{`Video ${i}`}</Text>
                </TouchableOpacity>
              ))}
            </View>
          )}
 
        {/* Get current played video's position index when playing videoIds*/}
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() =>
              this._youTubeRef &&
              this._youTubeRef
                .videosIndex()
                .then(index => this.setState({ videosIndex: index }))
                .catch(errorMessage => this.setState({ error: errorMessage }))
            }>
            <Text style={styles.buttonText}>
              Get Videos Index: {this.state.videosIndex}
            </Text>
          </TouchableOpacity>
        </View>
 
        {/* Fullscreen */}
        {!this.state.fullscreen && (
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() => this.setState({ fullscreen: true })}>
              <Text style={styles.buttonText}>Set Fullscreen</Text>
            </TouchableOpacity>
          </View>
        )}
 
        {/* Update Progress & Duration (Android) */}
        {Platform.OS === 'android' && (
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() =>
                this._youTubeRef
                  ? this._youTubeRef
                      .currentTime()
                      .then(currentTime => this.setState({ currentTime }))
                      .catch(errorMessage =>
                        this.setState({ error: errorMessage })
                      )
                  : this._youTubeRef
                      .duration()
                      .then(duration => this.setState({ duration }))
                      .catch(errorMessage =>
                        this.setState({ error: errorMessage })
                      )
              }>
              <Text style={styles.buttonText}>
                Update Progress & Duration (Android)
              </Text>
            </TouchableOpacity>
          </View>
        )}
 
        {/* Standalone Player (iOS) */}
        {Platform.OS === 'ios' &&
          YouTubeStandaloneIOS && (
            <View style={styles.buttonGroup}>
              <TouchableOpacity
                style={styles.button}
                onPress={() =>
                  YouTubeStandaloneIOS.playVideo('KVZ-P-ZI6W4')
                    .then(() => console.log('iOS Standalone Player Finished'))
                    .catch(errorMessage =>
                      this.setState({ error: errorMessage })
                    )
                }>
                <Text style={styles.buttonText}>Launch Standalone Player</Text>
              </TouchableOpacity>
            </View>
          )}
 
        {/* Standalone Player (Android) */}
        {Platform.OS === 'android' &&
          YouTubeStandaloneAndroid && (
            <View style={styles.buttonGroup}>
              <TouchableOpacity
                style={styles.button}
                onPress={() =>
                  YouTubeStandaloneAndroid.playVideo({
                    apiKey: 'YOUR_API_KEY',
                    videoId: 'KVZ-P-ZI6W4',
                    autoplay: true,
                    lightboxMode: false,
                    startTime: 124.5,
                  })
                    .then(() =>
                      console.log('Android Standalone Player Finished')
                    )
                    .catch(errorMessage =>
                      this.setState({ error: errorMessage })
                    )
                }>
                <Text style={styles.buttonText}>Standalone: One Video</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.button}
                onPress={() =>
                  YouTubeStandaloneAndroid.playVideos({
                    apiKey: 'YOUR_API_KEY',
                    videoIds: [
                      'HcXNPI-IPPM',
                      'XXlZfc1TrD0',
                      'czcjU1w-c6k',
                      'uMK0prafzw0',
                    ],
                    autoplay: false,
                    lightboxMode: true,
                    startIndex: 1,
                    startTime: 99.5,
                  })
                    .then(() =>
                      console.log('Android Standalone Player Finished')
                    )
                    .catch(errorMessage =>
                      this.setState({ error: errorMessage })
                    )
                }>
                <Text style={styles.buttonText}>Videos</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.button}
                onPress={() =>
                  YouTubeStandaloneAndroid.playPlaylist({
                    apiKey: 'YOUR_API_KEY',
                    playlistId: 'PLF797E961509B4EB5',
                    autoplay: false,
                    lightboxMode: false,
                    startIndex: 2,
                    startTime: 100.5,
                  })
                    .then(() =>
                      console.log('Android Standalone Player Finished')
                    )
                    .catch(errorMessage =>
                      this.setState({ error: errorMessage })
                    )
                }>
                <Text style={styles.buttonText}>Playlist</Text>
              </TouchableOpacity>
            </View>
          )}
 
        {/* Reload iFrame for updated props (Only needed for iOS) */}
        {Platform.OS === 'ios' && (
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() =>
                this._youTubeRef && this._youTubeRef.reloadIframe()
              }>
              <Text style={styles.buttonText}>Reload iFrame (iOS)</Text>
            </TouchableOpacity>
          </View>
        )}
 
        <Text style={styles.instructions}>
          {this.state.isReady ? 'Player is ready' : 'Player setting up...'}
        </Text>
        <Text style={styles.instructions}>Status: {this.state.status}</Text>
        <Text style={styles.instructions}>Quality: {this.state.quality}</Text>
 
        {/* Show Progress */}
        <Text style={styles.instructions}>
          Progress: {Math.trunc(this.state.currentTime)}s ({Math.trunc(
            this.state.duration / 60
          )}:{Math.trunc(this.state.duration % 60)}s)
          {Platform.OS !== 'ios' && (
            <Text> (Click Update Progress & Duration)</Text>
          )}
        </Text>
 
        <Text style={styles.instructions}>
          {this.state.error ? 'Error: ' + this.state.error : ''}
        </Text>
      </ScrollView>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  buttonGroup: {
    flexDirection: 'row',
    alignSelf: 'center',
  },
  button: {
    paddingVertical: 4,
    paddingHorizontal: 8,
    alignSelf: 'center',
  },
  buttonText: {
    fontSize: 18,
    color: 'blue',
  },
  buttonTextSmall: {
    fontSize: 15,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  player: {
    alignSelf: 'stretch',
    marginVertical: 10,
  },
});

Screenshot : 

This is all about YouTube Video Integration in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.