Introducing React Navigation 5

Going From Static to dynamic Routes!

Installing

The way of Installing react-navigation changed a little bet compared to previous versions (>4.x)

// > 4.x verions
yarn add react-navigation
// yarn
yarn add @react-navigation/native
// npm
npm install @react-navigation/native
// yarn 
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
// npm
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Dynamic screens (components )

The new API introduces the dynamism in initializing the Routes. previously it was a static way, basically, we had to define our Routes in a config file.

Dynamic options 😃

This is the most requested feature by the community for a long time. I always had issues with the old method (static)and it was really hard to change the navigation behavior dynamically.

The old method => < 4.x

With older versions of react-navigation we had to define static options. and there was no way to change this dynamically.

The new method (version 5)

React-navigation comes with a dynamic way and simple, we can set the options to any screen using just props.

Hooks

This is my favorite feature so far, it’s a time-saver, the new API introduced some custom hooks to perform certain actions.

export function getCurrentRouteName (): string | null {const tag = '[getCurrentRouteNameSync] 'const navState = getStore().getState().navconst currentRoute = getActiveRouteState(navState)console.log(tag + ' currentRoute > ', currentRoute)return currentRoute && currentRoute.routeName ? currentRoute.routeName : null}
const navigationState = useNavigationState(state => state);let index = navigationState.index;let routes = navigationState.routes.length;console.log(index);console.log(routes);
  • useLinking: to handle the deepLinking

Wrapping Up

The new React-navigation API definitely moved from a static way to dynamic. it’s a great movement that will absolutely change the way we handle the navigation in React Native. dynamic Routes were a major request by the react-navigation users the new way will help us to create a better user navigation experience.

Manage your newsletter on subscribi.io, hit me up if you want to write documentation for your app -> info.said.dev@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store