Function WelcomePage

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.

// 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} />;
}
Copy

// 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} />;
Copy