15

Using React Navigation, different types of Navigators have different actions for (programmatically) navigating between screens.

For e.g. the StackNavigator, the 'pop', 'push' etc. have well-documented (different) behavior, compared to the common 'navigate' action.

But for the Drawer and TabNavigators, we have the option to use 'jumpTo'. I fail to understand how 'jumpTo' is different from 'navigate', and when to use what?

Documentation just says

The jumpTo action can be used to jump to an existing route in the drawer navigator.

What benefit does that have compared to 'navigate', which

...allows to navigate to a specific route

So more specifically, using a DrawerNavigation, how does this

props.navigation.navigate('Create meeting')

... work differently from this

props.navigation.jumpTo('Create meeting');

... and when should I use which?

1 Answers1

0

Use "JumpTo" when you want to navigate directly to a specific screen or route and you don't need to preserve the navigation history. For example, you might use it to go to a login screen after a user session has expired or to reset the navigation stack to a certain screen.

Use "Navigate" when you want to navigate between screens in a sequential manner, allowing users to go back to the previous screen. It's useful for creating a navigation flow within your app where users can move forward and backward through screens.

  • Thanks for answering, even after all this time. What you're saying makes a lot of sense. Having an option to go somewhere, while also clearing the "back"-history, could be super helpful in some cases, and that behavior would align well with the function-naming. However, I just tested it again, and it does not seem to work that way. I can still go back to the previous page, after navigating with "jumpTo". Additionally, it seems like the "jumpTo"-function have been removed from Navigation 6, so it may have just been an oversight or leftover from previous versions? – Chris Johansen May 19 '23 at 09:40
  • @ChrisJohansen Yes, in navigation 6 "JumpTo" is removed but still we can use it in previous versions. In navigation 6 we can achieve similar functionality using the navigate function or the reset function provided by the navigation prop. – Dhyana Dave May 23 '23 at 05:16