React-native-navigation: [v2] custom top bar background does not fill entire height on iPhone X

[erickreutz]

Steps to reproduce:

Run playground on iPhone X simulator

---

Environment

• React Native Navigation version: wix/navigation@master
• React Native version: wix/navigation@master
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone X

[thame]

Add drawBehind: true

[erickreutz]

Won’t that just draw the screen view underneath the top bar?

[chrise86]

Also facing this issue. Adding drawBehind: true does not solve the problem. Neither the background component nor the actual screen component is visible under the top most part of the topbar. It's like there is a white object on top of everything else.

static get options() {
  return {
    layout: {
      backgroundColor: colours.red
    },
    topBar: {
      drawBehind: true,
      background: {
        color: colours.red,
        component: {
          name: 'TopBar'
        }
      }
    }
  }
}

Produces the following. Note the white bar at the top of the image:

[Dalamar]

Also facing this issue.
Neither drawBehind: true, nor within wrapper helps.

[Dalamar]

translucent: true, solved this issue for me:

Navigation.setDefaultOptions({
      statusBar: {
        visible: true,
        style: 'light',
        hideWithTopBar: false,
      },
      layout: {
        backgroundColor: '#f2a99a',
        orientation: ['portrait'],
      },
      topBar: {
        visible: true,
        translucent: true,
        background: {
          color: 'rgba(217, 73, 114, 0.5)',
          component: {
            name: 'TopBarBackground',
          },
        },
      },
...
})

Also I enabled View controller-based status bar appearance according to manual https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=styling-the-statusbar

[adamterlson]

I am also experiencing this issue, and it prevents me from having a scrollview control the opacity of the navbar (start transparent, scroll down to make it opaque).

@dalamar I have copy-pasted your code and it does not work for me.

Has anyone had any luck getting a custom topBar component to draw behind the statusbar on any device?

[stale[bot]]

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.

[stale[bot]]

The issue has been closed for inactivity.

[FRizzonelli]

This isn't fixed, and the problem is also present with any iOS device.

statusBar: { hideWithTopBar: true, }

works perfectly if you have a background color, but doesn't work when you have a custom top bar background component