Non-Animated Navigation

By default, all navigations add a scene to the breadcrumb trail and trigger the animation cycle. This is desirable if the scene changes, like going from the 'inbox' to the 'mail' scene when the user opens an email in our example app. But the animation may be undesirable if the scene doesn’t change, like staying on the 'mail' scene when the user expands an email thread to read the full conversation. This animation would cause a flicker as it fades out the scene with the email collapsed and fades in the scene with the email expanded.

Picking Up Breadcrumbs

You can prevent the animation from running by stopping the breadcrumb trail from growing. You should only drop a breadcrumb once a scene’s been visited. To stop the breadcrumb trail from growing during a navigation, you attach a function to the truncateCrumbTrail property of the destination State. The Navigation router passes in the proposed breadcrumb trail array that includes the new crumb and you return the truncated breadcrumb trail that excludes it.

When the user expands the email in our example app, we shouldn't drop a breadcrumb because the 'mail' scene is still the current one. We attach a truncateCrumbTrail function to the 'mail' State and check if the latest crumb in the breadcrumb trail matches the 'inbox' State. If it does then the user is opening an email and we leave the breadcrumb trail alone. If it doesn't then the user is expanding an email and we remove the latest crumb.

stateNavigator.states.mail.truncateCrumbTrail = function(state, data, crumbs) {
  var latestCrumb = crumbs[crumbs.length - 1];
  return latestCrumb.state.key === 'inbox' ? crumbs : crumbs.slice(0, -1); 
};