From 6de5be70061f3cfaa52a9cf9f97026d47dd24069 Mon Sep 17 00:00:00 2001 From: Gabriel Donadel Dall'Agnol Date: Tue, 27 Jun 2023 18:50:06 -0300 Subject: [PATCH] [home] Fix DevMenu onboarding height when loading a published update (#23148) # Why Brent noticed that when loading a published update in versioned Expo Go the Onboarding component is not fully visible and the user is not able to press "Continue" image # How This PR fixes this height calculation issue by conditionally rendering `DevMenuOnboarding` as position relative instead of just placing `DevMenuOnboarding` as a position absolute on top of everything. This also adds a padding bottom to the BottomSheet to respect the SafeAreaView insets of the device # Test Plan Run locally Expo Go versioned
Published updateLocal bundle
# Checklist - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --- home/menu/DevMenuApp.tsx | 17 +++--- home/menu/DevMenuOnboarding.tsx | 62 +++++++++----------- home/menu/DevMenuView.tsx | 101 +++++++++++++++++--------------- 3 files changed, 92 insertions(+), 88 deletions(-) diff --git a/home/menu/DevMenuApp.tsx b/home/menu/DevMenuApp.tsx index 3f40a44d2f10e8..a3c588826d3625 100644 --- a/home/menu/DevMenuApp.tsx +++ b/home/menu/DevMenuApp.tsx @@ -3,6 +3,7 @@ import { ThemePreference, ThemeProvider as DCCThemeProvider } from 'expo-dev-cli import React from 'react'; import { AppRegistry, useColorScheme } from 'react-native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; import { ColorTheme } from '../constants/Colors'; import Themes from '../constants/Themes'; @@ -53,13 +54,15 @@ function DevMenuApp(props: { return ( - - - - - - - + + + + + + + + + ); } diff --git a/home/menu/DevMenuOnboarding.tsx b/home/menu/DevMenuOnboarding.tsx index 4daf8b730f2a9b..222aa8a0dc0e0a 100644 --- a/home/menu/DevMenuOnboarding.tsx +++ b/home/menu/DevMenuOnboarding.tsx @@ -1,7 +1,8 @@ -import { View, Text, Button, Spacer } from 'expo-dev-client-components'; +import { View, Text, Button, Spacer, padding, scale } from 'expo-dev-client-components'; import { isDevice } from 'expo-device'; import React from 'react'; -import { Platform, StyleSheet } from 'react-native'; +import { Platform } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; type Props = { onClose: () => void; @@ -43,41 +44,34 @@ const simulatorMessage = Platform.select({ }); export function DevMenuOnboarding({ onClose }: Props) { + const { bottom } = useSafeAreaInsets(); + return ( - - - - - This is the developer menu. It gives you access to useful tools in Expo Go. - - - - {isDevice ? deviceMessage : simulatorMessage} - - + + + + This is the developer menu. It gives you access to useful tools in Expo Go. + + + + {isDevice ? deviceMessage : simulatorMessage} + + - + - - - - Continue - - - - + + + + Continue + + + ); } - -const styles = StyleSheet.create({ - onboardingContainer: { - flex: 1, - position: 'absolute', - top: 0, - right: 0, - bottom: 0, - left: 0, - zIndex: 2, - }, -}); diff --git a/home/menu/DevMenuView.tsx b/home/menu/DevMenuView.tsx index 2b2b0bd3fed0ba..3ba63023acb5de 100644 --- a/home/menu/DevMenuView.tsx +++ b/home/menu/DevMenuView.tsx @@ -4,6 +4,7 @@ import { Divider, Row, Spacer, useExpoTheme, View } from 'expo-dev-client-compon import * as Font from 'expo-font'; import React, { Fragment, useContext, useEffect, useRef } from 'react'; import { Clipboard } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { ClipboardIcon } from './ClipboardIcon'; import DevMenuBottomSheetContext from './DevMenuBottomSheetContext'; @@ -58,6 +59,7 @@ export function DevMenuView({ uuid, task }: Props) { const [isLoaded, setIsLoaded] = React.useState(false); const theme = useExpoTheme(); + const insets = useSafeAreaInsets(); const prevUUIDRef = useRef(uuid); @@ -162,56 +164,61 @@ export function DevMenuView({ uuid, task }: Props) { - {!isOnboardingFinished && } - - - - } - /> - - {task && task.manifestUrl && ( - <> + {!isOnboardingFinished ? ( + + ) : ( + + + + } + buttonKey="reload" + label="Reload" + onPress={onAppReload} + icon={} /> - - )} - } - /> - - {enableDevMenuTools && devMenuItems && ( - - - {sortedDevMenuItems.map((key, i) => { - const item = devMenuItems[key]; - - const { label, isEnabled } = item; - return ( - - - {i < sortedDevMenuItems.length - 1 && } - - ); - })} - + {task && task.manifestUrl && ( + <> + } + /> + + + )} + } + /> + + {enableDevMenuTools && devMenuItems && ( + + + {sortedDevMenuItems.map((key, i) => { + const item = devMenuItems[key]; + + const { label, isEnabled } = item; + return ( + + + {i < sortedDevMenuItems.length - 1 && } + + ); + })} + + + )} )}