How to add Youtube video in React Native
Tags: reactnative, youtube
Published: 2021-03-04 08:14:18

---
title: How to add Youtube video in React Native
published: true
description: 
tags: reactnative,youtube 
canonical_url: http://www.instamobile.io/react-native-tutorials/play-youtube-videos-react-native/
cover_image: https://images.unsplash.com/photo-1541877944-ac82a091518a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80
---

Video support is a feature to make your app more lively, more interactive, and more fun. By the end of this article, you will be able to embed any Youtube videos of your choice in React Native apps easily. For you to understand this tutorial you should be familiar with the use of [**useRef ](https://reactjs.org/docs/hooks-reference.html#useref)**and[** useState ](https://reactjs.org/docs/hooks-state.html)**in React Native.

To achieve playing Youtube videos in React Native, we will be making use of the npm dependency named [**react-native-youtube-iframe](https://www.npmjs.com/package/react-native-youtube-iframe). **We will work through using this library by fully integrating it into an app.

### Installation

You need to install **react-native-webview** first. Simply run:

    yarn add react-native-webview
    
    or
    
    npm install react-native-webview

then install **react-native-youtube-iframe:**

    yarn add react-native-youtube-iframe
    
    or 
    
    npm install react-native-youtube-iframe

### Usage

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow strict-local
     */
    
    import React from 'react';
    import {View} from 'react-native';
    import YoutubePlayer from 'react-native-youtube-iframe';
    
    const App = () => {
    
      return (
        <View>
          <YoutubePlayer
            height={300}
            play={true}
            videoId={'84WIaK3bl_s'}
          />
        </View>
      );
    };

The required props here are ***height ***and the ***videoId ***of the Youtube video you intend to play in the React Native app and as seen in the app below, we have a Casey Neistat travel vlog on display:

![](https://cdn-images-1.medium.com/max/2000/0*EP6n7qBpP58QsqbA.jpg)

The ***play*** prop is set to true, so let us take it a step further and control play and pause actions:

    /**
     * Sample React Native App
     * [https://github.com/facebook/react-native](https://github.com/facebook/react-native)
     *
     * @format
     * @flow strict-local
     */

    import React, {useState, useCallback} from 'react';
    import {Button, View, Alert} from 'react-native';
    import YoutubePlayer from 'react-native-youtube-iframe';

    const App = () => {
      const [playing, setPlaying] = useState(false);

      const togglePlaying = () => {
        setPlaying((prev) => !prev);
      }

      return (
        <View>
          <YoutubePlayer
            height={300}
            play={playing}
            videoId={'84WIaK3bl_s'}
          />
          <Button title={playing ? 'pause' : 'play'} onPress={togglePlaying} />
        </View>
      );
    };

    

Now we have control to play and pause the Youtube video. It would be nice to add a feature to tell the user that the video is done playing by passing a callback such as the ***onChangeState ***prop provided by the dependency:

    /**
     * Sample React Native App
     * [https://github.com/facebook/react-native](https://github.com/facebook/react-native)
     *
     * @format
     * @flow strict-local
     */

    import React, {useState} from 'react';
    import {Button, View, Alert} from 'react-native';
    import YoutubePlayer from 'react-native-youtube-iframe';

    const App = () => {
      const [playing, setPlaying] = useState(false);

      const onStateChange = (state) => {
        if (state === 'ended') {
          setPlaying(false);
          Alert.alert('video has finished playing!');
        }
      }

      const togglePlaying = () => {
        setPlaying((prev) => !prev);
      }

      return (
        <View>
          <YoutubePlayer
            height={300}
            play={playing}
            videoId={'84WIaK3bl_s'}
            onChangeState={onStateChange}
          />
          <Button title={playing ? 'pause' : 'play'} onPress={togglePlaying} />
        </View>
      );
    };

    

![](https://cdn-images-1.medium.com/max/2000/0*97FyaaQ_QMCbBxk0.gif)

Now that we’re done learning the basic usage of this Youtube player dependency, let us go ahead and build complete control for our video player to play, pause, skip, and mute.

    import React, {useState, useRef} from 'react';
    import {View, Alert, StyleSheet} from 'react-native';
    import YoutubePlayer from 'react-native-youtube-iframe';
    import {Icon} from 'react-native-elements';

    const App = () => {
      const [playing, setPlaying] = useState(false);
      const [isMute, setMute] = useState(false);
      const controlRef = useRef();

      const onStateChange = (state) => {
        if (state === 'ended') {
          setPlaying(false);
          Alert.alert('video has finished playing!');
        }
        if (state !== 'playing') {
          setPlaying(false);
        }
      };

      const togglePlaying = () => {
        setPlaying((prev) => !prev);
      };

      const seekBackAndForth = (control) => {
        console.log('currentTime');
        controlRef.current?.getCurrentTime().then((currentTime) => {
          control === 'forward'
            ? controlRef.current?.seekTo(currentTime + 15, true)
            : controlRef.current?.seekTo(currentTime - 15, true);
        });
      };

      const muteVideo = () => setMute(!isMute);

      const ControlIcon = ({name, onPress}) => (
        <Icon onPress={onPress} name={name} size={40} color="#fff" />
      );

      return (
        <View style={styles.container}>
          <YoutubePlayer
            height={300}
            ref={controlRef}
            play={playing}
            mute={isMute}
            videoId={'84WIaK3bl_s'}
            onChangeState={onStateChange}
          />
          <View style={styles.controlContainer}>
            <ControlIcon
              onPress={() => seekBackAndForth('rewind')}
              name="skip-previous"
            />
            <ControlIcon
              onPress={togglePlaying}
              name={playing ? 'pause' : 'play-arrow'}
            />
            <ControlIcon
              onPress={() => seekBackAndForth('forward')}
              name="skip-next"
            />
          </View>
          <ControlIcon
            onPress={muteVideo}
            name={isMute ? 'volume-up' : 'volume-off'}
          />
        </View>
      );
    };

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: 'darkblue',
      },
      controlContainer: {
        flexDirection: 'row',
        justifyContent: 'space-around',
      },
    });

    

We have added more custom controls to the original component we already had before and added callbacks to seek forward and backward using the ***playerRef ***ref. The mute control is basically managed by the ***isMute*** state but it is worthy of note that the dependency provides a method ***isMuted*** (returns a promise that resolves to true if the video is muted, false if not) to determine if the video is muted or not.

![](https://cdn-images-1.medium.com/max/2000/0*2b72kR_dpe9TN2_0.jpg)

### Conclusion

Embedding and playing Youtube videos in your React Native app is seamless and a more affordable way of displaying videos in your app, given that Youtube will support the costs of hosting the video itself. The npm dependency we described is really easy to use and is highly customizable as we have seen in the above snippet where we added forward and rewind controls.

Next time you’re looking to add Youtube video support to React Native apps, refer to this tutorial. If you enjoyed the project, please consider sharing the link with your friends and community. Cheers!
>  [originally published on instamobile.io](https://www.instamobile.io/react-native-tutorials/play-youtube-videos-react-native/)