1import { Spacer, Text, View } from 'expo-dev-client-components'; 2import React from 'react'; 3import { Platform, TouchableOpacity as TouchableOpacityRN } from 'react-native'; 4import { TouchableOpacity as TouchableOpacityGH } from 'react-native-gesture-handler'; 5 6type Props = { 7 buttonKey: string; 8 label: string; 9 onPress: (key: string) => any; 10 icon?: React.ReactNode; 11 isEnabled?: boolean; 12 detail?: string; 13}; 14 15// When rendered inside bottom sheet, touchables from RN don't work on Android, but the ones from GH don't work on iOS. 16const TouchableOpacity = Platform.OS === 'android' ? TouchableOpacityGH : TouchableOpacityRN; 17 18export function DevMenuButton({ isEnabled = true, buttonKey, label, onPress, icon }: Props) { 19 function _onPress() { 20 if (onPress) { 21 onPress(buttonKey); 22 } 23 } 24 25 if (!isEnabled) return null; 26 27 return ( 28 <View flex="1" bg="default" rounded="large"> 29 <TouchableOpacity onPress={_onPress} disabled={!isEnabled}> 30 <View align="centered" padding="medium"> 31 {icon && isEnabled && ( 32 <> 33 {icon} 34 <Spacer.Vertical size="tiny" /> 35 </> 36 )} 37 <Text type="InterRegular" size="small" align="center" color="default"> 38 {label} 39 </Text> 40 </View> 41 </TouchableOpacity> 42 </View> 43 ); 44} 45