MediaSFU React Native
    Preparing search index...

    Variable ControlButtonsComponentConst

    ControlButtonsComponent: React.FC<ControlButtonsComponentOptions> = ...

    Renders a customizable toolbar of meeting controls (mute, camera, share, etc.) with flexible layout, shared icon overrides, and render hooks for advanced integrations.

    • Align buttons using common flex alignments while preserving horizontal layout.
    • Provide per-button or shared icon overrides, including React elements for animated states.
    • Wrap the default content or container via renderContent and renderContainer hooks.
    • Each Pressable exposes an accessibility label derived from the button name or icon name.
    • Disabled buttons lower opacity but remain rendered to avoid focus jumps.
    <ControlButtonsComponent
      buttons={[
        { name: 'Mute', icon: 'microphone', alternateIcon: 'microphone-slash', active: isMuted, onPress: toggleMute },
        { name: 'Video', icon: 'video', onPress: toggleVideo },
      ]}
      buttonColor="#f1f5f9"
      alignment="space-between"
      renderContent={({ defaultContent }) => <View testID="controls-wrapper">{defaultContent}</View>}
    />

    Settings

    Member Visibility

    On This Page

    Key FeaturesAccessibility