1import React from 'react'; 2import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 3import {ColorKey, iconSizeConst, colorMap} from '@/constants/uiConst'; 4import {IconProps} from 'react-native-vector-icons/Icon'; 5import {TapGestureHandler} from 'react-native-gesture-handler'; 6import {StyleSheet} from 'react-native'; 7import useColors from '@/hooks/useColors'; 8 9interface IIconButtonProps extends IconProps { 10 name: string; 11 style?: IconProps['style']; 12 sizeType?: keyof typeof iconSizeConst; 13 fontColor?: ColorKey; 14 color?: string; 15 onPress?: () => void; 16 accessibilityLabel?: string; 17} 18export function IconButtonWithGesture(props: IIconButtonProps) { 19 const { 20 name, 21 sizeType: size = 'normal', 22 fontColor = 'normal', 23 onPress, 24 style, 25 accessibilityLabel, 26 } = props; 27 const colors = useColors(); 28 const textSize = iconSizeConst[size]; 29 const color = colors[colorMap[fontColor]]; 30 return ( 31 <TapGestureHandler onActivated={onPress}> 32 <Icon 33 accessible 34 accessibilityLabel={accessibilityLabel} 35 name={name} 36 color={color} 37 style={[{minWidth: textSize}, styles.textCenter, style]} 38 size={textSize} 39 /> 40 </TapGestureHandler> 41 ); 42} 43 44export default function IconButton(props: IIconButtonProps) { 45 const {sizeType = 'normal', fontColor = 'normal', style, color} = props; 46 const colors = useColors(); 47 const size = iconSizeConst[sizeType]; 48 49 return ( 50 <Icon 51 {...props} 52 color={color ?? colors[colorMap[fontColor]]} 53 style={[{minWidth: size}, styles.textCenter, style]} 54 size={size} 55 /> 56 ); 57} 58 59const styles = StyleSheet.create({ 60 textCenter: { 61 height: '100%', 62 textAlignVertical: 'center', 63 }, 64}); 65