Skip to main content

React Native Host Dashboard Tutorial

Build a host-operated room with mediasfu-reactnative@2.4.0. This path uses the package’s Conference room for participants, requests, moderation, media, chat, polls, breakout rooms, whiteboard, recording controls, and room exit.

Prerequisites​

  • Node.js 22.11 or newer plus Android Studio or Xcode.
  • An HTTPS signed-in app backend with MediaSFU create and join routes.
  • Backend role rules that decide who may moderate or end a room.

Project files​

Use the complete React Native starter app. It contains every file needed for this package. On its first screen, choose Host dashboard; the supplied room opens through the secured application backend.

npx @react-native-community/cli@20.1.0 init my-mediasfu-app --version 0.86.2
cd my-mediasfu-app

The short-lived token UI is only for an isolated local authority-server test. A released app obtains its token through its signed-in session; reusable MediaSFU credentials remain backend-only.

Run​

cd my-mediasfu-app
npm install
npm run android

Expected result​

Choose Host dashboard, create or join as a host, and confirm participant, request, moderation, media, collaboration, and end-room controls appear for the room role returned by the backend.

Recovery​

  • On 401 or 403, refresh the app session and role; do not make a local role change.
  • On a failed moderation request, refresh room state before showing a final result.
  • Keep the room usable if device capture is denied; let the person retry media separately.

Cleanup​

End uses the host’s room-wide action. Clear app-held participants, drafts, timers, and subscriptions after leaving, and let the backend apply its room and recording policy.