[iOS, V2][Crash] RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO
dylancom opened this issue · comments
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