React-native-navigation: [V3] StatusBar text color is not inverted correctly with dark-mode active

Created on 2 Sep 2019  路  11Comments  路  Source: wix/react-native-navigation

Issue Description

Style for StatusBar is not applied correctly in Dark-Mode as we want a black TextColor in both modes.
We got following behaviour.

Dark-Mode = OFF
light => TextColor = White
dark => TextColor = Dark

Dark-Mode = ON
light => TextColor = White
dark => TextColor = White

Expected behaviour with Dark-Mode = ON would be
light => TextColor = White
dark => TextColor = Black

or

light => TextColor = Black
dark => TextColor = White

Steps to Reproduce / Code Snippets / Screenshots

statusBar: {
    visible: true,
    style: "light",
},

Environment

  • React Native Navigation version: 3.1.2-snapshot.486
  • React Native version: 0.60.3
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): Device / 13.0 Beta 7 / Debug
iOS 馃搶 pinned

Most helpful comment

Now that iOS 13 with Dark Mode is properly released, this issue is quite urgent as it can break the user experience, for example in search bars.
For those that want to force their app to always use light mode and disregard the iOS user setting, you can set key UIUserInterfaceStyle to Light in the Info.plist file.

All 11 comments

Now that iOS 13 with Dark Mode is properly released, this issue is quite urgent as it can break the user experience, for example in search bars.
For those that want to force their app to always use light mode and disregard the iOS user setting, you can set key UIUserInterfaceStyle to Light in the Info.plist file.

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.

The issue is not resolved.

Any update on this? I see it as a quite high priority and urgent issue.

In my case I was also required to change View controller-based status bar appearance value to YES in Info.plist to make status bar text black.

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.

Still not resolved and i think all people above wish to have a fix to use darkmode within their apps

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.

The issue has been closed for inactivity.

Any Updates?
I also changed View controller-based status bar appearance as true, but I think this setting can make react-native's StatusBar component not workable.
I'm not using any StatusBar component for now so it does not make any issues, but I'm curious about does react-native's StatusBar Component still works with View controller-based status bar appearance as true.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

SudoPlz picture SudoPlz  路  31Comments

diennguyentien picture diennguyentien  路  59Comments

Stalder picture Stalder  路  35Comments

tiennguyen9988 picture tiennguyen9988  路  31Comments

fuatsengul picture fuatsengul  路  40Comments