A React Native wrapper for the Youtube iframe player API. Works seamlessly on both ios and android platforms.
# 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";
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>
);
}
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 => {},
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