Const// Basic usage - Host permission controls
import React, { useState } from 'react';
import { EventSettingsModal } from 'mediasfu-reactnative-expo';
import { io } from 'socket.io-client';
function HostControls() {
const [isModalVisible, setModalVisible] = useState(false);
const [audioSetting, setAudioSetting] = useState('allow');
const [videoSetting, setVideoSetting] = useState('allow');
const [screenshareSetting, setScreenshareSetting] = useState('approval');
const [chatSetting, setChatSetting] = useState('allow');
const socket = io('https://mediasfu.com');
return (
<>
<Button title="Event Settings" onPress={() => setModalVisible(true)} />
<EventSettingsModal
isEventSettingsModalVisible={isModalVisible}
onEventSettingsClose={() => setModalVisible(false)}
audioSetting={audioSetting}
videoSetting={videoSetting}
screenshareSetting={screenshareSetting}
chatSetting={chatSetting}
updateAudioSetting={setAudioSetting}
updateVideoSetting={setVideoSetting}
updateScreenshareSetting={setScreenshareSetting}
updateChatSetting={setChatSetting}
updateIsSettingsModalVisible={setModalVisible}
roomName="meeting-room-123"
socket={socket}
showAlert={(alert) => console.log(alert.message)}
/>
</>
);
}
// Positioned at bottom-left with custom colors
<EventSettingsModal
isEventSettingsModalVisible={true}
onEventSettingsClose={closeModal}
position="bottomLeft"
backgroundColor="#2c2c2c"
audioSetting="allow"
videoSetting="approval"
screenshareSetting="disallow"
chatSetting="allow"
updateAudioSetting={setAudioSetting}
updateVideoSetting={setVideoSetting}
updateScreenshareSetting={setScreenshareSetting}
updateChatSetting={setChatSetting}
updateIsSettingsModalVisible={setModalVisible}
roomName={roomName}
socket={socket}
/>
// Using uiOverrides for complete settings modal replacement
import { MyCustomEventSettings } from './MyCustomEventSettings';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
eventSettingsModal: {
component: MyCustomEventSettings,
injectedProps: {
showAdvancedOptions: true,
},
},
},
};
// MyCustomEventSettings.tsx
export const MyCustomEventSettings = (props: EventSettingsModalOptions & { showAdvancedOptions: boolean }) => {
const handleSave = async () => {
await props.onModifyEventSettings?.({
parameters: {
audioSet: props.audioSetting,
videoSet: props.videoSetting,
screenshareSet: props.screenshareSetting,
chatSet: props.chatSetting,
...props,
},
});
props.onEventSettingsClose();
};
return (
<Modal visible={props.isEventSettingsModalVisible}>
<View style={{ padding: 20 }}>
<Text>Audio Permission:</Text>
<Picker
selectedValue={props.audioSetting}
onValueChange={props.updateAudioSetting}
>
<Picker.Item label="Allow" value="allow" />
<Picker.Item label="Approval Required" value="approval" />
<Picker.Item label="Disallow" value="disallow" />
</Picker>
{props.showAdvancedOptions && <AdvancedPermissionOptions />}
<Button title="Save Settings" onPress={handleSave} />
</View>
</Modal>
);
};
EventSettingsModal - Host controls for participant permissions
EventSettingsModal is a React Native component that provides host-level controls for managing participant permissions across audio, video, screenshare, and chat. Settings can be configured to allow, require approval, or disallow participant actions.
Key Features:
Permission Options:
UI Customization: This component can be replaced via
uiOverrides.eventSettingsModalto provide a completely custom event settings interface.