Home > OS >  react-navigation V6: what's the difference between replace and navigate
react-navigation V6: what's the difference between replace and navigate

Time:12-01

From the react-navigation/native V6 documentation navigation.replace replaces the current route with a new one whereas navigation.navigate goes to another screen and figures out the action it needs to take to do it

Can you please explain me what's the difference between the two?

CodePudding user response:

Navigate

navigate - go to another screen, figures out the action it needs to take to do it

Navigate will go to the screen, but the action it takes to go there will depend on the type of navigator.

  • For bottom Tab it will simply replace the route with the new one to navigate and pressing back in android at least will by default navigate to first screen in navigator.

  • For Stack, navigate will push the new route into the current stack. The previous components in the route will still be mounted. Only popping them will unmount them. In a stack, going back will simply pop.

Replace

replace - replace the current route with a new one

Replace will simply replace the current route with a new one. What this means in a stack navigator is, that the current component will be unmounted and the component from new route will be mounted. Which is a different behaviour from what navigate would've done (push)

TLDR: Navigate takes best course of action, Replace only works in some navigators, with specifically unmounting current and mounting new.

  • Related