React

TypeScript

To get the most out of the Navigation router's TypeScript support, you create a type that describes the possible navigation in your app. The type is an object whose keys are the valid scenes and whose values list the corresponding navigation data. In our email example, we create a type with keys for the 'inbox' and 'mail' scenes. The 'mail' scene expects a number id for the selected email and an optional boolean that indicates whether to expand the email thread.

type EmailNavigation = {
  inbox: null,
  mail: {id: number, expand?: boolean},
}

When we create the StateNavigator we pass our EmailNavigation type as the generic parameter. Then TypeScript will validate our keys are spelt correctly in our configuration and when we render the scenes.

const stateNavigator = new StateNavigator<EmailNavigation>([
  {key: 'inbox', route: ''},
  {key: 'mail'},
]);

// Error because inbox is mistyped
<SceneView<EmailNavigation> active="inbx"><Inbox /></SceneView>

Navigating and Passing Data

You can use this same type when you navigate to make sure that the navigation is valid. TypeScript checks the target scene exists and that the navigation data matches up with what that scene expects. The NavigationLink component accepts the type and the target scene as generic parameters. When we navigate to the mail scene, for example, TypeScript will tell us if we accidentally pass the id as a string instead of a number.

// Error because id is a string
<NavigationLink<EmailNavigation, 'mail'>
  stateKey="mail"
  navigationData={{id: '12'}}>
  Open Mail
</NavigationLink>

TypeScript will also check our programmatic navigation if we use the EmailNavigation type when accessing the NavigationContext.

import {NavigationEvent} from 'navigation-react'

const {stateNavigator} = useContext<NavigationEvent<EmailNavigation>>(NavigationContext);

// Error because id is a string
<div onClick={() => stateNavigator.navigate('mail', {id: '12'})}>
  Open Mail
</div>

TypeScript will validate the navigation data you receive as long as you tell it the current scene. You pass this as the second generic parameter when using the NavigationContext. In our email example, when we're on the mail scene, TypeScript will point out any mistypings and it knows that 'id' is a number and that 'expand' is a boolean.

const {data} = useContext<NavigationEvent<EmailNavigation, 'mail'>>(NavigationContext);
// Error because expand is mistyped
const {id, expad} = data;