Function MenuModal

MenuModal - Meeting menu with room info, custom actions, and share options

MenuModal is a comprehensive React Native modal component that displays meeting information (room name, passcode), custom action buttons, and sharing capabilities. It's typically accessed from a menu/hamburger button in the main UI.

Key Features:

  • Meeting ID and passcode display (for authorized users)
  • Custom action buttons with icons and handlers
  • Built-in share buttons for inviting participants
  • Flexible positioning (4 screen corners)
  • Scrollable content for long lists
  • Responsive design for different screen sizes

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

Component

Example

// Basic usage - Display menu modal with default settings
import React, { useState } from 'react';
import { MenuModal } from 'mediasfu-reactnative-expo';

function MeetingControls() {
  const [menuVisible, setMenuVisible] = useState(false);
  
  return (
    <>
      <Button title="Menu" onPress={() => setMenuVisible(true)} />
      <MenuModal
        isVisible={menuVisible}
        onClose={() => setMenuVisible(false)}
        backgroundColor="#83c0e9"
        position="bottomRight"
        roomName="MeetingRoom123"
        adminPasscode="456789"
        islevel="2"
        eventType="conference"
        shareButtons={true}
      />
    </>
  );
}

Example

// With custom action buttons
<MenuModal
  isVisible={showMenu}
  onClose={() => setShowMenu(false)}
  backgroundColor="#1a1a2e"
  position="topRight"
  roomName="TeamStandup"
  adminPasscode="secret123"
  islevel="1"
  eventType="webinar"
  customButtons={[
    {
      action: () => console.log('Settings clicked'),
      show: true,
      backgroundColor: '#4CAF50',
      icon: 'cog',
      text: 'Settings',
    },
    {
      action: () => console.log('Help clicked'),
      show: true,
      backgroundColor: '#2196F3',
      icon: 'question-circle',
      text: 'Help',
    },
  ]}
  shareButtons={true}
  localLink="https://meet.example.com/room123"
/>

Example

// Using uiOverrides for complete modal replacement
import { MyCustomMenuModal } from './MyCustomMenuModal';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    menuModalComponent: {
      component: MyCustomMenuModal,
      injectedProps: {
        theme: 'dark',
        compactMode: true,
      },
    },
  },
};

// MyCustomMenuModal.tsx
export const MyCustomMenuModal = (props: MenuModalOptions & { theme: string; compactMode: boolean }) => {
  return (
    <Modal visible={props.isVisible} onRequestClose={props.onClose}>
      <View style={{ backgroundColor: props.theme === 'dark' ? '#000' : '#fff' }}>
        <Text>Room: {props.roomName}</Text>
        <Text>Passcode: {props.adminPasscode}</Text>
        <Button title="Close" onPress={props.onClose} />
      </View>
    </Modal>
  );
};

Properties

propTypes? contextTypes? defaultProps? displayName?

Properties

OptionalpropTypes

propTypes?: WeakValidationMap<MenuModalOptions>

Used to declare the types of the props accepted by the component. These types will be checked during rendering and in development only.

We recommend using TypeScript instead of checking prop types at runtime.

See

React Docs

OptionalcontextTypes

contextTypes?: ValidationMap<any>

Deprecated

Lets you specify which legacy context is consumed by this component.

See

Legacy React Docs

OptionaldefaultProps

defaultProps?: Partial<MenuModalOptions>

Used to define default values for the props accepted by the component.

See

React Docs

Example

type Props = { name?: string }

const MyComponent: FC<Props> = (props) => {
  return <div>{props.name}</div>
}

MyComponent.defaultProps = {
  name: 'John Doe'
}

Deprecated

Use values for destructuring assignments instead.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

Example


const MyComponent: FC = () => {
  return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'

Settings

Member Visibility

On This Page

Properties