React Navigation with Typescript


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
$ yarn add @react-navigation/native
$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
// index.js or App.tsximport 'react-native-gesture-handler';
$ 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.

$ yarn add @react-navigation/stack
// screens/RootStackPrams.tsexport type RootStackParamList = {Main: undefined;Auth: undefined;};

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
screens/main/mainBottomTabParams.tsexport type MainBottomTabParamList = {Home: undefined;Details: undefined;};
// screens/main/DetailsScreen.tsximport 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;



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