[iOS][expo-router] RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO

[dylancom]

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

Summary

Dismissing a modal in the new example using "expo-router" 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: #20104.

But since the new "expo-router" this is re-introduced again 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>

Environment

System:
  OS: macOS 13.4
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 18.16.1 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 9.5.1 - /usr/local/bin/npm
  Watchman: 2023.02.13.00 - /usr/local/bin/watchman
Managers:
  CocoaPods: 1.12.1 - /Users/dylancompanjen/.rvm/gems/ruby-2.7.4/bin/pod
SDKs:
  iOS SDK:
    Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9619390
  Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
npmPackages:
  expo: ~49.0.2 => 49.0.2 
  react: 18.2.0 => 18.2.0 
  react-dom: 18.2.0 => 18.2.0 
  react-native: 0.72.1 => 0.72.1 
  react-native-web: ~0.19.6 => 0.19.6 
npmGlobalPackages:
  expo-cli: 6.3.10
Expo Workflow: bare

[expo-bot]

Thank you for filing this issue!
This comment acknowledges we believe this may be a bug and there’s enough information to investigate it.
However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

[dylancom]

Closing this in favor of the issue reported in expo/router: expo/router#772

[a-eid]

I'm still facing this issue for some reason, I'm unable to tell where it's coming from exactly.

[marklawlor]

@a-eid If you create a new issue with a reproduction repo then we can help debug your issue.