expo / router

[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps

Home Page:https://docs.expo.dev/routing/introduction/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[iOS, V2][Crash] RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO

dylancom opened this issue · comments

commented

Which package manager are you using? (Yarn is recommended)

yarn

Summary

Dismissing a modal in the Expo Router v2 example has a delayed status bar style update.
This has been reported in the past in "react-native-screens": software-mansion/react-native-screens#1305 and the advice has been to add the following to your app.json(ios key):

"infoPlist": {
  "UIViewControllerBasedStatusBarAppearance": true
},

This currently causes the app to crash with the error: RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO.
This exact same error has been reported before in Expo and had been fixed: expo/expo#20104.

But when using expo-router this error remains as ExpoRoot.tsx forces the use of "expo-status-bar".
I'm currently using the following patch (disabling expo-status-bar) as a quick hack to resolve the crash and have a smooth status bar transition (upon closing the modal):

diff --git a/node_modules/expo-router/src/ExpoRoot.tsx b/node_modules/expo-router/src/ExpoRoot.tsx
index 263a3a1..e1eabab 100644
--- a/node_modules/expo-router/src/ExpoRoot.tsx
+++ b/node_modules/expo-router/src/ExpoRoot.tsx
@@ -1,4 +1,4 @@
-import { StatusBar } from "expo-status-bar";
+// import { StatusBar } from "expo-status-bar";
 import React, { FunctionComponent, ReactNode, Fragment } from "react";
 import { Platform } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -64,7 +64,7 @@ export function ExpoRoot({
             {children}
 
             {/* Users can override this by adding another StatusBar element anywhere higher in the component tree. */}
-            <StatusBar style="auto" />
+            {/* <StatusBar style="auto" /> */}
           </SafeAreaProvider>
         </GestureHandlerRootView>
       </ParentWrapper>

Should this package force the use of expo-status-bar, which leads to delayed status bar transitions upon swipe closing a native modal?

Minimal reproducible example

npx create-expo-app@latest --template tabs@49

Demo video (smooth status bar transition upon opening, delayed upon closing):
https://user-images.githubusercontent.com/47904203/152635313-b044f2fa-fcee-41c3-98b4-612d879e407d.mp4