Getting smart with React Navigation
The React community brought out ReactNavigation and it’s already said to be the best out there - learn more.
Subscribe to our awesome Newsletter.
One of the most difficult thing to start with React Native App is choosing a router that perfectly fits our application 😛 . Yes there are a lot of routers and we tried many as well - at the end we came to the conclusion that ReactNavigation by React community is better than every other router.
It is smooth and fluid. This ReactNavigation router is easy to use and provides good expirence. This provides component build for both iOS and Android which also provides a native feel. No router provides such a native feel. And this built-in component is highly customizable. As we can create our navigator with ReactNavigation, this router is highly is extensible.
Types of Navigators React Navigation
There are three types of navigator in ReactNavigation. Each one does their own function. All three Navigators are important to an application
- Stack Navigator - Stack Navigator provides transition between screen were each screen is placed over Stack.
- Tab Navigator - Tab Navigator provides Tab navigation to Application.
- Drawer Navigator - Drawer Navigation provides Sidebar navigation to application.
Here beauty is you can integrate any navigator with heavy customization and it works flawlessly.
How to use
Application route must be a Stack navigator where you can use any navigator inside stack navigator. StackNavigatorConfig,
where RouteConfigs is for mapping route name to a route config where this route name tells the navigator which one to present. StackNavigatorConfig provides options to route configs - where you can pass default params for all screens, initial route, provide paths that set route configs.
Here the path inside the route defines deep-linking your application. You need to configure default URL scheme for both Android and IOS. I purposely use headerMode none. If you want to use header it has lot of params for customization.
Basic usages in Stack navigators Stack Navigator defenition:
You can access the params in from another screen by
You can also pass a function as parameter this will be useful if you want change the content in the previous page.
What if you want reset a screen over another screen
Here reset is used instead of navigate. Resetting a screen over another screen will reset current screen to the top of stack.
What if you want go back 2 or 3 previous screens behind
where n is the number of screens;
Basic usages in Tab navigators
This navigator provides Tab like navigations.
Tab Navigator Defenition:
Here the RouteConfigs is same as the Stack Navigator and StackNavigatorConfig is for customizing TabBar.
Here you can customize respective tab at the respective styles and in respective tabbarOptions. You can also customize selected screens in tabBar at respective classes.
Basic usages in Drawer Navigators
This Navigator provides sidebar to the stack navigator
Drawer Navigator Defenition:
Here the RouteConfigs is same as the Stack Navigator and DrawerNavigatorConfig is for customizing Drawer’s behaviour.
Here the content component is used for providing custom side bar. Drawers can be drawn if you swipe from left for screens provided inside RouteConfigs.
If you to open drawer manually
If you to close drawer manually
You can integrate any navigator inside any navigator for better usability.
I’d be happy to discuss any clarifications or queries you might have on Discourse.