Function MessagesModal

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:

• Tabbed interface (Group Chat / Direct Messages)
• Real-time message display with timestamps
• Message composition with send button
• Auto-scroll to latest messages
• Direct message targeting to specific participants
• Permission-based chat visibility controls
• Responsive design with flexible positioning
• Message history with sender identification

UI Customization: This component can be replaced via uiOverrides.messagesModalComponent to provide a completely custom messages modal implementation.

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

// 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"
/>
Copy

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