React-native-navigation: iPhone X status bar does not have topBar color by default

[RubenSandwich]

iPhone X status bar does not have navbar color by default

On the iPhone X, when presenting a navbar/topBar the status bar color should default to that of the navbar. However that currently does not happen, rather the status bar seems to default to the

Steps to Reproduce / Code Snippets / Screenshots

Here is what happens currently in React Native Navigation:

(A screenshot taken from the simulator of the topBar, notice the white part above the navbar which is is where the iPhone X get its status bar background color from.)

---

Environment

• React Native Navigation version: 2.0.2274
• React Native version: 0.52.2
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator, iOS 11.3, Both

[yogevbd]

@RubenSandwich Can you post here your options object?

[RubenSandwich]

@yogevbd

Passed in options:

    topBar: {
      title: {
        color: '#FFFFFF',
        text: 'Events',
      },
      background: {
        color: '#313E61',
      },
      leftButtons: [
        {
          id: 'EventsScreenNavBarButtons.Settings',
          disableIconTint: true,
          buttonColor: '#FFFFFF',
          icon: require('@images/gear.png'),
        },
      ],
    },

Setting the navigation root:

Navigation.setRoot({
    stack: {
      children: [
        {
          component: {
            name: EVENTSSCREENID,
          },
        },
      ],
    },
  });

Here is a better simulator screenshot as well:

[gabrielvcbessa]

Same issue here, can I change the color manually? @RubenSandwich did u make any workaround?

Those are my options:

options: {
  statusBarStyle: 'light',
  animationType: 'slide-horizontal',
  topBar: {
    title: {
      text: account.name,
      color: 'white' 
     },
    background: { color }
  }}
}

And here is the result:

[RubenSandwich]

Just an update on this, it seems to be fixed in v2.0.2348.

[Nyantahi]

This is still an issue and no ones on the web explains how to get it right for iphone x simulator.

Can someone please explain the fix for IOS status bar