Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Replace a Screen with React Navigation

    Spencer CarliSpencer Carli
    react-nativeReact Native

    In this lesson you will learn how replace a screen by extending a React Navigation navigator’s getStateForAction function and how to dispatch custom actions to your navigator.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: We're starting off with an application that has three screens, a foo, bar, and a baz screen. We can go ahead and navigate through by pressing our buttons, and we can go from foo to bar to baz.

    Now, what we want to add is, instead of having to go from baz back to bar back to foo, we want to replace bar with baz, so that our navigation history stays the same, but we're using a different screen in the second index.

    To do this, we can go ahead and override the getStateForAction on our mainAppStack. We'll say prev.getStateForAction. This is going to equal the mainAppStack.router.getStateForAction. We can then go ahead and override it by saying mainAppStack.router.getStateForAction.

    That's going to be a function which takes an action as a first argument, and state as the second argument. At the very bottom, we'll go ahead and return the prev.getStateForAction, and we'll pass that action in state.

    That way, if our getStateForAction doesn't handle this action that's being dispatched, it'll go ahead and use the default one from React navigation. Now, inside of our getStateForAction, we'll say if state and the action.type is equal to replaceCurrentScreen, which is the action that we'll dispatch when we want this to happen.

    We'll go ahead and say const routes is equal to state.routes.slice. We just want to take from the first index to state.routes.length minus one. We can then go ahead and say routes.pushAction, which will replace our current route with this new one that we're dispatching.

    We can then go ahead and return the new navigation state. We'll go ahead and use object destructuring to pass all of the existing state we're not modifying. We can then pass the new routes array. Finally, we'll pass the index we want to be the current index. We can do that by saying routes.length minus one.

    Next, we'll set up a new function, which we'll call const replaceCurrentScreen. This is going to take a route name, as well as a second argument of params. We're going to want to set a default argument for params to be an empty object.

    This is going to return an object, and the type is going to align with what we defined here, which is replaceCurrentScreen. We're going to set a route name, and then we'll pass those params. Now, to utilize our replaceCurrentScreen function, we'll go up to our bar screen, which is where we have our replaceWithBaz.

    You can see we're using navigation.navigate, but instead, what we'll do down here with replaceWithBar, we'll say navigate.dispatch. We'll then go ahead and call our replaceCurrentScreen function.

    We'll pass the key of the screen we want to replace it with. In this case, it's going to be baz, which aligns with the key of the screen down here. With the application reloaded, if we go to bar, we can still go to baz in the typical way. We can also replace bar with baz. Now, when we press go back, we'll go directly to foo.