Skip to main content
Version: 0.27.0

React Native Examples

Runnable reference apps demonstrating common Fishjam use cases in React Native

Each example is a standalone Expo application you can run locally and use as a starting point for your own project. All examples use @fishjam-cloud/react-native-client. You need a Fishjam ID to connect to the media server, and a Sandbox API URL to create rooms and get peer tokens. Get your Fishjam ID from the Fishjam Dashboard, and your Sandbox API URL from the Sandbox tab. See What is the Sandbox API? for an in-depth explanation.

ExampleWhat it demonstrates
Minimal Video RoomSimplest possible video call — the baseline for all other examples
Fishjam ChatFull-featured video conferencing and livestreaming app with simulcast
Background BlurApplying real-time video effects via camera track middleware
Text ChatPeer-to-peer text messaging with WebRTC data channels
Video PlayerLivestream broadcaster and viewer with separate UI modes

Minimal Video Room​

The simplest way to get video calling working — joining a room, displaying your own camera feed, and showing remote participants. Start here if you're new to Fishjam.

Demonstrates:

  • Wrapping your app in FishjamProvider
  • Connecting to a room with useConnection
  • Accessing local and remote peers with usePeers
  • Rendering video streams with RTCView

Running the example​

cd minimal-react-native
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
important

This won't work on the iOS Simulator — the Simulator can't access the camera. Test on a real device.

The room screen uses usePeers to retrieve all participants and renders their camera streams in a two-column grid with RTCView.

Browse the full source: minimal-react-native on GitHub

Fishjam Chat​

A full-featured application covering two distinct room types: a video conferencing room (conference call with multiple participants) and a livestream room (one broadcaster, many viewers). It is the most complete example and the best reference for production-like architecture.

Demonstrates:

  • Tab-based navigation between VideoRoom and Livestream features
  • Pre-call room preview before joining
  • Environment switching between staging and production
  • Screen sharing from a livestream broadcaster
  • Permission handling with a reusable useMediaPermissions hook
  • Selecting received video quality with simulcast (setReceivedQuality)

Running the example​

cd fishjam-chat
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
important

Before prebuilding, replace the bundle identifier io.fishjam.example.fishjamchat with your own in app.json (both the Android package name and iOS bundle identifier fields).

The app uses Expo Router with a bottom tab navigator. Each tab handles its own connection flow independently using useConnection.

Browse the full source: fishjam-chat on GitHub

Background Blur​

Demonstrates how to apply real-time background blur to a local camera feed using camera track middleware. Blur can be toggled on and off during an active call without reconnecting.

Demonstrates:

  • Installing and using @fishjam-cloud/react-native-webrtc-background-blur
  • Applying a video effect with setCameraTrackMiddleware
  • Removing an effect by passing null to setCameraTrackMiddleware

Running the example​

Install the additional blur package first:

npm install @fishjam-cloud/react-native-webrtc-background-blur
cd blur-example
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
info

Blur applies only to the local camera feed sent to other participants. Remote participants' video is unaffected.

The blur hook from useBackgroundBlur provides a middleware function that is passed directly to setCameraTrackMiddleware. Passing null disables the effect.

Browse the full source: blur-example on GitHub

Text Chat​

Demonstrates peer-to-peer text messaging over WebRTC data channels — no separate messaging server required. Messages are sent directly between peers inside the Fishjam room.

Demonstrates:

  • Initializing a data channel with useDataChannel
  • Publishing messages with publishData
  • Receiving incoming messages via the onDataReceived callback
  • Encoding and decoding message payloads with JSON

Running the example​

cd text-chat
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
info

Data channels use reliable mode by default, which guarantees message delivery and ordering — similar to TCP.

Messages are Uint8Array payloads encoded and decoded with JSON and TextEncoder/TextDecoder. The useDataChannel hook wires together publishData for sending and onDataReceived for receiving.

Browse the full source: text-chat on GitHub

Video Player​

A focused livestreaming example with two separate modes: a streamer who broadcasts video and audio, and a viewer who watches the stream. Unlike Fishjam Chat, this example uses a single App.tsx entry point with a simple role selector screen.

Demonstrates:

  • Broadcasting with useLivestreamStreamer
  • Watching a stream with useLivestreamViewer
  • Initializing camera and microphone with useInitializeDevices
  • Toggling camera and microphone tracks during an active stream

Running the example​

cd video-player
yarn install
npx expo prebuild
npx expo run:android  # or run:ios

The streamer side uses useLivestreamStreamer and useInitializeDevices to start broadcasting, while the viewer side uses useLivestreamViewer to connect and render the incoming stream with RTCView.

Browse the full source: video-player on GitHub

Next steps​