MediaSFU React Native (Expo)
    Preparing search index...

    Variable PreJoinPageConst

    PreJoinPage: React.FC<PreJoinPageOptions> = ...

    PreJoinPage - Room creation/join interface with media preview

    PreJoinPage is a React Native component that provides the entry point for creating new meeting rooms or joining existing ones. It offers two modes:

    1. UI Mode: Full interface with room configuration options
    2. Headless Mode: Programmatic room creation/join without UI

    Key Features:

    • Create new rooms with custom settings (duration, capacity, event type)
    • Join existing rooms by event ID
    • Media device preview (camera/microphone)
    • Recording configuration options
    • Waiting room and secure code settings
    • Local (Community Edition) and cloud (MediaSFU) server support
    • Headless/programmatic mode for automated workflows
    • Input validation and error feedback
    • Persistent storage of preferences

    Room Configuration Options:

    • Event type (chat, broadcast, webinar, conference)
    • Duration (up to 24 hours)
    • Participant capacity
    • Recording parameters (videoParticipants, videoOptions, etc.)
    • Waiting room enable/disable
    • Secure access codes

    UI Customization: The PreJoinPage layout and styling are fixed but can be customized by creating a custom pre-join component and using it instead of this default one.

    Configuration options

    Rendered pre-join page or null (headless mode)

    // Basic usage with UI
    import React, { useState } from 'react';
    import { PreJoinPage } from 'mediasfu-reactnative-expo';
    import { connectSocket } from './sockets/SocketManager';

    function App() {
      const [socket, setSocket] = useState(null);
      const [validated, setValidated] = useState(false);

      const parameters = {
        imgSrc: 'https://example.com/logo.png',
        showAlert: ({ message, type }) => alert(message),
        updateIsLoadingModalVisible: setLoading,
        connectSocket: connectSocket,
        updateSocket: setSocket,
        updateValidated: setValidated,
        updateApiUserName: setApiUserName,
        updateApiToken: setApiToken,
        updateLink: setLink,
        updateRoomName: setRoomName,
        updateMember: setMember,
      };

      const credentials = {
        apiUserName: 'your-api-username',
        apiKey: 'your-api-key',
      };

      if (validated) {
        return <MeetingRoom socket={socket} />;
      }

      return (
        <PreJoinPage
          parameters={parameters}
          credentials={credentials}
          connectMediaSFU={true}
        />
      );
    }

    // Headless mode - programmatic room creation
    const headlessOptions = {
      action: 'create',
      capacity: 50,
      duration: 60, // minutes
      eventType: 'webinar',
      userName: 'Host Name',
      recordingParams: {
        recordingVideoParticipantsFullRoomSupport: true,
        recordingAllParticipantsSupport: false,
      },
    };

    return (
      <PreJoinPage
        parameters={parameters}
        credentials={credentials}
        returnUI={false}
        noUIPreJoinOptions={headlessOptions}
      />
    );

    // Community Edition (local server)
    return (
      <PreJoinPage
        parameters={parameters}
        localLink="http://localhost:3000"
        connectMediaSFU={false}
      />
    );


    export default App;

    Settings

    Member Visibility