MediaSFU React Native
    Preparing search index...

    Variable MessagesModalConst

    MessagesModal: React.FC<MessagesModalOptions> = ...

    MessagesModal centralizes broadcast and direct messaging in a responsive modal. It adapts to event context, offers tabs for chat segmentation, and coordinates direct-message flows with overrideable handlers and layouts.

    • Integrates with sendMessage by default but accepts custom handlers.
    • Supports direct messaging mode with participant-specific metadata.
    • Configurable positioning and theming for consistent branding.
    • Uses MessagePanel to render messages with built-in tab management.
    • Provides render overrides for both container and content.
    • Close button exposes descriptive labels for screen readers.
    • Tab changes propagate via accessible Pressables inside MessagePanel.

    Modal configuration options.

    Rendered messages modal.

    <MessagesModal
      isMessagesModalVisible={visible}
      onMessagesClose={hide}
      messages={messages}
      eventType="conference"
      member={userName}
      islevel="1"
      coHostResponsibility={responsibilities}
      coHost={coHostName}
      startDirectMessage={false}
      directMessageDetails={null}
      updateStartDirectMessage={setStartDm}
      updateDirectMessageDetails={setDmDetails}
      roomName={roomId}
      socket={socket}
      chatSetting="default"
    />

    <MessagesModal
      isMessagesModalVisible
      onMessagesClose={close}
      messages={messageHistory}
      onSendMessagePress={sendCustomMessage}
      eventType="webinar"
      member="host_01"
      islevel="2"
      backgroundColor="#101826"
      activeTabBackgroundColor="#3b82f6"
      style={{ borderRadius: 24 }}
      {...dmProps}
    />

    <MessagesModal
      {...props}
      renderContainer={({ defaultContainer }) => (
        <FadeIn>{defaultContainer}</FadeIn>
      )}
    />

    Settings

    Member Visibility

    On This Page

    Key FeaturesAccessibility