Const// Basic usage - Display participants modal with default settings
import React, { useState } from 'react';
import { ParticipantsModal } from 'mediasfu-reactnative-expo';
import { Socket } from 'socket.io-client';
function MeetingControls() {
const [isModalVisible, setIsModalVisible] = useState(false);
const [participants, setParticipants] = useState([
{ name: 'Alice', id: '1', islevel: '1', muted: false },
{ name: 'Bob', id: '2', islevel: '1', muted: true },
]);
const participantsParameters = {
position: 'topRight',
backgroundColor: '#83c0e9',
coHostResponsibility: [{ name: 'participants', value: true }],
coHost: 'JaneDoe',
member: 'JohnDoe',
islevel: '2',
participants,
eventType: 'conference',
filteredParticipants: participants,
socket: socketInstance,
roomName: 'MainRoom',
updateIsMessagesModalVisible: (visible) => console.log('Messages:', visible),
updateDirectMessageDetails: (participant) => console.log('DM:', participant),
updateStartDirectMessage: (start) => console.log('Start DM:', start),
updateParticipants: setParticipants,
getUpdatedAllParams: () => participantsParameters,
};
return (
<>
<Button title="Participants" onPress={() => setIsModalVisible(true)} />
<ParticipantsModal
isParticipantsModalVisible={isModalVisible}
onParticipantsClose={() => setIsModalVisible(false)}
onParticipantsFilterChange={(filter) => console.log('Filter:', filter)}
participantsCounter={participants.length}
parameters={participantsParameters}
/>
</>
);
}
// With custom action handlers and positioning
<ParticipantsModal
isParticipantsModalVisible={showParticipants}
onParticipantsClose={() => setShowParticipants(false)}
onParticipantsFilterChange={(filter) => handleFilterChange(filter)}
participantsCounter={filteredParticipants.length}
onMuteParticipants={async (options) => {
console.log('Custom mute logic');
await muteParticipants(options);
}}
onMessageParticipants={(options) => {
console.log('Messaging participant:', options.participant.name);
messageParticipants(options);
}}
onRemoveParticipants={async (options) => {
if (confirm('Remove participant?')) {
await removeParticipants(options);
}
}}
parameters={{
...participantsParameters,
position: 'center',
backgroundColor: '#1a1a2e',
}}
backgroundColor="#1a1a2e"
position="center"
/>
// Using uiOverrides for complete modal replacement
import { MyCustomParticipantsModal } from './MyCustomParticipantsModal';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
participantsModalComponent: {
component: MyCustomParticipantsModal,
injectedProps: {
theme: 'compact',
showAvatars: true,
},
},
},
};
// MyCustomParticipantsModal.tsx
export const MyCustomParticipantsModal = (props: ParticipantsModalOptions & { theme: string; showAvatars: boolean }) => {
return (
<Modal visible={props.isParticipantsModalVisible} onRequestClose={props.onParticipantsClose}>
<View>
<Text>Participants ({props.participantsCounter})</Text>
{props.parameters.participants.map(p => (
<View key={p.id}>
{props.showAvatars && <Image source={{ uri: p.avatar }} />}
<Text>{p.name}</Text>
</View>
))}
</View>
</Modal>
);
};
ParticipantsModal - Participant list with search, filtering, and management actions
ParticipantsModal is a comprehensive React Native modal for viewing and managing session participants. It provides search/filter functionality, participant lists (segmented by role/type), and action buttons for muting, messaging, or removing participants based on user permissions.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.participantsModalComponentto provide a completely custom participants modal implementation.