Basic Usage
This snippet renders a Youtube video with a button that can play or pause the video. When the player has finished playing it, an alert is triggered.
import 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> );}