expo-dev-menu 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -10,6 +10,17 @@
 
 ### 💡 Others
 
+## 4.2.0 — 2023-09-15
+
+### 🎉 New features
+
+- Add `control+d` as a hotkey to open the menu. ([#24434](https://github.com/expo/expo/pull/24434) by [@alanjhughes](https://github.com/alanjhughes))
+- Separate `refresh` button from the rest ([#24426](https://github.com/expo/expo/pull/24426) by [@kadikraman](https://github.com/kadikraman))
+
+### 🐛 Bug fixes
+
+- Fixed task ':expo-dev-menu:packageReleaseAssets' uses this output of task ':expo-dev-menu:copyAssets' without declaring an explicit or implicit dependency on Android. ([#24393](https://github.com/expo/expo/pull/24393) by [@lukmccall](https://github.com/lukmccall))
+
 ## 4.1.0 — 2023-09-04
 
 ### 🎉 New features
@@ -19,6 +30,7 @@
 ### 💡 Others
 
 - Migrate to Expo CLI. ([#23806](https://github.com/expo/expo/pull/23806) by [@EvanBacon](https://github.com/EvanBacon))
+- Use dedicated `requireOptionalNativeModule` instead of try-catching `requireNativeModule`. ([#24262](https://github.com/expo/expo/pull/24262) by [@tsapeta](https://github.com/tsapeta))
 
 ## 4.0.0 — 2023-08-02
 

package/README.md

@@ -10,7 +10,9 @@ You can find more information in the [Expo documentation](https://docs.expo.dev/
 
 The `expo-dev-menu` repository consists of two different parts, the exported package, which includes the native functions, located in the `android`, `ios` and `src` folders and the Dev Menu interface, located under the `app` folder.
 
-Local development is usually done through `bare-expo`.
+Local development is usually done through [`bare-expo`](/apps/bare-expo).
+
+First, make sure to `yarn` and `yarn start` in `expo-dev-menu` which will add the port for the dev menu packager to [`dev-menu-packager-host`](./assets/dev-menu-packager-host`). This is bundled into the native code in `bare-expo` so need to be done first.
 
 To use `dev-client` when running `bare-expo` on Android, open [MainApplication.java](/apps/bare-expo/android/app/src/main/java/dev/expo/payments/MainApplication.java) and set the `USE_DEV_CLIENT` value to `true`.
 
@@ -26,6 +28,8 @@ To use `dev-client` when running `bare-expo` on iOS, open [AppDelegate.mm](/apps
 + BOOL useDevClient = YES;
 ```
 
+Then build the native apps with `npx pod-install && yarn ios` or `yarn android`.
+
 ### Making JavaScript changes inside the `app` folder
 
 To update the JavaScript code inside the `app` folder, you need to run the `dev-menu` bundler locally.

package/android/build.gradle

@@ -3,7 +3,7 @@ apply plugin: 'kotlin-android'
 apply plugin: 'maven-publish'
 
 group = 'host.exp.exponent'
-version = '4.1.0'
+version = '4.2.0'
 
 buildscript {
   def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
@@ -70,7 +70,7 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 10
-    versionName '4.1.0'
+    versionName '4.2.0'
   }
   lintOptions {
     abortOnError false
@@ -112,11 +112,20 @@ android {
   }
 }
 
+task clenupAssets(type: Delete) {
+  // In the past, assets were placed in the `main` directory.
+  // However, this is no longer the case. To ensure a smooth transition,
+  // we’re also removing assets from the old location.
+  delete files("src/main/assets")
+}
+
 task copyAssets(type: Copy) {
+  dependsOn(clenupAssets)
+
   from('../assets') {
     exclude "*.ios.*"
   }
-  into 'src/main/assets'
+  into 'src/debug/assets'
 }
 
 project.afterEvaluate {

package/app/components/Main.tsx

@@ -23,12 +23,12 @@ import * as React from 'react';
 import { Platform, ScrollView, Switch } from 'react-native';
 import semver from 'semver';
 
+import { Onboarding } from './Onboarding';
 import { useAppInfo } from '../hooks/useAppInfo';
 import { useClipboard } from '../hooks/useClipboard';
 import { useDevSettings } from '../hooks/useDevSettings';
 import { isDevLauncherInstalled } from '../native-modules/DevLauncher';
 import { hideMenu, fireCallbackAsync } from '../native-modules/DevMenu';
-import { Onboarding } from './Onboarding';
 
 type MainProps = {
   registeredCallbacks?: string[];
@@ -135,47 +135,29 @@ export function Main({ registeredCallbacks = [], isDevice }: MainProps) {
                 <Text color="secondary">Connected to:</Text>
 
                 <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>
+                <Button.FadeOnPressContainer
+                  bg="default"
+                  onPress={onCopyUrlPress}
+                  testID="main.copyUrlButton">
+                  <Row align="center">
+                    <StatusIndicator style={{ width: 10, height: 10 }} status="success" />
+                    <Spacer.Horizontal size="small" />
+                    <Row flex="1" justify="between">
+                      <Text type="mono" numberOfLines={2} size="small">
+                        {appInfo.hostUrl}
+                      </Text>
+
+                      <ClipboardIcon />
+                    </Row>
+                    <Spacer.Horizontal size="small" />
+                  </Row>
+                </Button.FadeOnPressContainer>
               </View>
 
               <Divider />
             </>
           )}
 
-          <Row padding="small">
-            {isDevLauncherInstalled && (
-              <View flex="1">
-                <ActionButton
-                  icon={<HomeFilledIcon />}
-                  label="Go home"
-                  onPress={actions.navigateToLauncher}
-                />
-              </View>
-            )}
-
-            <Spacer.Horizontal size="medium" />
-
-            <View flex="1">
-              <ActionButton icon={<ClipboardIcon />} label="Copy link" onPress={onCopyUrlPress} />
-            </View>
-
-            <Spacer.Horizontal size="medium" />
-
-            <View flex="1">
-              <ActionButton icon={<RefreshIcon />} label="Reload" onPress={actions.reload} />
-            </View>
-          </Row>
-
           {registeredCallbacks.length > 0 && (
             <View>
               <View mx="large">
@@ -210,8 +192,28 @@ export function Main({ registeredCallbacks = [], isDevice }: MainProps) {
             </View>
           )}
 
+          <View margin="small">
+            <View
+              {...(isDevLauncherInstalled ? { roundedTop: 'large' } : { rounded: 'large' })}
+              bg="default">
+              <SettingsRowButton label="Reload" icon={<RefreshIcon />} onPress={actions.reload} />
+            </View>
+            {isDevLauncherInstalled && (
+              <>
+                <Divider />
+                <View roundedBottom="large" bg="default">
+                  <SettingsRowButton
+                    label="Go home"
+                    icon={<HomeFilledIcon />}
+                    onPress={actions.navigateToLauncher}
+                  />
+                </View>
+              </>
+            )}
+          </View>
+
           <View mx="small">
-            <View roundedTop="large" bg="default">
+            <View bg="default" roundedTop="large">
               <SettingsRowButton
                 disabled={!devSettings.isPerfMonitorAvailable}
                 label="Toggle performance monitor"
@@ -367,28 +369,6 @@ export function Main({ registeredCallbacks = [], isDevice }: MainProps) {
   );
 }
 
-type ActionButtonProps = {
-  icon: React.ReactElement<any>;
-  label: string;
-  onPress: () => void;
-};
-
-function ActionButton({ icon, label, onPress }: ActionButtonProps) {
-  return (
-    <Button.FadeOnPressContainer bg="default" onPress={onPress}>
-      <View padding="small" rounded="large" bg="default">
-        <View align="centered">{icon}</View>
-
-        <Spacer.Vertical size="tiny" />
-
-        <Text size="small" align="center">
-          {label}
-        </Text>
-      </View>
-    </Button.FadeOnPressContainer>
-  );
-}
-
 type SettingsRowButtonProps = {
   icon: React.ReactElement<any>;
   label: string;

package/app/components/Onboarding.tsx

@@ -12,7 +12,7 @@ const deviceMessage = Platform.select({
 const simulatorMessage = Platform.select({
   ios: (
     <Text size="medium">
-      You can open it at any time with the <Text weight="bold">{'\u2318 + d '}</Text> keyboard
+      You can open it at any time with the <Text weight="bold">{'\u2303 + d '}</Text> keyboard
       shortcut{' '}
       <Text color="secondary" size="medium">
         ("Connect Hardware Keyboard" must be enabled on your simulator to use this shortcut, you can