React Navigation 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. In this post, we’ll try to use two types of navigation. Stack and Tab with Typescript.

Installation

At first, we’ll start with a React Native(RN) environment with typescript.

1. We can build it easily with the react-native command.

$ npx react-native init reactNavigationTutorial —-template react-native-template-typescrip

2. Install the react-navigation package.

$ yarn add @react-navigation/native

3. Iinstall dependencies.

$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

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

// 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 naivgator provides a way for our app to tansition between screens and manage navigation history. Oure app pushes and pops items from the navigation stack as users interact.

Let’s install the library and make two screens.

$ yarn add @react-navigation/stack

Make ‘screens’ directory to contain screens. There are two directories ‘Main’ and ‘Auth’ in the screens directory.

// screens/RootStackPrams.ts
export type RootStackParamList = {
Main: undefined;
Auth: undefined;
};

RootStackParamList defines the screens on the Root path.

screens/auth/index.tsx

Each in screens, make screenProp’s type using the ‘StackNavigationProp’ and toss to useNavigation hooks. If the button is pressed, navigation navigates to another screen.

You can see the Screen names are recommended. This is possible thanks to useNavigation’s generic!

The main screen is similar to auth screen. On this screen, there is a button to navigate to the Auth screen.

screens/main/index.tsx

All of the screens are ready, now set the container App.tsx.

The createStackNavigator makes Stack navigator and screen component. Because we set the RootStackParamList as generic, we can config each screen props easily :)

Tab navigation

Sometimes you can see the bottom navigations on mobile apps. Now we’ll make it on the main screen to be nested.

$ yarn add @react-navigation/bottom-tabs

Make ‘MainBottomTabParams.ts’.

screens/main/mainBottomTabParams.ts
export type MainBottomTabParamList = {
Home: undefined;
Details: undefined;
};

Edit Main screen to contains two sub-screens. There are ‘Home’ and ‘Details’.

screens/main/index.tsx

The main screen has a BottomTab navigator. It navigates sub-screens.

screens/main/HomeScreen.tsx

HomeScreen also has a button. It navigates to auth screen but a special thing is its navigation is made by ‘Composite’. ButtonTabNavigationProp doesn’t have an ‘Auth’ path.

Although there is only one button now, If we want to move to both same-level screens(ex. DetailsScreen) and high-level screens(ex. AuthScreen), we need to make composited navigationProp.

If we use it, we can see the navigation can navigate to all of the paths. Details Screen will show just page name.

// screens/main/DetailsScreen.tsx
import React from 'react';
import {View, Text} from 'react-native';
function DetailsScreen() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Details Screen</Text>
</View>
);
}
export default DetailsScreen;

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

Refs.

Getting started | React Navigation