React Native

Hyperlinks

React Native Web adds an href prop to all Touchables and Buttons. Populating this prop turns them into Hyperlinks (they render anchor tags). Instead of hard-coding the href, the Navigation router will generate Urls for you. Pass the target State and navigation data into the getNavigationLink function on the stateNavigator. In our example email app, we turn the open email button into a Hyperlink.

<Button
  title="Open Mail"
  href={stateNavigator.historyManager.getHref(
    stateNavigator.getNavigationLink('mail', {id: 12})
  )}
  onPress={(e) => {
    e.preventDefault();
    stateNavigator.navigate('mail', {id: 12});
  }} />

The Navigation router also generates Urls that navigate back through the stack. Pass the distance you want to travel back into the getNavigationBackLink function on the stateNavigator. In our email example, we turn the 'Back to Inbox' button into an anchor tag.

<Button
  title="Back to Inbox"
  href={stateNavigator.historyManager.getHref(
    stateNavigator.getNavigationBackLink(1)
  )}
  onPress={(e) => {
    e.preventDefault();
    stateNavigator.navigateBack(1);
  }} />

Refreshing Scenes

You've seen how to create Hyperlinks from Pressables that navigate forward and back through the stack. But you also need to create Hyperlinks out of Pressables that change data without changing the scene. In our example email app, there's a button on the 'mail' scene that expands the email so the user can view the full conversation. We must turn this into a Hyperlink so that the user can bookmark the expanded email thread.

When the user presses the 'Expand Thread' button, we store an expand indicator in navigation data instead of in useState. We pass the new navigation data to the refresh function on the stateNavigator. The Navigation router updates the navigation data without leaving the 'mail' scene. There's a corresponding getRefreshLink function for generating the matching URL. We don't need any platform checks because refresh navigation works on native as well as the web.

<Button
  title="Expand Thread"
  href={stateNavigator.historyManager.getHref(
    stateNavigator.getRefreshLink({id: 12, expand: true})
  )}
  onPress={(e) => {
    e.preventDefault();
    stateNavigator.refresh({id: 12, expand: true});
  }} />

Nesting Routes

By default, the Navigation router stores the expand indicator in the query string. The URL that expands the full email thread is '/open/12?expand=true'. But, remember that we can change these URLs to be whatever we want without changing any code. To change it to 'open/12/thread/true', we configure a route of 'open/{id}+/thread/{expand}'. The '+' separator ensures the Navigation route still matches 'open/12' so that the Hyperlink from the inbox that opens the mail still works.

[
  {key: 'inbox'},
  {key: 'mail', route: 'open/{id}+/thread/{expand}', defaults: {expand: false}, trackCrumbTrail: true},
  {key: 'compose', trackCrumbTrail: true}
]