sflite/components/icon-button....

import { Pressable, StyleSheet } from 'react-native';

import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { IconSymbol } from '@/components/ui/icon-symbol';

type Variant = 'default' | 'danger';

type Props = {
  name: React.ComponentProps<typeof IconSymbol>['name'];
  onPress: () => void;
  accessibilityLabel: string;
  testID?: string;
  variant?: Variant;
};

export function IconButton({
  name,
  onPress,
  accessibilityLabel,
  testID,
  variant = 'default',
}: Props) {
  const theme = useColorScheme() ?? 'light';
  const tint = Colors[theme].tint;
  const danger = theme === 'light' ? '#B42318' : '#F97066';
  const iconColor = variant === 'danger' ? danger : tint;

  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={accessibilityLabel}
      testID={testID}
      onPress={onPress}
      style={({ pressed }) => [
        styles.base,
        { opacity: pressed ? 0.7 : 1 },
      ]}>
      <IconSymbol size={20} name={name} color={iconColor} />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  base: {
    padding: 6,
    borderRadius: 999,
  },
});