[V3] StatusBar text color is not inverted correctly with dark-mode active

[Xetoxyc]

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

[piuholo]

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.

[stale]

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.

[djschilling]

The issue is not resolved.

[tothvoj-gl]

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

[GioLogist]

Might be somewhat related:
#5701

[vstukanov]

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.

[stale]

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.

[Xetoxyc]

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

[stale]

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.

[stale]

The issue has been closed for inactivity.

[Hemistone]

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.

[Saliheen]

Below code works for me

import {useEffect} from 'react';
import {StatusBar} from 'react-native';

const TranslucentStatusBar = ({isDarkSelected = false}) => {

  useEffect(() => {
    StatusBar.setBarStyle(isDarkSelected ? 'dark-content' : 'light-content');
  }, [isDarkSelected]);

  return (
    <>
      <StatusBar
        translucent={true}
        backgroundColor="transparent"
        animated={true}
      />
    </>
  );
};

export default TranslucentStatusBar;