List other peers

In order to see other streaming peers, you can use usePeers. It will return all
other peers, together with the tracks that they are streaming.

Example code that show all videos

import React from "react";
import { View } from "react-native";
import {
  usePeers,
  VideoRendererView,
} from "@fishjam-cloud/react-native-client";

export function ShowAllPeers() {
  const { remotePeers, localPeer } = usePeers();

  const videoTracks = remotePeers.flatMap(
    (peer) =>
      peer.tracks.filter((track) => track.type === "Video" && track.isActive),
  );
  const localTrack = localPeer?.tracks.find((t) => t.type === "Video");

  return (
    <View>
      {localTrack && (
        <VideoRendererView
          key={localTrack.id}
          trackId={localTrack.id}
          videoLayout="FIT"
        />
      )}
      {videoTracks.map((track) => (
        <VideoRendererView
          key={track.id}
          trackId={track.id}
          videoLayout="FIT"
        />
      ))}
    </View>
  );
}

Enable Picture in Picture

To allow users to continue watching video in a floating window when they background your app, wrap your video call UI with the PipContainerView component. See the Picture in Picture guide for more details.