React Native YouTube Player API Wrapper

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 --saveimport 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 => {},

Preview:

Download Details:

Author: LonelyCpp

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/LonelyCpp/react-native-youtube-iframe

License: MIT

#react-native #react #reactjs