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