Skip to main content
Version: 8.x

Type checking with TypeScript

React Navigation can be configured to type-check screens and their params, as well as various other APIs using TypeScript. This provides better IntelliSense and type safety when working with React Navigation.

First, make sure you have the following configuration in your tsconfig.json under compilerOptions:

  • strict: true or strictNullChecks: true - Necessary for IntelliSense and type inference to work correctly.
  • moduleResolution: "bundler" - Necessary to resolve the types correctly and match the behavior of Metro and other bundlers.

Setting up the types​

There are 2 steps to configure TypeScript with the static API:

Specifying the root navigator's type​

For the type-inference to work, React Navigation needs to know the type of the root navigator in your app. To do this, you can declare a module augmentation for @react-navigation/native and extend the RootNavigator interface with the type of your root navigator.

const HomeTabs = createBottomTabNavigator({
  screens: {
    Feed: FeedScreen,
    Profile: ProfileScreen,
  },
});

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeTabs,
  },
});