1import { View, Text, Button, Spacer, scale } from 'expo-dev-client-components'; 2import { isDevice } from 'expo-device'; 3import React from 'react'; 4import { Platform } from 'react-native'; 5import { useSafeAreaInsets } from 'react-native-safe-area-context'; 6 7type Props = { 8 onClose: () => void; 9}; 10 11const deviceMessage = Platform.select({ 12 ios: `You can shake your device or long press anywhere on the screen with three fingers to get back to it at any time.`, 13 android: `You can shake your device to get back to it at any time.`, 14}); 15 16const simulatorMessage = Platform.select({ 17 ios: ( 18 <Text size="medium"> 19 You can open it at any time with the <Text weight="bold">{'\u2318 + d '}</Text> keyboard 20 shortcut{' '} 21 <Text color="secondary" size="medium"> 22 ("Connect Hardware Keyboard" must be enabled on your simulator to use this shortcut, you can 23 toggle it with{' '} 24 <Text weight="bold" color="secondary" size="medium"> 25 {'\u2318 + shift + K'} 26 </Text> 27 ). 28 </Text> 29 </Text> 30 ), 31 android: ( 32 <Text size="medium"> 33 You can press{' '} 34 <Text size="medium" weight="bold"> 35 {'\u2318 + m'} 36 </Text>{' '} 37 on macOS or{' '} 38 <Text size="medium" weight="bold"> 39 Ctrl + m 40 </Text>{' '} 41 on other platforms to get back to it at any time. 42 </Text> 43 ), 44}); 45 46export function DevMenuOnboarding({ onClose }: Props) { 47 const { bottom } = useSafeAreaInsets(); 48 49 return ( 50 <View 51 flex="1" 52 bg="default" 53 pt="medium" 54 px="large" 55 style={{ paddingBottom: bottom + scale.medium }}> 56 <View> 57 <Text size="medium" maxFontSizeMultiplier={1.2}> 58 This is the developer menu. It gives you access to useful tools in Expo Go. 59 </Text> 60 <Spacer.Vertical size="medium" /> 61 <Text size="medium" maxFontSizeMultiplier={1.2}> 62 {isDevice ? deviceMessage : simulatorMessage} 63 </Text> 64 </View> 65 66 <Spacer.Vertical size="large" /> 67 68 <Button.FadeOnPressContainer bg="primary" onPress={onClose}> 69 <View py="small"> 70 <Button.Text align="center" size="medium" color="primary" weight="medium"> 71 Continue 72 </Button.Text> 73 </View> 74 </Button.FadeOnPressContainer> 75 </View> 76 ); 77} 78