React-native-screens: statusBarStyle has no effect on iOS 12

[winterdouglas]

Description

I observed that when setting the statusBarStyle it has no effect at all on iOS 12. On newer versions of iOS that's working nicely, I checked on 13 and 14 too.

I'm attaching a repro with the same setup as I'm using on my project.
To setup the project I followed the react navigation instructions, and also https://github.com/software-mansion/react-native-screens/tree/master/native-stack#status-bar-managment to be able to configure the status bar.

Screenshots

Steps To Reproduce

1. On a device/simulator with iOS 12, open the app
2. Right away you'll notice that the status bar text is white on white
3. In App.js try changing the statusBarStyle from dark to light and vice-versa under screenOptions
4. It won't have any effect on iOS 12

Expected behavior

The configured style should be respected.

Snack or minimal code example

StatusBarRepro.zip

Package versions

    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.8.10",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1"

[WoLewicki]

UIStatusBarStyleDarkContent is available since iOS 13: https://developer.apple.com/documentation/uikit/uistatusbarstyle/uistatusbarstyledarkcontent?language=objc, so on phones with iOS < 13, it will resolve in UIStatusBarStyleLightContent: https://github.com/software-mansion/react-native-screens/blob/master/ios/RNSScreenStackHeaderConfig.m#L570, since it is the only available option for customization. You probably shouldn't want to change the statusBarStyle for phones with iOS < 13 unless you want it to have UIStatusBarStyleLightContent. Can I help you more with this?

[winterdouglas]

Thanks for the fast reply!
Got it. Hm but then for this case that I'm mentioning what would you suggest me to do? Cause this issue started to happen when I enabled the View controller-based status bar appearance to support the status bar style change.

[WoLewicki]

Is not passing any statusBarStyle for iOS < 13 enough? It should resolve to default option there.

Another option is to change this line: https://github.com/software-mansion/react-native-screens/blob/master/ios/RNSScreenStackHeaderConfig.m#L570 to

  if (statusBarStyle == RNSStatusBarStyleLight) {
    return UIStatusBarStyleLightContent;
  }
  return UIStatusBarStyleDefault;

and, in JS, check for iOS version, and if it is lower than 13, pass auto option for everywhere you want it to be default, and light for places where you explicitly want UIStatusBarStyleLightContent.

[winterdouglas]

I think I tried with auto and not setting that also, none of them worked. Just let me have another try here and I'm gonna mention to you if that worked.

[winterdouglas]

So, confirming what I said earlier, setting it to auto or not setting it has the same effect, the text is still white.
I did a double check also on my info.plist, and there the status bar is set as default. just to make sure.

[WoLewicki]

So could you check the second proposed solution?

[winterdouglas]

I think I can, but to be honest I need to ask you: can I change that locally as part of my small repro directly, or do I need to clone and build rnscreens, change it in the lib and then reference my changed version on my project?

[WoLewicki]

You can use patch-package to apply changes only to your repository. I think I will make a PR with this change, but it would need to be merged and then released before you could use it.

[winterdouglas]

I will give it a try then, thanks for letting me know, I haven't used that tool before :)
No problems on waiting for it to be merged and released too, at least knowing that there will be a fix is already good.

I will take my time to check that and I'll let you know if that worked or not.

[winterdouglas]

Good news :) With your suggested code, setting the style to auto, dark or not setting it will present the status bar text in black, while setting it to light presents the text in white, which is the same behavior as when running against iOS >= 13 now.

If you can PR that I'll be more than happy and will be looking forward for the next release :D
Thank you for your help!

[WoLewicki]

I added #757 with this change :tada:.

[winterdouglas]

Thank you!

[winterdouglas]

BTW, should I've closed it already? Sorry, did it without asking by mistake.

[WoLewicki]

It would have been closed automatically when #757 is merged, so technically it would be better to leave this open for other users to comment and maybe find some mistakes. But don't worry, it is not a problem. I will reopen this.