Add React-navigation to React-Native Typescript App

I recommend you to follow my previous article to setup your React Native project with Typescript

GITHUB REPO: https://github.com/vdelacou/iblis_native_template/tree/react-navigation

In this article all the folders or files have to be created in thesrc folder

Add React Native Vector Icons

Install the dependencies

$ npm install react-native-vector-icons --save

Install the types

$ npm install @types/react-native-vector-icons --save-dev

Link the native dependency

$ react-native link react-native-vector-icons

We will use icon later in the project

Add React Navigation

Install the dependencies

$ npm install react-native-gesture-handler react-navigation --save

Link the native dependency

$ react-native link react-native-gesture-handler

Define the routes

For this example, we will have 3 screens. The home screen which is open when the app starts, then a detail screen and a modal screen.

I like to keep my routes in an enum to refer to it without spelling mistakes. Create a folderroutes an index.ts file and add the following

export enum ROUTES {
RootMain = "RootMain",
RootModal = "RootModal",
RootDetails = "RootDetails",
ModalMain = "ModalMain",
MainHome = "MainHome",
MainDetails = "MainDetails"
}

Create MainScreen

Create a folder screens, a folder home_screen inside and then aindex.tsx file

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import {
NavigationScreenComponent,
NavigationScreenProps,
NavigationStackScreenOptions
} from "react-navigation";
import { ROUTES } from "../../routes";
/**
* The Home screen
*/
export const HomeScreen: NavigationScreenComponent<{}> = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Home Screen</Text>
</View>
);
};
// screen navigation options
HomeScreen.navigationOptions = (
screenProps: NavigationScreenProps
): NavigationStackScreenOptions => {
// Navigate to details view
const buttonRightPress = () => {
screenProps.navigation.navigate(ROUTES.MainDetails);
};
// Open modal view
const buttonleftPress = () => {
screenProps.navigation.navigate(ROUTES.ModalMain);
};
return {
headerStyle: {
elevation: 0,
backgroundColor: "darkslategray"
},
headerLeft: (
<Icon.Button
name="menu"
backgroundColor="transparent"
underlayColor="transparent"
color="wheat"
onPress={buttonleftPress}
/>
),
headerRight: (
<Icon.Button
name="apps"
backgroundColor="transparent"
underlayColor="transparent"
color="wheat"
onPress={buttonRightPress}
/>
)
};
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
title: {
fontSize: 20,
textAlign: "center",
margin: 10
}
});

Create DetailScreen

In the folder screens, create a folder detail_screen and thenindex.tsx file

import React, { FC } from "react";
import { StyleSheet, Text, View } from "react-native";
/**
* The Details screen
*/
export const DetailScreen: FC<{}> = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Details Screen</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
title: {
fontSize: 20,
textAlign: "center",
margin: 10
}
});

Create ModalScreen

In the folder screens, create a folder modal_screen and thenindex.tsx file

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import {
NavigationScreenComponent,
NavigationScreenProps,
NavigationStackScreenOptions
} from "react-navigation";
import { ROUTES } from "../../routes";
/**
* The Modal screen
*/
export const ModalScreen: NavigationScreenComponent<{}> = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Modal Screen</Text>
</View>
);
};
// screen navigation options
ModalScreen.navigationOptions = (
screenProps: NavigationScreenProps
): NavigationStackScreenOptions => {
// Close Modal
const buttonleftPress = () => {
screenProps.navigation.navigate(ROUTES.RootMain);
};
return {
headerStyle: {
elevation: 0,
backgroundColor: "#F5FCFF"
},
headerLeft: (
<Icon.Button
name="close"
backgroundColor="transparent"
underlayColor="transparent"
color="black"
onPress={buttonleftPress}
/>
)
};
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
title: {
fontSize: 20,
textAlign: "center",
margin: 10
}
});

Define the navigators

In the folder routes, change theindex.ts file and add the following

import { createAppContainer, createStackNavigator } from "react-navigation";
import { DetailScreen } from "../screens/detail_screen";
import { HomeScreen } from "../screens/home_screen";
import { ModalScreen } from "../screens/modal_screen";

export enum ROUTES {
RootMain = "RootMain",
RootModal = "RootModal",
RootDetails = "RootDetails",
ModalMain = "ModalMain",
MainHome = "MainHome",
MainDetails = "MainDetails"
}

// The stack for the modal
const ModalStack = createStackNavigator({
[ROUTES.ModalMain]: {
screen: ModalScreen
}
});

// The stack for the main navigation
const MainStack = createStackNavigator({
[ROUTES.MainHome]: {
screen: HomeScreen
},
[ROUTES.MainDetails]: {
screen: DetailScreen
}
});

// The app root stack, all navigation start from here
const RootStack = createStackNavigator(
{
[ROUTES.RootMain]: {
screen: MainStack
},
[ROUTES.RootModal]: {
screen: ModalStack
}
},
{
mode: "modal",
headerMode: "none"
}
);

const AppContainer = createAppContainer(RootStack);

export default AppContainer;

Add Navigators to the app

In the app.tsx change the file to:

import React, { FC } from "react";
import AppContainer from "./routes";
const App: FC = () => {
return <AppContainer />;
};
export default App;

And Voila!

--

--

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
Vincent Delacourt

Vincent Delacourt

Interesting in start-up or project development in the latest technologies for web and mobile apps