How to add React Navigation in current project with Typescript

React Navigation is a library that helps with routing and navigation.

It is easy to use and it supports both ios and android. It is also a customizable, and extensible platform.

Installation

Install the react-navigation package.

$ yarn add @react-navigation/native

2. Install dependencies..

$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
react-native-reanimated -> It provides a more comprehensive, low level abstraction for the Animated library API to be built on top of and hence allow for much greater flexibility especially when it comes to gesture based interactions.
react-native-gesture-handler -> It provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.
react-native-safe-area-context -> A flexible way to handle safe area, also works on Android and Web!
@react-native-community/masked-view -> React Native MaskedView is not currently supported by Expo unless you "eject".

3. Add the following at the top of index.js or App.tsx.

import 'react-native-gesture-handler';

If you’re developing for iOS, run the pod-install script.

$ npx pod-install ios

Stack navigation

Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

$ yarn add @react-navigation/stack

Make ‘screens’ directory to contain screens.

RootStackParams defines the screens on the Root path

MainNavigator.tsx

The createDrawerNavigator makes Stack navigator and screen component. Because we set the RootStackParams as generic, we can config each screen props easily .

We set initialRoute as Dashboard and the other screens in menus.

Dashboard.tsx

IconButton.tsx

We created a new component to redirect the dashboard to other screens.

When you re-run the app , navigation is shown!