search

ericvicenti / navigation-rfc

Better Navigation in React Native
441 stars 44 forks source link

How to overlay on top of NavigationHeader? #78

Open tgoldenberg opened 8 years ago

tgoldenberg commented 8 years ago

I would like to do a few things that require elements being stacked on top of the NavigationHeader (i.e. a higher z-index). For example, a dropdown menu that unfolds from the renderRightComponent. However, the bottom of this gets cut off. Or, a progress bar with a draggable thumb in the scene below the nav. Again, the top gets cut off by the NavigationHeader.

Any suggestions? Thanks!

jmurzy commented 8 years ago

Are you using AnimatedView or Transitioner? Either way, your NavigationHeader should have a higher "z-index" as it's rendered after the scenes. A screenshot would have helped here—but also take a look at how I'm rendering the <AddressBar> component here that has a dropdown that renders on top of all other scenes when expanded. There is also a GIF of the dropdown in action in the README.

Also see facebook/react-native/pull/7825, facebook/react-native/pull/6473

🍺