Const// 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}
/>
);
}
// 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,
}}
/>
// 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"
/>
// 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>
);
};
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:
UI Customization: This component can be replaced via
uiOverrides.controlButtonsComponentto provide a completely custom control button bar.