expo-dev-menu 2.1.4 → 3.0.0

package/app/components/Main.tsx

@@ -20,14 +20,14 @@ import {
   scale,
 } from 'expo-dev-client-components';
 import * as React from 'react';
-import { Switch } from 'react-native-gesture-handler';
+import { Platform, ScrollView, Switch } from 'react-native';
+import semver from 'semver';
 
 import { useAppInfo } from '../hooks/useAppInfo';
-import { useBottomSheet } from '../hooks/useBottomSheet';
 import { useClipboard } from '../hooks/useClipboard';
 import { useDevSettings } from '../hooks/useDevSettings';
 import { isDevLauncherInstalled } from '../native-modules/DevLauncher';
-import { fireCallbackAsync } from '../native-modules/DevMenu';
+import { hideMenu, fireCallbackAsync } from '../native-modules/DevMenu';
 
 type MainProps = {
   registeredCallbacks?: string[];
@@ -35,7 +35,6 @@ type MainProps = {
 
 export function Main({ registeredCallbacks = [] }: MainProps) {
   const appInfo = useAppInfo();
-  const bottomSheet = useBottomSheet();
   const { devSettings, actions } = useDevSettings();
 
   const urlClipboard = useClipboard();
@@ -114,7 +113,7 @@ export function Main({ registeredCallbacks = [] }: MainProps) {
 
             <View width="large" style={{ alignSelf: 'flex-start' }}>
               <Button.ScaleOnPressContainer
-                onPress={bottomSheet.collapse}
+                onPress={hideMenu}
                 bg="ghost"
                 rounded="full"
                 minScale={0.8}>
@@ -130,224 +129,238 @@ export function Main({ registeredCallbacks = [] }: MainProps) {
       </View>
 
       <Divider />
+      <ScrollView nestedScrollEnabled>
+        {Boolean(appInfo.hostUrl) && (
+          <>
+            <View bg="default" padding="medium">
+              <Text color="secondary">Connected to:</Text>
 
-      {Boolean(appInfo.hostUrl) && (
-        <>
-          <View bg="default" padding="medium">
-            <Text color="secondary">Connected to:</Text>
+              <Spacer.Vertical size="small" />
 
-            <Spacer.Vertical size="small" />
+              <Row align="center">
+                <StatusIndicator style={{ width: 10, height: 10 }} status="success" />
+                <Spacer.Horizontal size="small" />
+                <View flex="1">
+                  <Text type="mono" numberOfLines={2} size="small">
+                    {appInfo.hostUrl}
+                  </Text>
+                </View>
+                <Spacer.Horizontal size="small" />
+              </Row>
+            </View>
 
-            <Row align="center">
-              <StatusIndicator style={{ width: 10, height: 10 }} status="success" />
-              <Spacer.Horizontal size="small" />
-              <View flex="1">
-                <Text type="mono" numberOfLines={2} size="small">
-                  {appInfo.hostUrl}
-                </Text>
-              </View>
-              <Spacer.Horizontal size="small" />
-            </Row>
-          </View>
+            <Divider />
+          </>
+        )}
 
-          <Divider />
-        </>
-      )}
+        <Row padding="small">
+          {isDevLauncherInstalled && (
+            <View flex="1">
+              <ActionButton
+                icon={<HomeFilledIcon />}
+                label="Go home"
+                onPress={actions.navigateToLauncher}
+              />
+            </View>
+          )}
+
+          <Spacer.Horizontal size="medium" />
 
-      <Row padding="small">
-        {isDevLauncherInstalled && (
           <View flex="1">
-            <ActionButton
-              icon={<HomeFilledIcon />}
-              label="Go home"
-              onPress={actions.navigateToLauncher}
-            />
+            <ActionButton icon={<ClipboardIcon />} label="Copy link" onPress={onCopyUrlPress} />
           </View>
-        )}
-
-        <Spacer.Horizontal size="medium" />
 
-        <View flex="1">
-          <ActionButton icon={<ClipboardIcon />} label="Copy link" onPress={onCopyUrlPress} />
-        </View>
+          <Spacer.Horizontal size="medium" />
 
-        <Spacer.Horizontal size="medium" />
+          <View flex="1">
+            <ActionButton icon={<RefreshIcon />} label="Reload" onPress={actions.reload} />
+          </View>
+        </Row>
 
-        <View flex="1">
-          <ActionButton icon={<RefreshIcon />} label="Reload" onPress={actions.reload} />
-        </View>
-      </Row>
+        {registeredCallbacks.length > 0 && (
+          <View>
+            <View mx="large">
+              <Heading size="small" color="secondary">
+                Custom Menu Items
+              </Heading>
+            </View>
 
-      {registeredCallbacks.length > 0 && (
-        <View>
-          <View mx="large">
-            <Heading size="small" color="secondary">
-              Custom Menu Items
-            </Heading>
-          </View>
+            <Spacer.Vertical size="small" />
 
-          <Spacer.Vertical size="small" />
-
-          <View mx="small">
-            {registeredCallbacks.map((name, index, arr) => {
-              const isFirst = index === 0;
-              const isLast = index === arr.length - 1;
-              const onPress = () => fireCallbackAsync(name);
-
-              return (
-                <View key={name + index}>
-                  <View
-                    bg="default"
-                    roundedTop={isFirst ? 'large' : 'none'}
-                    roundedBottom={isLast ? 'large' : 'none'}>
-                    <SettingsRowButton label={name} icon={null} onPress={onPress} />
+            <View mx="small">
+              {registeredCallbacks.map((name, index, arr) => {
+                const isFirst = index === 0;
+                const isLast = index === arr.length - 1;
+                const onPress = () => fireCallbackAsync(name);
+
+                return (
+                  <View key={name + index}>
+                    <View
+                      bg="default"
+                      roundedTop={isFirst ? 'large' : 'none'}
+                      roundedBottom={isLast ? 'large' : 'none'}>
+                      <SettingsRowButton label={name} icon={null} onPress={onPress} />
+                    </View>
+                    {!isLast && <Divider />}
                   </View>
-                  {!isLast && <Divider />}
-                </View>
-              );
-            })}
-          </View>
+                );
+              })}
+            </View>
 
-          <Spacer.Vertical size="medium" />
-        </View>
-      )}
+            <Spacer.Vertical size="medium" />
+          </View>
+        )}
 
-      <View mx="small">
-        <View roundedTop="large" bg="default">
-          <SettingsRowButton
-            disabled={!devSettings.isPerfMonitorAvailable}
-            label="Toggle performance monitor"
-            icon={<PerformanceIcon />}
-            onPress={actions.togglePerformanceMonitor}
-          />
-        </View>
-        <Divider />
-        <View bg="default">
-          <SettingsRowButton
-            disabled={!devSettings.isElementInspectorAvailable}
-            label="Toggle element inspector"
-            icon={<InspectElementIcon />}
-            onPress={actions.toggleElementInspector}
-          />
-        </View>
-        <Divider />
-        {devSettings.isJSInspectorAvailable ? (
-          <View bg="default">
+        <View mx="small">
+          <View roundedTop="large" bg="default">
             <SettingsRowButton
-              disabled={!devSettings.isJSInspectorAvailable}
-              label="Open JS debugger"
-              icon={<DebugIcon />}
-              onPress={actions.openJSInspector}
+              disabled={!devSettings.isPerfMonitorAvailable}
+              label="Toggle performance monitor"
+              icon={<PerformanceIcon />}
+              onPress={actions.togglePerformanceMonitor}
             />
           </View>
-        ) : (
+          <Divider />
           <View bg="default">
+            <SettingsRowButton
+              disabled={!devSettings.isElementInspectorAvailable}
+              label="Toggle element inspector"
+              icon={<InspectElementIcon />}
+              onPress={actions.toggleElementInspector}
+            />
+          </View>
+          <Divider />
+          {devSettings.isJSInspectorAvailable ? (
+            <View bg="default">
+              <SettingsRowButton
+                disabled={!devSettings.isJSInspectorAvailable}
+                label="Open JS debugger"
+                icon={<DebugIcon />}
+                onPress={actions.openJSInspector}
+              />
+            </View>
+          ) : (
+            <View bg="default">
+              <SettingsRowSwitch
+                disabled={
+                  appInfo?.sdkVersion && semver.lt(appInfo.sdkVersion, '49.0.0')
+                    ? !devSettings.isRemoteDebuggingAvailable
+                    : true
+                }
+                testID="remote-js-debugger"
+                label="Remote JS debugger"
+                icon={<DebugIcon />}
+                isEnabled={devSettings.isDebuggingRemotely}
+                setIsEnabled={actions.toggleDebugRemoteJS}
+                description={
+                  !appInfo?.sdkVersion || semver.lt(appInfo.sdkVersion, '49.0.0')
+                    ? `This is not compatible with ${
+                        appInfo?.engine ?? 'JSC'
+                      } in this SDK version, please use Hermes to debug.`
+                    : undefined
+                }
+              />
+            </View>
+          )}
+          <Divider />
+          <View bg="default" roundedBottom="large">
             <SettingsRowSwitch
-              disabled={!devSettings.isRemoteDebuggingAvailable}
-              testID="remote-js-debugger"
-              label="Remote JS debugger"
-              icon={<DebugIcon />}
-              isEnabled={devSettings.isDebuggingRemotely}
-              setIsEnabled={actions.toggleDebugRemoteJS}
+              disabled={!devSettings.isHotLoadingAvailable}
+              testID="fast-refresh"
+              label="Fast refresh"
+              icon={<RunIcon />}
+              isEnabled={devSettings.isHotLoadingEnabled}
+              setIsEnabled={actions.toggleFastRefresh}
             />
           </View>
-        )}
-        <Divider />
-        <View bg="default" roundedBottom="large">
-          <SettingsRowSwitch
-            disabled={!devSettings.isHotLoadingAvailable}
-            testID="fast-refresh"
-            label="Fast refresh"
-            icon={<RunIcon />}
-            isEnabled={devSettings.isHotLoadingEnabled}
-            setIsEnabled={actions.toggleFastRefresh}
-          />
         </View>
-      </View>
 
-      {appInfo.engine === 'Hermes' && (
-        <>
-          <Spacer.Vertical size="large" />
+        {appInfo.engine === 'Hermes' && (
+          <>
+            <Spacer.Vertical size="large" />
 
-          <View mx="small">
-            <View bg="warning" padding="medium" rounded="medium" border="warning">
-              <Row align="center">
-                <WarningIcon />
+            <View mx="small">
+              <View bg="warning" padding="medium" rounded="medium" border="warning">
+                <Row align="center">
+                  <WarningIcon />
 
-                <Spacer.Horizontal size="tiny" />
+                  <Spacer.Horizontal size="tiny" />
 
-                <Heading color="warning" size="small" style={{ top: 1 }}>
-                  Warning
-                </Heading>
-              </Row>
+                  <Heading color="warning" size="small" style={{ top: 1 }}>
+                    Warning
+                  </Heading>
+                </Row>
 
-              <Spacer.Vertical size="small" />
+                <Spacer.Vertical size="small" />
 
-              <View>
-                <Text size="small" color="warning">
-                  Debugging not working? Try manually reloading first
-                </Text>
+                <View>
+                  <Text size="small" color="warning">
+                    Debugging not working? Try manually reloading first
+                  </Text>
+                </View>
               </View>
             </View>
-          </View>
-        </>
-      )}
-
-      {!hasDisabledDevSettingOption && (
-        <>
-          <Spacer.Vertical size="large" />
-          <Text size="small" color="secondary" align="center">
-            Some settings are unavailable for this development build.
-          </Text>
-        </>
-      )}
-
-      <Spacer.Vertical size="large" />
-
-      <View mx="small" rounded="large" overflow="hidden">
-        <AppInfoRow title="Version" value={appInfo.appVersion} />
-        <Divider />
-        {Boolean(appInfo.runtimeVersion) && (
-          <>
-            <AppInfoRow title="Runtime version" value={appInfo.runtimeVersion} />
-            <Divider />
           </>
         )}
 
-        {Boolean(appInfo.sdkVersion) && !appInfo.runtimeVersion && (
+        {!hasDisabledDevSettingOption && (
           <>
-            <AppInfoRow title="SDK Version" value={appInfo.sdkVersion} />
-            <Divider />
+            <Spacer.Vertical size="large" />
+            <Text size="small" color="secondary" align="center">
+              Some settings are unavailable for this development build.
+            </Text>
           </>
         )}
 
-        <Button.ScaleOnPressContainer
-          bg="default"
-          roundedTop="none"
-          roundedBottom="large"
-          onPress={onCopyAppInfoPress}
-          disabled={hasCopiedAppInfoContent}>
-          <Row px="medium" py="small" align="center" bg="default">
-            <Text color="link" size="medium">
-              {hasCopiedAppInfoContent ? 'Copied to clipboard!' : 'Tap to Copy All'}
-            </Text>
-          </Row>
-        </Button.ScaleOnPressContainer>
-      </View>
+        <Spacer.Vertical size="large" />
 
-      <Spacer.Vertical size="large" />
-      <View mx="small" rounded="large" overflow="hidden">
-        <Button.ScaleOnPressContainer
-          bg="default"
-          roundedTop="none"
-          roundedBottom="large"
-          onPress={actions.openRNDevMenu}>
-          <Row px="medium" py="small" align="center" bg="default">
-            <Text>Open React Native dev menu</Text>
-          </Row>
-        </Button.ScaleOnPressContainer>
-      </View>
-      <Spacer.Vertical size="large" />
+        <View mx="small" rounded="large" overflow="hidden">
+          <AppInfoRow title="Version" value={appInfo.appVersion} />
+          <Divider />
+          {Boolean(appInfo.runtimeVersion) && (
+            <>
+              <AppInfoRow title="Runtime version" value={appInfo.runtimeVersion} />
+              <Divider />
+            </>
+          )}
+
+          {Boolean(appInfo.sdkVersion) && !appInfo.runtimeVersion && (
+            <>
+              <AppInfoRow title="SDK Version" value={appInfo.sdkVersion} />
+              <Divider />
+            </>
+          )}
+
+          <Button.ScaleOnPressContainer
+            bg="default"
+            roundedTop="none"
+            roundedBottom="large"
+            onPress={onCopyAppInfoPress}
+            disabled={hasCopiedAppInfoContent}>
+            <Row px="medium" py="small" align="center" bg="default">
+              <Text color="link" size="medium">
+                {hasCopiedAppInfoContent ? 'Copied to clipboard!' : 'Tap to Copy All'}
+              </Text>
+            </Row>
+          </Button.ScaleOnPressContainer>
+        </View>
+
+        <Spacer.Vertical size="large" />
+        <View mx="small" rounded="large" overflow="hidden">
+          <Button.ScaleOnPressContainer
+            bg="default"
+            roundedTop="none"
+            roundedBottom="large"
+            onPress={actions.openRNDevMenu}>
+            <Row px="medium" py="small" align="center" bg="default">
+              <Text>Open React Native dev menu</Text>
+            </Row>
+          </Button.ScaleOnPressContainer>
+        </View>
+
+        {Platform.OS === 'android' && <View style={{ height: 50 }} />}
+        <Spacer.Vertical size="large" />
+      </ScrollView>
     </View>
   );
 }

package/app/components/Onboarding.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 
 import { useMenuPreferences } from '../hooks/useMenuPreferences';
-import { GestureHandlerTouchableWrapper } from './GestureHandlerTouchableWrapper';
 
 const deviceMessage = Platform.select({
   ios: `Since this is your first time opening this development build, we wanted to show you this menu and let you know that you can shake your device or long press anywhere on the screen with three fingers to get back to it at any time.`,
@@ -51,15 +50,13 @@ export function Onboarding({ isDevice }: OnboardingProps) {
 
             <Spacer.Vertical size="xl" />
 
-            <GestureHandlerTouchableWrapper onPress={onOnboardingFinishedPress}>
-              <Button.ScaleOnPressContainer bg="primary" onPress={onOnboardingFinishedPress}>
-                <View py="small">
-                  <Button.Text align="center" size="large" color="primary" weight="medium">
-                    Got It
-                  </Button.Text>
-                </View>
-              </Button.ScaleOnPressContainer>
-            </GestureHandlerTouchableWrapper>
+            <Button.ScaleOnPressContainer bg="primary" onPress={onOnboardingFinishedPress}>
+              <View py="small">
+                <Button.Text align="center" size="large" color="primary" weight="medium">
+                  Got It
+                </Button.Text>
+              </View>
+            </Button.ScaleOnPressContainer>
           </View>
         </View>
       </View>

package/app/hooks/useDevSettings.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { DevLauncher } from '../native-modules/DevLauncher';
 import * as DevMenu from '../native-modules/DevMenu';
-import { useBottomSheet } from './useBottomSheet';
 
 // TODO - this would be better suited as an event emitter subscriber
 
@@ -30,7 +29,6 @@ export function DevSettingsProvider({ children, devSettings }: DevSettingsProvid
 }
 
 export function useDevSettings() {
-  const bottomSheet = useBottomSheet();
   const initialDevSettings = React.useContext(DevSettingsContext);
 
   const [devSettings, setDevSettings] = React.useState<DevMenu.DevSettings>(
@@ -58,44 +56,45 @@ export function useDevSettings() {
   const toggleElementInspector = React.useCallback(async () => {
     eagerToggleValue('isElementInspectorShown');
     await DevMenu.toggleElementInspectorAsync();
-    bottomSheet.collapse();
+    DevMenu.closeMenu();
   }, []);
 
   const toggleFastRefresh = React.useCallback(async () => {
     eagerToggleValue('isHotLoadingEnabled');
     await DevMenu.toggleFastRefreshAsync();
-    bottomSheet.collapse();
+    DevMenu.closeMenu();
   }, []);
 
   const toggleDebugRemoteJS = React.useCallback(async () => {
     eagerToggleValue('isDebuggingRemotely');
     await DevMenu.toggleDebugRemoteJSAsync();
-    bottomSheet.collapse();
+    DevMenu.closeMenu();
   }, []);
 
   const togglePerformanceMonitor = React.useCallback(async () => {
     eagerToggleValue('isPerfMonitorShown');
     await DevMenu.togglePerformanceMonitorAsync();
-    bottomSheet.collapse();
+    DevMenu.closeMenu();
   }, []);
 
   const navigateToLauncher = React.useCallback(async () => {
     await DevLauncher.navigateToLauncherAsync();
-    bottomSheet.collapse();
+    DevMenu.closeMenu();
   }, []);
 
   const reload = React.useCallback(async () => {
     await DevMenu.reloadAsync();
-    bottomSheet.collapse();
+    DevMenu.closeMenu();
   }, []);
 
   const openRNDevMenu = React.useCallback(async () => {
     await DevMenu.openDevMenuFromReactNative();
+    DevMenu.closeMenu();
   }, []);
 
   const openJSInspector = React.useCallback(async () => {
     await DevMenu.openJSInspector();
-    bottomSheet.collapse();
+    DevMenu.closeMenu();
   }, []);
 
   return {

package/app/native-modules/DevMenu.ts

@@ -1,4 +1,5 @@
-import { DeviceEventEmitter, NativeModules, EventSubscription } from 'react-native';
+import { requireNativeModule } from 'expo-modules-core';
+import { DeviceEventEmitter, NativeModules, EventSubscription, Platform } from 'react-native';
 
 export type JSEngine = 'Hermes' | 'JSC' | 'V8';
 
@@ -28,7 +29,10 @@ export type MenuPreferences = {
   isOnboardingFinished?: boolean;
 };
 
-const DevMenu = NativeModules.ExpoDevMenuInternal;
+const DevMenu =
+  Platform.OS === 'ios'
+    ? requireNativeModule('ExpoDevMenuInternal')
+    : NativeModules.ExpoDevMenuInternal;
 
 export async function dispatchCallableAsync(
   callableId: string,
@@ -41,6 +45,10 @@ export function hideMenu(): void {
   DevMenu.hideMenu();
 }
 
+export function closeMenu(): void {
+  DevMenu.closeMenu();
+}
+
 export function subscribeToCloseEvents(listener: () => void): EventSubscription {
   return DeviceEventEmitter.addListener('closeDevMenu', listener);
 }