search

akveo / kittenTricks

React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.
https://akveo.github.io/react-native-ui-kitten/
MIT License
7.17k stars 986 forks source link

Demonstrate alternative way to structure navigation #174

Closed brentvatne closed 4 years ago

brentvatne commented 5 years ago

This isn't intended to be merged directly in, but instead I just wanted to show what you could do to change the navigation structure to be a lot simpler and also work more nicely.

Right now there is one navigation bar at the root which is controlled by searching through params in nested routes. We do the same with the bottom tab bar to hide it when necessary.

I consider controller navigation elements through nested route info to be an escape hatch - if you absolutely need to do it, you can do it similar to how you have done it here. But ideally you can get the behavior you want by carefully structuring your navigators and just configuring the parent navigator itself directly.

Notice that in this PR I moved the screens for auth and ecommerce to the root stack. For those screens I also set defaultNavigationOptions so the header is configured as we want them to be - it's null in auth screens and we have the standard ecommerce header in the ecommerce section. By putting this at the root, we don't need to hide the tab bar or navigation bar (along with the slight layout jank that comes with this), instead the screens just nicely slide in on top. We can get rid of the stack navigator for each other section and do this same thing, and we can stop using params to control the top level navigator header and bottom navigation bar.

artyorsh commented 5 years ago

Thank you for proposal and explanations @brentvatne

Does this mean that to achieve correct behavior of the header and tab bar in case we want to hide them - the only solution is to configure nested routes inside the root navigator? I mean why should we avoid navigator creation for such purposes. I like the previous solution because of its structure. Is it possible to somehow achieve this with saving UX of your solution?

brentvatne commented 5 years ago

Does this mean that to achieve correct behavior of the header and tab bar in case we want to hide them - the only solution is to configure nested routes inside the root navigator? I mean why should we avoid navigator creation for such purposes. I like the previous solution because of its structure.

Usually when people want to hide a tab bar they want the behavior of a screen sliding in on top of the tab bar. If they want the tab bar to be hidden but for the header visible in the tab screen to smoothly animate to the new screen (rather than render a new header) then it would make sense to hide the tab bar from there. We explain how to do that in this doc. You can also use getActiveChildNavigationOptions instead of using params.

I think it's good to model your navigation in the way I outlined here because it does the same work that you're currently doing manually and it has a better UX.