Type checking with TypeScript

React Navigation exports type definitions for TypeScript projects, which can be used to type check screens, navigation options, and the navigation prop.

Type checking navigation prop

The navigation prop can be annotated to provide type checking for params and basic type checking for the available methods.

The type depends on the navigator that renders the screen. For example, the navigation prop provided by createStackNavigator can be used like:

import { NavigationStackProp } from 'react-navigation-stack';

type Props = {
  navigation: NavigationStackProp<{ userId: string }>;
};

class ProfileScreen extends React.Component<Props> {
  // ...
}

The types take a generic for the params object.

Along with NavigationStackProp, each navigator exports its own type for navigation prop:

• NavigationStackProp for createStackNavigator from react-navigation-stack
• NavigationTabProp for createBottomTabNavigator and createMaterialTopTabNavigator from react-navigation-tabs
• NavigationDrawerProp for createDrawerNavigator from react-navigation-drawer

Type checking all props for a screen

A screen receives the theme and screenProps