React Navigation with Typescript

$ 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
$ yarn add @react-navigation/stack
// screens/RootStackPrams.tsexport type RootStackParamList = {Main: undefined;Auth: undefined;};
screens/auth/index.tsx
screens/main/index.tsx
$ yarn add @react-navigation/bottom-tabs
screens/main/mainBottomTabParams.tsexport type MainBottomTabParamList = {Home: undefined;Details: undefined;};
screens/main/index.tsx
screens/main/HomeScreen.tsx
// 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