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

    Variable WelcomePageConst

    WelcomePage: React.FC<WelcomePageOptions> = ...

    WelcomePage - Event credentials entry and validation screen

    WelcomePage is a React Native component that provides the initial entry point for joining MediaSFU events. Users can enter credentials manually (event ID, secret, name) or scan a QR code to auto-fill. It validates credentials, handles rate limiting, and establishes the Socket.io connection before proceeding to the meeting.

    Key Features:

    • Manual credential entry (Event ID, Secret, Name, optional Link)
    • QR code scanning for auto-fill
    • Camera permission handling
    • Rate limiting (10 attempts per 3 hours)
    • Socket.io connection establishment
    • Persistent storage of attempt counts
    • Loading state management
    • Input validation and error feedback
    • Support for custom event links

    UI Customization: The WelcomePage layout and styling are fixed but can be customized by creating a custom welcome page component and using it instead of this default one.

    Configuration options

    Rendered welcome page

    // Basic usage in main app component
    import React, { useState } from 'react';
    import { WelcomePage } from 'mediasfu-reactnative-expo';
    import { connectSocket } from './sockets/SocketManager';

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

      const parameters = {
        imgSrc: 'https://example.com/logo.png',
        showAlert: ({ message, type }) => alert(message),
        updateIsLoadingModalVisible: setLoading,
        connectSocket: connectSocket,
        updateSocket: setSocket,
        updateValidated: setValidated,
        updateApiUserName: (name) => setCredentials(prev => ({ ...prev, apiUserName: name })),
        updateApiToken: (token) => setCredentials(prev => ({ ...prev, apiToken: token })),
        updateLink: (link) => setCredentials(prev => ({ ...prev, link })),
        updateRoomName: (room) => setCredentials(prev => ({ ...prev, roomName: room })),
        updateMember: (member) => setCredentials(prev => ({ ...prev, member })),
      };

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

      return <WelcomePage parameters={parameters} />;
    }

    // With custom branding and alert handler
    const customParameters = {
      imgSrc: 'https://mybrand.com/logo.png',
      showAlert: ({ message, type, duration }) => {
        Toast.show({ text: message, type, duration });
      },
      // ... other handlers
    };

    return <WelcomePage parameters={customParameters} />;

    Settings

    Member Visibility