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
forcreateStackNavigator
fromreact-navigation-stack
NavigationTabProp
forcreateBottomTabNavigator
andcreateMaterialTopTabNavigator
fromreact-navigation-tabs
NavigationDrawerProp
forcreateDrawerNavigator
fromreact-navigation-drawer
Type checking all props for a screen
A screen receives the theme
and screenProps
props along with the navigation
prop. Instead of needing to annotate each property, they can be consolidated.
The type depends on the navigator that renders the screen. For example, for a screen in createStackNavigator
:
import { NavigationStackScreenProps } from 'react-navigation-stack';
type Params = { userId: string };
type ScreenProps = { language: string };
class ProfileScreen extends React.Component<
NavigationStackScreenProps<Params, ScreenProps>
> {
// ...
}
The Params
and ScreenProps
generics are optional, and can be omitted if you're not using them.
Along with NavigationStackScreenProps
, each navigator exports its own type for navigation prop:
NavigationStackScreenProps
forcreateStackNavigator
fromreact-navigation-stack
NavigationTabScreenProps
forcreateBottomTabNavigator
andcreateMaterialTopTabNavigator
fromreact-navigation-tabs
NavigationDrawerScreenProps
forcreateDrawerNavigator
fromreact-navigation-drawer
Type checking navigationOptions
Different navigators accept different set of options for the screen. They are specified in the navigationOptions
static property which can be annotated to provide type-checking:
import { NavigationStackOptions } from 'react-navigation-stack';
// ...
class ProfileScreen extends React.Component<Props> {
static navigationOptions: NavigationStackOptions = {
headerTitle: 'Profile',
};
// ...
}
Along with NavigationStackOptions
, each navigator exports its own type for navigation prop:
NavigationStackOptions
forcreateStackNavigator
fromreact-navigation-stack
NavigationBottomTabOptions
forcreateBottomTabNavigator
fromreact-navigation-tabs
NavigationMaterialTabOptions
forcreateMaterialTopTabNavigator
fromreact-navigation-tabs
NavigationDrawerOptions
forcreateDrawerNavigator
fromreact-navigation-drawer
Type checking screen components
Screens can be annotated to provide type-checking for the props it receives, as well as navigationOptions
in a single type annotation.
The type depends on the navigator that renders the screen. For example, for a screen in createStackNavigator
:
import { NavigationStackScreenComponent } from 'react-navigation-stack';
type Params = { userId: string };
type ScreenProps = { language: string };
const ProfileScreen: NavigationStackScreenComponent<
Params,
ScreenProps
> = props => {
// ...
};
ProfileScreen.navigationOptions = {
headerTitle: 'Profile',
};
The Params
and ScreenProps
generics are optional, and can be omitted if you're not using them.
Along with NavigationStackScreenComponent
, each navigator exports its own type for navigation prop:
NavigationStackScreenComponent
forcreateStackNavigator
fromreact-navigation-stack
NavigationBottomTabScreenComponent
forcreateBottomTabNavigator
fromreact-navigation-tabs
NavigationMaterialTabScreenComponent
forcreateMaterialTopTabNavigator
fromreact-navigation-tabs
NavigationDrawerScreenComponent
forcreateDrawerNavigator
fromreact-navigation-drawer