Function ControlButtonsComponent

ControlButtonsComponent - Flexible control button bar for meeting actions

ControlButtonsComponent is a React Native component that renders a customizable row or column of control buttons (mute, video, screen share, etc.). Each button supports active/inactive states, custom icons, disabled states, and press feedback.

Key Features:

  • Horizontal or vertical button arrangement
  • Active/inactive state visual feedback
  • Custom icon support (FontAwesome5 or custom components)
  • Pressed state animations
  • Disabled button handling
  • Flexible alignment options
  • Show/hide individual buttons

UI Customization: This component can be replaced via uiOverrides.controlButtonsComponent to provide a completely custom control button bar.

Component

Example

// Basic usage - Horizontal button bar
import React from 'react';
import { ControlButtonsComponent, Button } from 'mediasfu-reactnative-expo';

function MeetingControls() {
  const [isMuted, setIsMuted] = React.useState(false);
  const [isVideoOff, setIsVideoOff] = React.useState(false);

  const buttons: Button[] = [
    {
      name: 'Mic',
      icon: 'microphone',
      alternateIcon: 'microphone-slash',
      active: isMuted,
      onPress: () => setIsMuted(!isMuted),
      activeColor: '#FF0000',
      inActiveColor: '#FFFFFF',
    },
    {
      name: 'Video',
      icon: 'video',
      alternateIcon: 'video-slash',
      active: isVideoOff,
      onPress: () => setIsVideoOff(!isVideoOff),
      activeColor: '#FF0000',
      inActiveColor: '#FFFFFF',
    },
    {
      name: 'Leave',
      icon: 'phone',
      onPress: () => console.log('Leave meeting'),
      backgroundColor: { default: '#FF0000', pressed: '#CC0000' },
      color: '#FFFFFF',
    },
  ];

  return (
    <ControlButtonsComponent
      buttons={buttons}
      alignment="center"
      buttonBackgroundColor={{ default: '#333333', pressed: '#555555' }}
      vertical={false}
    />
  );
}

Example

// Vertical button bar with custom styling
<ControlButtonsComponent
  buttons={controlButtons}
  alignment="flex-start"
  vertical={true}
  buttonsContainerStyle={{
    gap: 10,
    padding: 8,
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderRadius: 8,
  }}
/>

Example

// With custom icon components
const customButtons: Button[] = [
  {
    name: 'Custom',
    customComponent: <MyCustomButtonComponent />,
    onPress: () => console.log('Custom pressed'),
  },
  {
    name: 'Icon',
    iconComponent: <CustomIcon name="custom" />,
    alternateIconComponent: <CustomIcon name="custom-alt" />,
    active: isActive,
    onPress: toggleActive,
  },
];

<ControlButtonsComponent
  buttons={customButtons}
  alignment="space-evenly"
/>

Example

// Using uiOverrides for complete control bar replacement
import { MyCustomControlButtons } from './MyCustomControlButtons';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    controlButtonsComponent: {
      component: MyCustomControlButtons,
      injectedProps: {
        theme: 'modern',
        showLabels: true,
      },
    },
  },
};

// MyCustomControlButtons.tsx
export const MyCustomControlButtons = (props: ControlButtonsComponentOptions & { theme: string; showLabels: boolean }) => {
  return (
    <View style={{ flexDirection: props.vertical ? 'column' : 'row', gap: 12 }}>
      {props.buttons.filter(btn => btn.show !== false).map((button, index) => (
        <Pressable
          key={index}
          onPress={button.onPress}
          disabled={button.disabled}
          style={{
            padding: 12,
            borderRadius: props.theme === 'modern' ? 24 : 8,
            backgroundColor: button.active ? '#007bff' : '#e0e0e0',
          }}
        >
          {button.customComponent || (
            <FontAwesome5
              name={button.active ? button.alternateIcon : button.icon}
              size={20}
              color={button.active ? button.activeColor : button.inActiveColor}
            />
          )}
          {props.showLabels && <Text>{button.name}</Text>}
        </Pressable>
      ))}
    </View>
  );
};

Properties

propTypes? contextTypes? defaultProps? displayName?

Properties

OptionalpropTypes

propTypes?: WeakValidationMap<ControlButtonsComponentOptions>

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<ControlButtonsComponentOptions>

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