Basic Usage

This snippet renders a Peertube 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 PeertubePlayer from "react-native-peertube-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>
      <PeertubePlayer
        height={300}
        play={playing}
        videoUrl={'https://vidz.julien.ovh/videos/embed/105fd6ef-3048-43c3-b877-fdb8aaab11d5'}
        onChangeState={onStateChange}
      />
      <Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
    </View>
  );
}