React Native Wrapper For Youtube Player API

Description:

A React Native wrapper for the Youtube iframe player API. Works seamlessly on both ios and android platforms.

More Features:

Does not rely on the native youtube service on android (prevents unexpected crashes, works on phones without the youtube app)
Uses the webview player which is known to be more stable compared to the native youtube app
Access to a vast API provided through the iframe youtube API
Supports multiple youtube player instances in a single page
Fetch basic video metadata without API keys (uses oEmbed)
Works on modals and overlay components
Expo support

Install & Import:

# NPM
$ npm i react-native-youtube-iframe react-native-webview --save

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

Basic Usage:

export default function App() {
  const [playing, setPlaying] = useState(false);
  const onStateChange = useCallback((state) => {
    if (state === "ended") {
      setPlaying(false);
      Alert.alert("video has finished playing!");
    }
  }, []);
  const togglePlaying = useCallback(() => {
    setPlaying((prev) => !prev);
  }, []);
  return (
    <View>
      <YoutubePlayer
        height={300}
        play={playing}
        videoId={"iee2TATGMyI"}
        onChangeState={onStateChange}
      />
      <Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
    </View>
  );
}

Available Props:

height,
width,
videoId,
playList,
play = false, // play or pause
mute = false,
volume = 100,
webViewStyle,
webViewProps,
playbackRate = 1,
playListStartIndex = 0,
initialPlayerParams = {},
allowWebViewZoom = false,
forceAndroidAutoplay = false,
onChangeState = _event => {},
onFullScreenChange = _status => {},
onPlaybackQualityChange = _quality => {},
onPlaybackRateChange = _playbackRate => {},
onError = _err => {},
onReady = _event => {},