expo-dev-menu 0.10.3 → 0.10.6

package/CHANGELOG.md

@@ -10,6 +10,26 @@
 
 ### 💡 Others
 
+## 0.10.6 — 2022-05-06
+
+### 🐛 Bug fixes
+
+- Fix dev menu will reload the application when open for the first time while using Hermes. ([#17377](https://github.com/expo/expo/pull/17377) by [@lukmccall](https://github.com/lukmccall))
+
+## 0.10.5 — 2022-05-05
+
+### 🐛 Bug fixes
+
+- Fix `unresolved reference: loadFonts` in the release build on Android. ([#17241](https://github.com/expo/expo/pull/17241) by [@lukmccall](https://github.com/lukmccall))
+- Fix remote debugging crashing the application on iOS. ([#17248](https://github.com/expo/expo/pull/17248) by [@lukmccall](https://github.com/lukmccall))
+- Fix crashes when the app was launched from a deep link and the react-native-reanimated were installed on Android. ([#17282](https://github.com/expo/expo/pull/17282) by [@lukmccall](https://github.com/lukmccall))
+
+## 0.10.4 — 2022-04-26
+
+### 🐛 Bug fixes
+
+- Fix error on summoning dev-menu first time, that leads to the application freeze. ([#17215](https://github.com/expo/expo/pull/17215) by [@lukmccall](https://github.com/lukmccall))
+
 ## 0.10.3 — 2022-04-25
 
 _This version does not introduce any user-facing changes._

package/android/build.gradle

@@ -7,7 +7,7 @@ apply plugin: 'kotlin-android'
 apply plugin: 'maven-publish'
 
 group = 'host.exp.exponent'
-version = '0.10.3'
+version = '0.10.6'
 
 // reanimated v2
 def reactNativeFilePath = ["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()
@@ -207,7 +207,7 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 31)
     versionCode 10
-    versionName '0.10.3'
+    versionName '0.10.6'
   }
   lintOptions {
     abortOnError false

package/android/src/debug/java/expo/modules/devmenu/DevMenuManager.kt

@@ -174,12 +174,6 @@ object DevMenuManager : DevMenuManagerInterface, LifecycleEventListener {
       devMenuHost = DevMenuHost(application)
       UiThreadUtil.runOnUiThread {
         devMenuHost.reactInstanceManager.createReactContextInBackground()
-
-        // Hermes inspector will use latest executed script for Chrome DevTools Protocol.
-        // It will be EXDevMenuApp.android.js in our case.
-        // To let Hermes aware target bundle, we try to reload here as a workaround solution.
-        // @see <a href="https://github.com/facebook/react-native/blob/0.63-stable/ReactCommon/hermes/inspector/Inspector.cpp#L231>code here</a>
-        currentReactInstanceManager.get()?.devSupportManager?.handleReloadJS()
       }
     }
   }
@@ -224,19 +218,19 @@ object DevMenuManager : DevMenuManagerInterface, LifecycleEventListener {
     Log.i(DEV_MENU_TAG, "Delegate's context was loaded.")
 
     maybeInitDevMenuHost(reactContext.currentActivity?.application
-        ?: reactContext.applicationContext as Application)
+      ?: reactContext.applicationContext as Application)
     maybeStartDetectors(devMenuHost.getContext())
     preferences = (testInterceptor.overrideSettings()
-        ?: if (reactContext.hasNativeModule(DevMenuPreferences::class.java)) {
-          reactContext.getNativeModule(DevMenuPreferences::class.java)!!
-        } else {
-          DevMenuDefaultPreferences()
-        }).also {
-          shouldLaunchDevMenuOnStart = canLaunchDevMenuOnStart && (it.showsAtLaunch || !it.isOnboardingFinished)
-          if (shouldLaunchDevMenuOnStart) {
-            reactContext.addLifecycleEventListener(this)
-          }
-        }
+      ?: if (reactContext.hasNativeModule(DevMenuPreferences::class.java)) {
+        reactContext.getNativeModule(DevMenuPreferences::class.java)!!
+      } else {
+        DevMenuDefaultPreferences()
+      }).also {
+      shouldLaunchDevMenuOnStart = canLaunchDevMenuOnStart && (it.showsAtLaunch || !it.isOnboardingFinished)
+      if (shouldLaunchDevMenuOnStart) {
+        reactContext.addLifecycleEventListener(this)
+      }
+    }
   }
 
   fun getAppInfo(): Bundle {
@@ -260,6 +254,7 @@ object DevMenuManager : DevMenuManagerInterface, LifecycleEventListener {
     if (fontsWereLoaded) {
       return
     }
+    fontsWereLoaded = true
 
     val fonts = arrayOf(
       "Inter-Black",
@@ -279,8 +274,6 @@ object DevMenuManager : DevMenuManagerInterface, LifecycleEventListener {
       val font = Typeface.createFromAsset(assets, "$familyName.otf")
       ReactFontManager.getInstance().setTypeface(familyName, Typeface.NORMAL, font)
     }
-
-    fontsWereLoaded = true
   }
 
   //endregion

package/android/src/main/java/expo/modules/devmenu/modules/internals/DevMenuInternalFontManagerModule.kt

@@ -1,37 +1,14 @@
 package expo.modules.devmenu.modules.internals
 
-import android.graphics.Typeface
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.views.text.ReactFontManager
+import expo.modules.devmenu.DevMenuManager
 import expo.modules.devmenu.modules.DevMenuInternalFontManagerModuleInterface
 
-private var fontsWereLoaded = false
-
 class DevMenuInternalFontManagerModule(private val reactContext: ReactApplicationContext) :
   DevMenuInternalFontManagerModuleInterface {
   override fun loadFontsAsync(promise: Promise) {
-    if (fontsWereLoaded) {
-      promise.resolve(null)
-      return
-    }
-
-    val fonts = mapOf(
-      "Material Design Icons" to "MaterialCommunityIcons.ttf",
-      "Ionicons" to "Ionicons.ttf"
-    )
-
-    val assets = reactContext.applicationContext.assets
-    fonts.map { (familyName, fontFile) ->
-      val font = Typeface.createFromAsset(assets, fontFile)
-      if (font == null) {
-        promise.reject("ERR_DEVMENU_CANNOT_CREATE_FONT", "Couldn't create $familyName font.")
-        return
-      }
-      ReactFontManager.getInstance().setTypeface(familyName, Typeface.NORMAL, font)
-    }
-
-    fontsWereLoaded = true
+    DevMenuManager.loadFonts(reactContext)
     promise.resolve(null)
   }
 }

package/android/src/main/java/expo/modules/devmenu/modules/internals/DevMenuInternalMenuControllerModule.kt

@@ -3,14 +3,11 @@ package expo.modules.devmenu.modules.internals
 import android.content.ClipData
 import android.content.ClipboardManager
 import android.content.Context
-import android.content.pm.PackageManager
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.ReadableMap
-import com.facebook.react.devsupport.DevInternalSettings
 import expo.modules.devmenu.DevMenuManager
-import expo.modules.devmenu.devtools.DevMenuDevToolsDelegate
 import expo.modules.devmenu.modules.DevMenuInternalMenuControllerModuleInterface
 import kotlinx.coroutines.launch
 

package/android/src/release/java/expo/modules/devmenu/DevMenuManager.kt

@@ -7,6 +7,7 @@ import android.view.MotionEvent
 import com.facebook.react.ReactInstanceManager
 import com.facebook.react.ReactNativeHost
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReactApplicationContext
 import expo.interfaces.devmenu.DevMenuDelegateInterface
 import expo.interfaces.devmenu.DevMenuManagerInterface
 import expo.interfaces.devmenu.DevMenuPreferencesInterface
@@ -114,6 +115,10 @@ object DevMenuManager : DevMenuManagerInterface {
     throw IllegalStateException(DEV_MENU_IS_NOT_AVAILABLE)
   }
 
+  fun loadFonts(applicationContext: ReactApplicationContext) {
+    throw IllegalStateException(DEV_MENU_IS_NOT_AVAILABLE)
+  }
+
   override val coroutineScope: CoroutineScope
     get() = throw IllegalStateException(DEV_MENU_IS_NOT_AVAILABLE)
 }

package/app/App.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 
 import { AppProviders } from './components/AppProviders';
+import { LoadInitialData } from './components/LoadInitialData';
 import { Main } from './components/Main';
 import { Onboarding } from './components/Onboarding';
+import { Splash } from './components/Splash';
 import { AppInfo, DevSettings, MenuPreferences } from './native-modules/DevMenu';
 
 type DevMenuInitialProps = {
@@ -15,8 +17,10 @@ type DevMenuInitialProps = {
 export function App({ devSettings, appInfo, menuPreferences, isDevice }: DevMenuInitialProps) {
   return (
     <AppProviders appInfo={appInfo} devSettings={devSettings} menuPreferences={menuPreferences}>
-      <Main />
-      <Onboarding isDevice={isDevice} />
+      <LoadInitialData loader={<Splash />}>
+        <Main />
+        <Onboarding isDevice={isDevice} />
+      </LoadInitialData>
     </AppProviders>
   );
 }

package/app/components/LoadInitialData.tsx

@@ -0,0 +1,26 @@
+import { View } from 'expo-dev-client-components';
+import * as React from 'react';
+
+import { loadFontsAsync } from '../native-modules/DevMenu';
+import { Splash } from './Splash';
+
+type LoadInitialDataProps = {
+  children: React.ReactElement<any>[];
+  loader?: React.ReactElement<any>;
+};
+
+export function LoadInitialData({ children, loader = <Splash /> }: LoadInitialDataProps) {
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    loadFontsAsync().then(() => {
+      setIsLoading(false);
+    });
+  }, []);
+
+  if (isLoading) {
+    return loader;
+  }
+
+  return <View flex="1">{children}</View>;
+}

package/app/components/Main.tsx

@@ -64,9 +64,10 @@ export function Main() {
 
   return (
     <View flex="1" bg="secondary">
-      <View padding="medium" bg="default">
+      <View py="medium" bg="default">
         <Row align="start">
-          <Row align="center">
+          <Spacer.Horizontal size="medium" />
+          <Row align="center" shrink="1">
             <View>
               <View height="xl" width="xl" overflow="hidden" bg="secondary" rounded="medium">
                 {Boolean(appInfo.appIcon) && (
@@ -80,8 +81,13 @@ export function Main() {
 
             <Spacer.Horizontal size="small" />
 
-            <View>
-              <Heading weight="bold">{appInfo.appName}</Heading>
+            <View shrink="1">
+              <Row style={{ flexWrap: 'wrap' }}>
+                <Heading weight="bold" numberOfLines={1}>
+                  {appInfo.appName}
+                </Heading>
+              </Row>
+
               {Boolean(appInfo.runtimeVersion) && (
                 <>
                   <Text size="small" color="secondary">
@@ -98,20 +104,25 @@ export function Main() {
                 </>
               )}
             </View>
-          </Row>
 
-          <Spacer.Horizontal />
-          <GestureHandlerTouchableWrapper onPress={bottomSheet.collapse}>
-            <Button.ScaleOnPressContainer
-              onPress={bottomSheet.collapse}
-              bg="ghost"
-              rounded="full"
-              minScale={0.8}>
-              <View padding="micro">
-                <XIcon />
-              </View>
-            </Button.ScaleOnPressContainer>
-          </GestureHandlerTouchableWrapper>
+            <Spacer.Horizontal />
+
+            <View width="large" style={{ alignSelf: 'flex-start' }}>
+              <GestureHandlerTouchableWrapper onPress={bottomSheet.collapse}>
+                <Button.ScaleOnPressContainer
+                  onPress={bottomSheet.collapse}
+                  bg="ghost"
+                  rounded="full"
+                  minScale={0.8}>
+                  <View padding="micro">
+                    <XIcon />
+                  </View>
+                </Button.ScaleOnPressContainer>
+              </GestureHandlerTouchableWrapper>
+            </View>
+
+            <Spacer.Horizontal size="small" />
+          </Row>
         </Row>
       </View>
 
@@ -237,6 +248,7 @@ export function Main() {
             bg="default"
             roundedTop="none"
             roundedBottom="large"
+            onPress={onCopyAppInfoPress}
             disabled={hasCopiedAppInfoContent}>
             <Row px="medium" py="small" align="center" bg="default">
               <Text color="link" size="medium">

package/app/components/Splash.tsx

@@ -0,0 +1,12 @@
+import { View, ExpoLogoIcon } from 'expo-dev-client-components';
+import * as React from 'react';
+
+const iconWidth = 85;
+
+export function Splash() {
+  return (
+    <View flex="1" style={{ justifyContent: 'center', alignItems: 'center' }} bg="default">
+      <ExpoLogoIcon style={{ width: iconWidth, resizeMode: 'contain' }} resizeMode="contain" />
+    </View>
+  );
+}

package/app/index.ts

@@ -1,7 +1,7 @@
 import { AppRegistry } from 'react-native';
 import { enableScreens } from 'react-native-screens';
 
-import { App } from './App'
+import { App } from './App';
 
 enableScreens(false);
 

package/app/native-modules/DevMenu.ts

@@ -76,3 +76,7 @@ export async function copyToClipboardAsync(content: string) {
 export async function setOnboardingFinishedAsync(isFinished: boolean) {
   return await DevMenu.setOnboardingFinished(isFinished);
 }
+
+export async function loadFontsAsync() {
+  return await DevMenu.loadFontsAsync();
+}