How to Play YouTube Videos in a React Native App?

Video content (either tutorial or entertainment) is also quite popular among many different types of apps that incorporate media into them, so incorporating YouTube videos into your React-native application is something developers frequently need to do with their apps (i.e., if their app is intended for educational or media purposes). Although React-Native does not come with a native YouTube player component included, there are several different libraries that provide you with the ability to easily integrate YouTube videos into your application.

Steps to Play YouTube Videos in a React Native App:

Step 1: Installing react-native-video

To install the react-native-video library, you need to install and link it via npm or yarn.

yarn add react-native-youtube-iframe

or

yarn add react-native-youtube-iframe

If you are developing for iOS, you need to navigate to the ios platform folder of your app in a command prompt window and run:

pod install

Step 2: Implementing the Video Component

The next step is to add a Video component to your app and import the newly installed Video component.

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

const { width } = Dimensions.get('window');
const VIDEO_ID = 'mCFLjDOGNVA';

export default function YouTubeIframePlayer() {
  const playerRef = useRef(null);
  const height = (width / 16) * 9;
  const [playing, setPlaying] = useState(false);
  const onStateChange = useCallback((state) => {
     if (state === 'ended') setPlaying(false);
  }, []);
  return (
    <SafeAreaView>
      <View style={{ width, height }}>
        <YoutubePlayer
          ref={playerRef}
          height={height}
          width={width}
          play={playing}
          videoId={VIDEO_ID}
          onChangeState={onStateChange}
        />
      </View>
      <View style={{ marginTop: 12, flexDirection: 'row', justifyContent: 'center' }}>
        <Button title={playing ? 'Pause' : 'Play'} onPress={() => setPlaying((p) => !p)} />
      </View>
    </SafeAreaView>
  );
}

Conclusion:

Embedding YouTube videos in a React Native app is simple using react-native-youtube-iframe. Whether you need basic playback or advanced features like fullscreen, event tracking, or custom controls, this library provides everything you need.

FAQ

1. What is the best library for integrating YouTube videos into React-Native apps?

The recommended library for React-Native apps is react-native-youtube-iframe. The library is very stable and lightweight, which makes it the best-performing collection.

2. Does the library support playing YouTube Videos in full screen?

Yes, the library does allow you to play YouTube videos in full screen on both the iOS and Android platforms, as it supports WebView functionality.

3. Does it work on both Android and iOS?

Yes, both Android and iOS devices support playing YouTube videos through the WebView.