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

    Variable RequestsModalConst

    RequestsModal: React.FC<RequestsModalOptions> = ...

    RequestsModal - Participant request management interface

    RequestsModal is a React Native component that displays pending participant requests (microphone, video, screenshare) with options to filter, accept, or reject each request. Host users can review and respond to requests in real-time via Socket.io.

    Key Features:

    • Scrollable list of participant requests (mic, video, screenshare)
    • Accept/reject actions for each request
    • Real-time filtering by participant name or request type
    • Request counter badge display
    • Socket.io synchronization for instant responses
    • Custom request item rendering
    • Position-configurable modal (5 positions)

    UI Customization: This component can be replaced via uiOverrides.requestsModal to provide a completely custom requests management interface.

    Configuration options

    Rendered requests modal

    // Basic usage with request handling
    import React, { useState } from 'react';
    import { RequestsModal } from 'mediasfu-reactnative-expo';
    import { io } from 'socket.io-client';

    const socket = io('https://your-server.com');
    const [showRequests, setShowRequests] = useState(false);
    const [filter, setFilter] = useState('');

    const requests = [
      { id: '1', name: 'John Doe', icon: 'fa-microphone', username: 'john' },
      { id: '2', name: 'Jane Smith', icon: 'fa-video', username: 'jane' },
      { id: '3', name: 'Bob Wilson', icon: 'fa-desktop', username: 'bob' },
    ];

    return (
      <RequestsModal
        isRequestsModalVisible={showRequests}
        onRequestClose={() => setShowRequests(false)}
        requestCounter={requests.length}
        onRequestFilterChange={setFilter}
        requestList={requests}
        updateRequestList={(newList) => console.log('Updated:', newList)}
        roomName="meeting-room-123"
        socket={socket}
        parameters={{
          getUpdatedAllParams: () => ({ filteredRequestList: requests }),
        }}
      />
    );

    // With custom positioning and request handling
    const handleRequestResponse = async (options: RespondToRequestsOptions) => {
      await respondToRequests(options);
      console.log('Request handled');
    };

    return (
      <RequestsModal
        isRequestsModalVisible={isVisible}
        onRequestClose={handleClose}
        requestCounter={pendingCount}
        onRequestFilterChange={handleFilterChange}
        onRequestItemPress={handleRequestResponse}
        requestList={pendingRequests}
        updateRequestList={setPendingRequests}
        roomName={roomId}
        socket={socketConnection}
        parameters={requestParams}
        position="bottomLeft"
        backgroundColor="#2c3e50"
      />
    );

    // Using custom UI via uiOverrides
    const config = {
      uiOverrides: {
        requestsModal: {
          component: MyCustomRequestsManager,
          injectedProps: {
            theme: 'dark',
            showAutoApprove: true,
          },
        },
      },
    };

    return <MyMeetingComponent config={config} />;

    Settings

    Member Visibility