1import { iconSize, XIcon } from '@expo/styleguide-native'; 2import { useExpoTheme } from 'expo-dev-client-components'; 3import * as React from 'react'; 4import { Platform, TouchableHighlight as TouchableHighlightRN, View } from 'react-native'; 5import { TouchableHighlight as TouchableHighlightGH } from 'react-native-gesture-handler'; 6 7type Props = { 8 onPress: () => void; 9}; 10 11// When rendered inside bottom sheet, touchables from RN don't work on Android, but the ones from GH don't work on iOS. 12const TouchableHighlight = Platform.OS === 'android' ? TouchableHighlightGH : TouchableHighlightRN; 13 14const HIT_SLOP = { top: 15, bottom: 15, left: 15, right: 15 }; 15 16export function DevMenuCloseButton({ onPress }: Props) { 17 const theme = useExpoTheme(); 18 19 return ( 20 <View style={{ position: 'absolute', right: 16, top: 16, zIndex: 3 }}> 21 <TouchableHighlight 22 onPress={onPress} 23 underlayColor={theme.background.default} 24 hitSlop={HIT_SLOP}> 25 <XIcon size={iconSize.regular} color={theme.icon.default} /> 26 </TouchableHighlight> 27 </View> 28 ); 29} 30