Run Participants and Collaboration in React Native

Build participant controls and shared room activities with mediasfu-reactnative@2.4.0. This guide covers waiting and requests, moderation, roles and permissions, messages, polls, breakouts, whiteboard, and recording on a phone or tablet.

Complete the React Native room lifecycle first. Keep account credentials and room authority on your application backend.

Use the supplied room workspaces first

ModernMediasfuGeneric includes mobile-ready participant, waiting, request, co-host, panelist, permission, message, poll, breakout, whiteboard, and recording surfaces. Start there so touch controls, safe areas, scrolling, keyboard avoidance, room roles, media, and socket state stay coordinated.

Open package workspaces from your own navigation only when you need a different mobile shell:

import {
  launchBreakoutRooms,
  launchConfigureWhiteboard,
  launchMessages,
  launchPanelists,
  launchParticipants,
  launchPermissions,
  launchPoll,
  launchRecording,
  launchRequests,
  launchWaiting,
} from 'mediasfu-reactnative';

export function openPeople(
  visible: boolean,
  setVisible: (next: boolean) => void,
) {
  launchParticipants({
    isParticipantsModalVisible: visible,
    updateIsParticipantsModalVisible: setVisible,
  });
}

The same visibility pattern opens the other supplied workspaces. Keep one current room-state object; do not build a second participant or poll store just for a custom bottom sheet.

Participant authority

The root package exports the complete participant actions used by its supplied workspaces:

import {
  modifyCoHostSettings,
  muteParticipants,
  removeParticipants,
  respondToRequests,
  respondToWaiting,
  updatePanelists,
  updateParticipantPermission,
  updatePermissionConfig,
} from 'mediasfu-reactnative';

Pass the current room-owned options to these functions. Do not construct a socket, participant, or permission object from stale screen state.

Action	Show success when	Recovery
Admit or reject	The waiting entry disappears and the person joins or receives rejection.	Keep it pending until current room state changes.
Approve or deny request	The request closes and the participant sees the resulting permission or response.	Restore the request if authorization or connection fails.
Mute or remove	The affected participant receives the state and all remaining clients update.	Never remove a card locally to simulate success.
Assign co-host or panelist	The new role and controls appear on the target device.	Keep the previous role if the server does not confirm it.
Change permission	The target control follows the new individual or room policy.	Restore only the failed setting; keep unrelated permissions unchanged.

Disable authority controls while the app is backgrounded, reconnecting, or waiting for the previous action. Ask for confirmation before removal or a broad permission change.

Messages and polls

Use MessagesModal or ModernMessagesModal for room and direct messages. Keep the recipient visible near the send control, preserve an unsent draft locally, and clear it according to your privacy policy when the room ends.

The package exports handleCreatePoll, handleVotePoll, and handleEndPoll. Use them with the current room socket and show completion only after the room's poll state changes. Disable double taps while an action is pending.

Breakouts and whiteboard

Use BreakoutRoomsModal or ModernBreakoutRoomsModal to assign and start breakouts. Confirm every participant's destination, handle unassigned people, and stop the breakout before clearing drafts. After reconnect, load the current breakout instead of starting it again.

Use ConfigureWhiteboardModal to configure the shared board and Whiteboard to render it. A drawing placed only in local component state is not shared. Stop the room whiteboard before clearing local tools or temporary exports.

Recording

Open the supplied recording workspace with launchRecording, explain what will be captured, and collect the consent your product requires. Start with startRecording and stop with stopRecording using current room options. Do not show recording as active until the room confirms it. Apply your backend's retention, access, and deletion policy to the resulting recording.

Mobile recovery and cleanup

Test app backgrounding, phone calls, audio-route changes, rotation, keyboard display, permission changes, and network handoff. On reconnect, wait for current room state and never replay a moderation, poll, breakout, whiteboard, or recording action automatically.

On leave, removal, or meeting end, close supplied workspaces and clear app-owned selections, drafts, timers, temporary exports, and room authority. Stop app-owned media and remove listeners. Keep ordinary participant leave, participant removal, and host-ended meeting messages distinct.

Release checklist

• Test host, co-host or panelist, and participant devices separately.
• Admit, reject, approve, deny, mute, remove, and reassign with two devices.
• Send room and direct messages with the keyboard open and after rotation.
• Create, vote, and end a poll without accepting a double tap.
• Start and stop breakouts and whiteboard across two devices.
• Start and stop recording with consent and retention behavior visible.
• Background and restore the app during each pending operation.
• Switch network and audio route without replaying an action.
• Verify cleanup after participant leave, removal, and meeting end.

Build and test the React Native application, then run this checklist on physical Android and iOS devices before release.