1import { MaterialCommunityIcons } from '@expo/vector-icons'; 2import { useTheme } from '@react-navigation/native'; 3import * as React from 'react'; 4import { 5 Platform, 6 StyleSheet, 7 TouchableHighlight as TouchableHighlightRN, 8 View, 9} from 'react-native'; 10import { TouchableHighlight as TouchableHighlightGH } from 'react-native-gesture-handler'; 11 12type Props = { 13 style: any; 14 onPress: () => void; 15}; 16 17// When rendered inside bottom sheet, touchables from RN don't work on Android, but the ones from GH don't work on iOS. 18const TouchableHighlight = Platform.OS === 'android' ? TouchableHighlightGH : TouchableHighlightRN; 19 20const HIT_SLOP = { top: 15, bottom: 15, left: 15, right: 15 }; 21 22function DevMenuCloseButton(props: Props) { 23 const onPress = () => { 24 if (props.onPress) { 25 props.onPress(); 26 } 27 }; 28 29 const theme = useTheme(); 30 31 return ( 32 <View style={props.style}> 33 <TouchableHighlight 34 style={styles.closeButton} 35 onPress={onPress} 36 underlayColor={theme.dark ? '#333' : '#eee'} 37 hitSlop={HIT_SLOP}> 38 <MaterialCommunityIcons 39 name="close" 40 size={20} 41 color="#2F9BE4" 42 style={styles.closeButtonIcon} 43 /> 44 </TouchableHighlight> 45 </View> 46 ); 47} 48 49const styles = StyleSheet.create({ 50 closeButton: { 51 paddingVertical: 6, 52 paddingHorizontal: 6, 53 borderRadius: 2, 54 }, 55 closeButtonIcon: { 56 width: 20, 57 height: 20, 58 }, 59}); 60 61export default DevMenuCloseButton; 62