Skip to content

Commit

Permalink
[home] Fix DevMenu onboarding height when loading a published update (e…
Browse files Browse the repository at this point in the history 
…xpo#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"

<img width="205" alt="image"
src="https://github.com/expo/expo/assets/11707729/4cceb546-5554-4ee1-adce-083934a51e19">

# 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


<table>
    <tr><th>Published update</th><th>Local bundle</th></tr>
    <tr>
    <td>
<video
src="https://github.com/expo/expo/assets/11707729/8d8acda6-876e-46be-94d7-2bed1ed58cd8"/>
   </td>
   <td>
<video
src="https://github.com/expo/expo/assets/11707729/d7638327-6be6-4fb4-8c7e-e6bd3596498a"
/>
    </td>
</tr> 
</table> 

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] 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).
  • Loading branch information
@gabrieldonadel
gabrieldonadel authored Jun 27, 2023
1 parent b876b73 commit 6de5be7
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 88 deletions.
17 changes: 10 additions & 7 deletions home/menu/DevMenuApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -53,13 +54,15 @@ function DevMenuApp(props: {

return (
<GestureHandlerRootView style={{ flex: 1 }}>
<DevMenuBottomSheet uuid={props.uuid}>
<DCCThemeProvider themePreference={theme as ThemePreference}>
<ThemeProvider value={Themes[theme]}>
<DevMenuView {...props} />
</ThemeProvider>
</DCCThemeProvider>
</DevMenuBottomSheet>
<SafeAreaProvider>
<DevMenuBottomSheet uuid={props.uuid}>
<DCCThemeProvider themePreference={theme as ThemePreference}>
<ThemeProvider value={Themes[theme]}>
<DevMenuView {...props} />
</ThemeProvider>
</DCCThemeProvider>
</DevMenuBottomSheet>
</SafeAreaProvider>
</GestureHandlerRootView>
);
}
Expand Down
62 changes: 28 additions & 34 deletions home/menu/DevMenuOnboarding.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -43,41 +44,34 @@ const simulatorMessage = Platform.select({
});

export function DevMenuOnboarding({ onClose }: Props) {
const { bottom } = useSafeAreaInsets();

return (
<View style={styles.onboardingContainer}>
<View flex="1" bg="default" py="medium" px="large">
<View>
<Text size="medium" maxFontSizeMultiplier={1.2}>
This is the developer menu. It gives you access to useful tools in Expo Go.
</Text>
<Spacer.Vertical size="medium" />
<Text size="medium" maxFontSizeMultiplier={1.2}>
{isDevice ? deviceMessage : simulatorMessage}
</Text>
</View>
<View
flex="1"
bg="default"
pt="medium"
px="large"
style={{ paddingBottom: bottom + scale.medium }}>
<View>
<Text size="medium" maxFontSizeMultiplier={1.2}>
This is the developer menu. It gives you access to useful tools in Expo Go.
</Text>
<Spacer.Vertical size="medium" />
<Text size="medium" maxFontSizeMultiplier={1.2}>
{isDevice ? deviceMessage : simulatorMessage}
</Text>
</View>

<Spacer.Vertical size="large" />
<Spacer.Vertical size="large" />

<Button.FadeOnPressContainer bg="primary" onPress={onClose}>
<View py="small">
<Button.Text align="center" size="medium" color="primary" weight="medium">
Continue
</Button.Text>
</View>
</Button.FadeOnPressContainer>
</View>
<Button.FadeOnPressContainer bg="primary" onPress={onClose}>
<View py="small">
<Button.Text align="center" size="medium" color="primary" weight="medium">
Continue
</Button.Text>
</View>
</Button.FadeOnPressContainer>
</View>
);
}

const styles = StyleSheet.create({
onboardingContainer: {
flex: 1,
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 2,
},
});
101 changes: 54 additions & 47 deletions home/menu/DevMenuView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -162,56 +164,61 @@ export function DevMenuView({ uuid, task }: Props) {
<DevMenuTaskInfo task={task} />
<Divider />
<View>
{!isOnboardingFinished && <DevMenuOnboarding onClose={onOnboardingFinished} />}
<DevMenuServerInfo task={task} />
<Divider />
<Row align="center" padding="medium">
<DevMenuButton
buttonKey="reload"
label="Reload"
onPress={onAppReload}
icon={<RefreshIcon size={iconSize.small} color={theme.icon.default} />}
/>
<Spacer.Horizontal size="medium" />
{task && task.manifestUrl && (
<>
{!isOnboardingFinished ? (
<DevMenuOnboarding onClose={onOnboardingFinished} />
) : (
<View style={{ paddingBottom: insets.bottom }}>
<DevMenuServerInfo task={task} />
<Divider />
<Row align="center" padding="medium">
<DevMenuButton
buttonKey="copy"
label="Copy Link"
onPress={onCopyTaskUrl}
icon={<ClipboardIcon size={iconSize.regular} color={theme.icon.default} />}
buttonKey="reload"
label="Reload"
onPress={onAppReload}
icon={<RefreshIcon size={iconSize.small} color={theme.icon.default} />}
/>
<Spacer.Horizontal size="medium" />
</>
)}
<DevMenuButton
buttonKey="home"
label="Go Home"
onPress={onGoToHome}
icon={<HomeFilledIcon size={iconSize.regular} color={theme.icon.default} />}
/>
</Row>
{enableDevMenuTools && devMenuItems && (
<View padding="medium" style={{ paddingTop: 0 }}>
<View bg="default" rounded="large">
{sortedDevMenuItems.map((key, i) => {
const item = devMenuItems[key];

const { label, isEnabled } = item;
return (
<Fragment key={key}>
<DevMenuItem
buttonKey={key}
label={label}
onPress={onPressDevMenuButton}
icon={MENU_ITEMS_ICON_MAPPINGS[key]}
isEnabled={isEnabled}
/>
{i < sortedDevMenuItems.length - 1 && <Divider />}
</Fragment>
);
})}
</View>
{task && task.manifestUrl && (
<>
<DevMenuButton
buttonKey="copy"
label="Copy Link"
onPress={onCopyTaskUrl}
icon={<ClipboardIcon size={iconSize.regular} color={theme.icon.default} />}
/>
<Spacer.Horizontal size="medium" />
</>
)}
<DevMenuButton
buttonKey="home"
label="Go Home"
onPress={onGoToHome}
icon={<HomeFilledIcon size={iconSize.regular} color={theme.icon.default} />}
/>
</Row>
{enableDevMenuTools && devMenuItems && (
<View padding="medium" style={{ paddingTop: 0 }}>
<View bg="default" rounded="large">
{sortedDevMenuItems.map((key, i) => {
const item = devMenuItems[key];

const { label, isEnabled } = item;
return (
<Fragment key={key}>
<DevMenuItem
buttonKey={key}
label={label}
onPress={onPressDevMenuButton}
icon={MENU_ITEMS_ICON_MAPPINGS[key]}
isEnabled={isEnabled}
/>
{i < sortedDevMenuItems.length - 1 && <Divider />}
</Fragment>
);
})}
</View>
</View>
)}
</View>
)}
</View>
Expand Down

0 comments on commit 6de5be7

Please sign in to comment.