iOS Status Bar Error

[AlirezaHadjar]

Description

When I upgraded my personal project to use the new Screen Transition API, I noticed an error when booting the app.

Steps to reproduce

1. Initialized a repo using npx react-native@latest init RNSSwipeAnimationBug
2. Installed these dependencies

    "@react-navigation/native": "^6.1.17",
    "react-native-gesture-handler": "^2.15.0",
    "react-native-reanimated": "^3.9.0-nightly-20240325-9e79766a4",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.30.1"

3. Ran yarn ios
4. Copied the SwipeBackAnimation.tsx from the Examples folder and pasted it in my repo
5. Faced the error!

Snack or a link to a repository

https://github.com/AlirezaHadjar/RNSSwipeAnimationBug

Screens version

3.30.1

React Native version

0.73.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 15 Pro

Acknowledgements

Yes

[AlirezaHadjar]

Side note:
Setting UIViewControllerBasedStatusBarAppearance to true fixes the issue. But I'm not sure this is the correct way of fixing this since some libraries such as react-native-bars require setting UIViewControllerBasedStatusBarAppearance to false

[tboba]

Hi, @AlirezaHadjar, thanks for submitting the issue! Yeah, this is definitely not correct to require configuring this prop while using Screen Transition API 😅 We'll look onto that, thanks!

[friedolinfoerder]

Hi, @AlirezaHadjar and @tboba, I see the issue for version 2.21.0 upwards. With version 2.20.0 the issue doesn't show up.

React Native version	0.71.14
Platforms	iOS
JavaScript runtime	Hermes
Workflow	React Native (without Expo)
Architecture	Paper (Old Architecture)
Build type	Debug mode
Device	iOS simulator
Device model	iPhone 14

[tboba]

I've investigated this PR quite a bit and I see that this error is caused by this line - https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/views/NativeStackView.tsx#L310
Since we want to also rely on theme from React Navigation, we're depending on the value returned from ThemeContext. This is wrong approach, since on native side we're checking if this value has been set - if so, we're throwing an error if UIViewControllerBasedStatusBarAppearance is set to <false />. We've got some idea how can we fix that error, but the solution is not ready yet.

[Bayramito]

any progress on this one ? I just got the issue once i imported the createNativeStackNavigator from react-native-screens

[tboba]

Hi @Bayramito, currently the PR with the fix is open, however since it's a breaking change, we're waiting for merging it. For now, if you're not using any lacking API from native-stack v5, I'd recommend to migrate to native-stack v6! See Migrating from 5.x for more details.