Const// Basic usage - Display messages modal with group and direct messages
import React, { useState } from 'react';
import { MessagesModal } from 'mediasfu-reactnative-expo';
import { Socket } from 'socket.io-client';
function ChatControls() {
const [isVisible, setIsVisible] = useState(false);
const [messages, setMessages] = useState([
{ sender: 'Alice', message: 'Hello everyone!', timestamp: '10:01', group: true },
{ sender: 'Bob', message: 'Hey Alice!', timestamp: '10:02', receivers: ['Alice'], group: false },
]);
const [startDM, setStartDM] = useState(false);
const [dmDetails, setDmDetails] = useState(null);
return (
<>
<Button title="Messages" onPress={() => setIsVisible(true)} />
<MessagesModal
isMessagesModalVisible={isVisible}
onMessagesClose={() => setIsVisible(false)}
messages={messages}
eventType="conference"
member="john_doe"
islevel="1"
coHostResponsibility={[{ name: 'chat', value: true }]}
coHost="jane_doe"
startDirectMessage={startDM}
directMessageDetails={dmDetails}
updateStartDirectMessage={setStartDM}
updateDirectMessageDetails={setDmDetails}
roomName="MainRoom"
socket={socketInstance}
chatSetting="allow"
/>
</>
);
}
// With custom styling and positioning
<MessagesModal
isMessagesModalVisible={showMessages}
onMessagesClose={() => setShowMessages(false)}
messages={chatMessages}
position="bottomRight"
backgroundColor="#1a1a2e"
activeTabBackgroundColor="#0f3460"
onSendMessagePress={async (options) => {
console.log('Sending:', options.message);
await sendMessage(options);
setMessages([...messages, options.message]);
}}
eventType="webinar"
member="presenter_1"
islevel="2"
coHostResponsibility={[{ name: 'chat', value: true }]}
coHost="moderator_1"
startDirectMessage={false}
directMessageDetails={null}
updateStartDirectMessage={(start) => console.log('Start DM:', start)}
updateDirectMessageDetails={(participant) => console.log('DM to:', participant)}
roomName="WebinarRoom"
socket={socket}
chatSetting="allow"
/>
// Using uiOverrides for complete modal replacement
import { MyCustomMessagesModal } from './MyCustomMessagesModal';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
messagesModalComponent: {
component: MyCustomMessagesModal,
injectedProps: {
theme: 'minimal',
showEmojis: true,
},
},
},
};
// MyCustomMessagesModal.tsx
export const MyCustomMessagesModal = (props: MessagesModalOptions & { theme: string; showEmojis: boolean }) => {
return (
<Modal visible={props.isMessagesModalVisible} onRequestClose={props.onMessagesClose}>
<View style={{ backgroundColor: props.theme === 'minimal' ? '#fff' : '#000' }}>
<Text>Chat Messages</Text>
<ScrollView>
{props.messages.map((msg, idx) => (
<View key={idx}>
<Text>{msg.sender}: {msg.message}</Text>
<Text>{msg.timestamp}</Text>
</View>
))}
</ScrollView>
{props.showEmojis && <Text>😀 😃 😄</Text>}
</View>
</Modal>
);
};
MessagesModal - Chat interface with tabbed group and direct messaging
MessagesModal is a comprehensive React Native modal for real-time chat communication. It provides a tabbed interface with separate views for group messages and direct messages, message composition with input field, and automatic scrolling to new messages.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.messagesModalComponentto provide a completely custom messages modal implementation.