Navigator navigationBar renders at bottom of screen

[esauter5]

I just implemented a Navigator component with a custom navigationBar. When it renders, the navBar renders at the bottom of the screen, but otherwise renders correctly. I noticed that this is because in the code, navBar renders after the scene: https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js#L1318-L1321

I noticed that Navigator.NavigationBar gets around this by setting the navBar component to position: absolute (https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js#L190-L195)

Would it make sense to have the navbar render first so that it was at the top by default? I can turn open a PR if so.

[jmstout]

I would imagine part of the reason the navbar is rendered after the scene is so it appears on top of the scene, rather than below it.

As far as I understand it, the component order is basically equivalent to z-index in css.

[esauter5]

Thanks @jmstout. If this is true, then it makes sense. I realized the flaw in my logic: I was pondering the navbar being on top for a screen that didnt scroll so it seemed natural. If the screen did scroll, the navbar would go away unless you have the absolute positioning. Not sure how I overlooked that. Going to close.

[mattvagni]

📢 For anyone else ending up on this still (like me) an easy way to reverse the order is to simply add flexDirection: 'column-reverse' to the Navigator.