React

Navigation Data

Passing Data

When it comes to passing data between scenes, the Navigation router isn't like other routers. Other routers make you define your routes and parameters up front. The Navigation router thinks in terms of scenes and data so you don't need to think about routes and parameters until your application's working.

You can use the NavigationLink component to build Hyperlinks that navigate between scenes. As well as a stateKey prop that holds the destination State, the NavigationLink component has a navigationData prop that holds the data to pass. You don't have to convert data to strings because it accepts numbers, booleans and dates. In an email application, for example, a Hyperlink that opens an email might pass along the email id together with a flag that indicates the thread's history should be initially collapsed.

import {NavigationReact} from 'navigation-react';

<NavigationLink 
  stateKey="mail"
  navigationData={{id: 12, expand: false}}>
  Open Mail
</NavigationLink>

For navigating without Hyperlinks, you can pass data in the second parameter of the navigate function on the stateNavigator.

import {NavigationContext} from 'navigation-react'

const {stateNavigator} = useContext(NavigationContext);

<div onClick={() => {
  stateNavigator.navigate('mail', {id: 12, expand: false})
}}>
  Open Mail
</div>

You can even pass along arrays of strings, numbers, booleans or dates. So, instead of expanding and collapsing the whole thread in our email application, we could pass along an array of ids that identify which mails in the thread to expand.

Receiving Data

You can access the data from the NavigationContext. In the email example, when the 'mail' scene is active we get the id and expand data items passed by the Hyperlink. We don't have to convert the data from strings because the Navigation router remembers their original types.

import {NavigationContext} from 'navigation-react'
              
const Mail = () => {
  const {data} = useContext(NavigationContext)
  const {id, expand} = data;
};

Setting Default Values

The Navigation router lets you define default navigation data values for each scene. The data available on the NavigationContext includes these default values for any item that you don't supply with a value when navigating. If we give the expand item in the email example a default value of false then we don't have to explicitly pass it in navigation data when the mail's opened.

const stateNavigator = new StateNavigator([
  {key: 'inbox', route: ''},
  {key: 'mail', defaults: {expand: false}},
  {key: 'compose'}
]);

Setting Constraints

You can also define navigation data constraints in a function attached to the validate property of the State. This function receives the navigation data as a parameter and you return true only if the data meets your constraints. The Navigation router will only navigate to a scene if the constraints are met. For example, we could create a constraint to ensure that the mail id is greater than zero.

stateNavigator.states.mail.validate = function(data) {
  return data.id > 0;
};