React-native-navigation: [v3] iOS 13 wrong keyWindow.backgroundColor

Created on 31 Oct 2019  ·  11Comments  ·  Source: wix/react-native-navigation

Issue Description

When open modal with modalPresentationStyle is pageSheet or formSheet, the background should be black instead of white.

Steps to Reproduce / Code Snippets / Screenshots


| What should be | RNN v3 |
| ------------- | ------------- |
| Screen Shot 2019-10-31 at 15 42 12 | ezgif-1-5fbf0bcbb04c |


Environment

  • React Native Navigation version: 3.3.0
  • React Native version: 0.61.3
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): iPhone
iOS 13 iOS

Most helpful comment

in iOS, automatic changing of status bar color when opening modal is handled when setting View controller-based status bar appearance in Info.plist to YES.

This, however, disables the manual setting of StatusBar anywhere in the JS world and the only option is to manage it with Options of the screens.

I'm fine with that and I did it.

Which was

  1. In my AppDelegate.m I've added
self.window.backgroundColor = [UIColor blackColor];

// it's just before return YES; of didFinishLaunchingWithOptions

and also

<key>UIViewControllerBasedStatusBarAppearance</key>
    <true/>

It resulted in a beautiful status bar color animation when opening modals.


In the real world, it's probably not possible to enable UIViewControllerBasedStatusBarAppearance so such animation would have to be manually handled on the native or js side.

All 11 comments

It would work well if we would remove keyWindow.backgroundColor = white. But there is also an issue that we need to change the status bar color to white when the modal is shown? Should this be managed by the app or this can be automated?

in iOS, automatic changing of status bar color when opening modal is handled when setting View controller-based status bar appearance in Info.plist to YES.

This, however, disables the manual setting of StatusBar anywhere in the JS world and the only option is to manage it with Options of the screens.

I'm fine with that and I did it.

Which was

  1. In my AppDelegate.m I've added
self.window.backgroundColor = [UIColor blackColor];

// it's just before return YES; of didFinishLaunchingWithOptions

and also

<key>UIViewControllerBasedStatusBarAppearance</key>
    <true/>

It resulted in a beautiful status bar color animation when opening modals.


In the real world, it's probably not possible to enable UIViewControllerBasedStatusBarAppearance so such animation would have to be manually handled on the native or js side.

@pie6k Your approach works well, but I think there is another drawback. If you are animating your bottom tabs to be visible/invisible then as they are disappearing in a transition the black background will be visible for a moment.

Your approach is great for people who don't need to do that, though.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

It's not resolved, and it's still important in my opinion

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

@yogevbd Isn't this resolved in 4.x.x?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

not stale

@pie6k Are you sure this isn't fixed? Have you checked latest version (6.1.0) ? I'm closing since afaik this is fixed, please let me know if it's still an issue in latest version.

Currently using the latest version (7.0.0) and experiencing this issue (white background instead of black). Worked on the previous version we used (6.9.1).

Was this page helpful?
0 / 5 - 0 ratings

Related issues

viper4595 picture viper4595  ·  3Comments

birkir picture birkir  ·  3Comments

EliSadaka picture EliSadaka  ·  3Comments

no23reason picture no23reason  ·  3Comments

charlesluo2014 picture charlesluo2014  ·  3Comments