Add React-navigation to React-Native Typescript App

Step by step setup for stack and modal navigation

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

Set up React-Native App 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!