Skip to main content

React Native Classroom Workshop Tutorial

Build a teacher-and-learner room with mediasfu-reactnative@2.4.0. The Conference room provides people controls, media, chat, polls, breakout rooms, whiteboard, screen sharing, recording controls, and exit.

Prerequisites​

  • Node.js 22.11 or newer and Android Studio or Xcode.
  • An HTTPS signed-in backend that owns teacher, learner, breakout, and recording authorization.

Project files​

Use the complete React Native starter app. It contains every file needed for this package. On its first screen, choose Classroom workshop; 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 local token field is limited to an isolated development check. Before release, obtain app authority through your signed-in backend and keep MediaSFU credentials there.

Run​

cd my-mediasfu-app
npm install
npm run android

Expected result​

Choose Classroom workshop and join as teacher and learner. Verify the room role controls and test a poll, whiteboard, or breakout flow that your backend permits.

Recovery​

  • Keep a learner in the main room if a breakout move fails.
  • Restore teacher-only controls only after fresh room authority is confirmed.
  • Preserve or discard board drafts according to product policy after a reconnect.

Cleanup​

Use the host end flow to finish the class. Clear attendance snapshots, room drafts, exports, timers, and subscriptions in your app after exit.