React Navigation 5 props.navigation.replace("component"); works the same as navigation.navigate() (Back buttons still shown in header)

Question

I am trying to use react-navigation 5 replace functionality, but it does not work as expected.

Let's say there are three components:

1. set-domain.js,
2. auth.js,
3. some-func.js

What I am trying:

in set-domain.js I set domain and do:

props.navigation.navigate('Auth'); this navigates to auth.js:

in Auth I login and do:

props.navigation.replace('SomeFunc'); this should replace to some-func.js

Problem is that it does not replace, but it navigates (I have back button in header left and I can navigate back with back button). HOWEVER, if I use replace between set-domain.js, auth.js also, then it works for all screens.

What I am doing wrong here? It feels, that I do not understand how replace actually works, but I couldn't find more details on this in the documentation.

Thanks!

Answer 1

You're navigating from from set-domain to auth so your stack is [set-domain, auth].

When you use replace, all you're doing is "replacing" auth with some-func so the stack becomes [set-domain, some-func] which is why the back button still shows up and navigating back will take you to set-domain.

If you used navigate instead of replace the stack would become [set-domain, auth, some-func].