Function ControlButtonsComponentTouch

ControlButtonsComponentTouch - Touch-optimized positioned overlay buttons

ControlButtonsComponentTouch is a React Native component specifically optimized for touch interfaces. It renders control buttons in an absolute positioned overlay with enhanced touch targets and press feedback for mobile/tablet devices.

Key Features:

• Touch-optimized button sizing and spacing
• Absolute positioning with 9 screen positions
• Horizontal or vertical button arrangement
• Active/inactive state visual feedback
• Disabled button support
• Enhanced press feedback for mobile
• Show/hide visibility control
• TypeScript-validated icon names

UI Customization: This component can be replaced via uiOverrides.controlButtonsComponentTouch to provide a completely custom touch-optimized control overlay.

// Basic usage - Touch-optimized video controls
import React from 'react';
import { ControlButtonsComponentTouch, ButtonTouch } from 'mediasfu-reactnative-expo';

function TouchVideoControls() {
  const [isPlaying, setIsPlaying] = React.useState(false);
  const [isMuted, setIsMuted] = React.useState(false);

  const touchButtons: ButtonTouch[] = [
    {
      name: 'PlayPause',
      icon: 'play',
      alternateIcon: 'pause',
      active: isPlaying,
      onPress: () => setIsPlaying(!isPlaying),
      activeColor: '#007bff',
      inActiveColor: '#FFFFFF',
      show: true,
    },
    {
      name: 'Mute',
      icon: 'volume-up',
      alternateIcon: 'volume-mute',
      active: isMuted,
      onPress: () => setIsMuted(!isMuted),
      activeColor: '#FF0000',
      inActiveColor: '#FFFFFF',
      show: true,
    },
  ];

  return (
    <ControlButtonsComponentTouch
      buttons={touchButtons}
      position="middle"
      location="bottom"
      direction="horizontal"
      showAspect={true}
      buttonsContainerStyle={{
        backgroundColor: 'rgba(0,0,0,0.6)',
        padding: 12,
        borderRadius: 24,
        gap: 16,
      }}
    />
  );
}
Copy

// Side panel touch buttons
<ControlButtonsComponentTouch
  buttons={sideButtons}
  position="right"
  location="center"
  direction="vertical"
  showAspect={true}
  buttonsContainerStyle={{
    gap: 16,
    padding: 12,
    backgroundColor: 'rgba(0,0,0,0.7)',
  }}
/>
Copy

// With disabled and conditional buttons
const buttons: ButtonTouch[] = [
  {
    name: 'Record',
    icon: 'circle',
    onPress: startRecording,
    disabled: isRecording,
    color: '#FF0000',
    show: canRecord,
  },
  {
    name: 'Stop',
    icon: 'stop',
    onPress: stopRecording,
    disabled: !isRecording,
    color: '#FFFFFF',
    show: canRecord,
  },
];

<ControlButtonsComponentTouch
  buttons={buttons}
  position="left"
  location="top"
  direction="horizontal"
  showAspect={true}
/>
Copy

// Using uiOverrides for complete touch overlay replacement
import { MyCustomTouchButtons } from './MyCustomTouchButtons';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    controlButtonsComponentTouch: {
      component: MyCustomTouchButtons,
      injectedProps: {
        hapticFeedback: true,
        minimumTouchSize: 48,
      },
    },
  },
};

// MyCustomTouchButtons.tsx
export const MyCustomTouchButtons = (props: ControlButtonsComponentTouchOptions & { hapticFeedback: boolean; minimumTouchSize: number }) => {
  const handlePress = (button: ButtonTouch) => {
    if (props.hapticFeedback && Platform.OS !== 'web') {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    }
    button.onPress?.();
  };

  return (
    <View style={{ flexDirection: props.direction === 'vertical' ? 'column' : 'row' }}>
      {props.buttons.filter(btn => btn.show !== false).map((button, index) => (
        <Pressable
          key={index}
          onPress={() => handlePress(button)}
          disabled={button.disabled}
          style={{
            minWidth: props.minimumTouchSize,
            minHeight: props.minimumTouchSize,
            justifyContent: 'center',
            alignItems: 'center',
            opacity: button.disabled ? 0.5 : 1,
          }}
        >
          <FontAwesome5
            name={button.active ? button.alternateIcon : button.icon}
            size={28}
            color={button.active ? button.activeColor : button.inActiveColor || button.color}
          />
        </Pressable>
      ))}
    </View>
  );
};
Copy