The Navigation router isn’t like other navigation libraries for React Native. It’s the only one that offers 100% native navigation and that manages the Stack of screens in JavaScript. In contrast, React Native Navigation only manages the Stack of screens on the Native side. By keeping track of the Stack in JavaScript, the Navigation router supports a wider variety of navigation patterns than React Native Navigation. In a previous post I showed how you can jump backwards and forwards through the screen Stack in the Navigation router. Jumping is hard to do in React Native Navigation because the Stack isn’t available to your React code. In this post I’ll show how you can replace the content of any screen in the Navigation router Stack. Something, again, you’ll struggle to do in React Native Navigation.

Replace the Current Screen

In the Twitter App, it takes a user two taps to find out who follows someone on their timeline. The first tap takes them to the person’s profile and the second to the follower list. They end up with a Stack of three screens and it takes them a further two taps to return to their timeline.

Timeline → Person → Followers

You can streamline the navigation so that it takes three taps rather than four to go from “Timeline” to “Followers” and back again. On the second tap, you replace the “Person” screen with the “Followers” screen instead of pushing it on top of the Stack. You end up with a Stack that’s only two screens deep so it only takes a single tap to return to the “Timeline”.

Timeline → Followers

The Navigation router manages the Stack of screens as a JavaScript array of crumbs . It contains one crumb for each screen. If you remove a crumb from the JavaScript array then the Navigation router removes the corresponding screen from the Stack. You can replace the “Person” screen with the “Followers” screen by excluding the “Person” crumb from the array. On the user’s second tap, the Navigation router calls the truncateCrumbTrail function you assign to the “Followers” scene. It passes in the array containing the “Timeline” and “Person” crumbs and you return a new array that only contains the “Timeline” crumb .

const { Followers } = stateNavigator.states;

Followers.truncateCrumbTrail = (state, data, crumbs) => (

crumbs.slice(0, -1)

);

Replace a Visited Screen

I can block a user on Twitter to prevent them from seeing my tweets. But what happens if the user already has one of my tweets open in their Stack when I block them? Twitter doesn’t prevent them from navigating back to my tweet even though they don’t have permissions to see it.

Timeline → My Tweet → Tweet A

You can fix this by replacing “My Tweet” in the Stack with a “Blocked” screen that informs the user they no longer have access to the tweet.

Timeline → Blocked → Tweet A

You use fluent navigation to replace a screen in the Stack. Fluent navigation creates a clone of the array of crumbs , allowing you to navigate backwards and forwards without affecting the Stack. It’s not until you call navigateLink that the Navigation router copies your changes back onto the original crumbs array.

Start by fluently navigating back two crumbs to return to the “Timeline” scene. From there you navigate forward to the “Blocked” scene so that it replaces “My Tweet” in the crumbs array. Finally, you navigate forward to “Tweet A” so that the user’s current scene remains unchanged. To avoid unnecessary renders, the Navigation router won’t replace the “My Tweet” screen in the Stack until the user taps back to it.