Skip to main content

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>  );}