11

I see a lot of folks in the react-navigation issues section using this.props.navigation.dispatch to programmatically navigate. Is there any specific reason or use case to use that over this.props.navigation.navigate?

It seems like you can pass more options to the dispatch function? Is there anything else? Can you use dispatch without explicitly tying react-navigation into your apps redux store? Right now I have an app that has redux, but I dont explicitly configure my redux setup to know about react-navigation (and would prefer to keep it that way if I can).

Abdennour TOUMI
  • 87,526
  • 38
  • 249
  • 254
arcom
  • 612
  • 4
  • 11
  • 18

2 Answers2

10

From github :

enter image description here

This is the code of navigate function which reuses navigation.dispatch.. And remember:

Code Don't Lie

Then, navigation.navigate(...args) is an alias of navigation.dispatch(NavigationActions.navigate(...args))

Community
  • 1
  • 1
Abdennour TOUMI
  • 87,526
  • 38
  • 249
  • 254
  • How can I make it work for reactNative? I am using `react-navigation` module, and using Tabbed navigation style. I can not add routes for Add/Edit/Search button in `TabNavigator()` configuraiton (as those are visible main navigation section for user). How can I do screen transition then to may any XX component? I have seen lots of details and its documentation but didn't get any clue, may be its too complex that's why I didn't get it right in my mind. – Nah Jan 25 '18 at 13:13
  • Source code link not available right now. So this is not valid. – aslamhossin Mar 22 '19 at 10:28
  • Thank you @AslamHossin ! The link was updated to refer to the commit instead of the branch (master) – Abdennour TOUMI Mar 30 '19 at 02:58
  • OUTDATED!! It's now `CommonActions` instead of `NavigationActions` --> https://stackoverflow.com/questions/50781080/navigationactions-reset-is-not-a-function – Tha Brad Jun 05 '22 at 14:03
8

From the React Navigation docs The Navigation Prop chapter (https://reactnavigation.org/docs/navigators/navigation-prop#dispatch-Send-an-action-to-the-router):

...The other navigation functions use dispatch behind the scenes...

Also parameters for NavigationActions.navigate and this.props.navigation.navigate are the same. There should be no difference which one you use. In my opinion, this.props.navigation.navigate is shorter and more readable.

Sascha
  • 241
  • 1
  • 3
  • 9
  • How can I make it work for reactNative? I am using `react-navigation` module, and using Tabbed navigation style. I can not add routes for Add/Edit/Search button in `TabNavigator()` configuraiton (as those are visible main navigation section for user). How can I do screen transition then to may any XX component? I have seen lots of details and its documentation but didn't get any clue, may be its too complex that's why I didn't get it right in my mind. – Nah Jan 25 '18 at 13:13
  • 1
    link is dead now. – Tushar Pandey Jul 17 '19 at 17:26
  • It's now `CommonActions` instead of `NavigationActions` --> https://stackoverflow.com/questions/50781080/navigationactions-reset-is-not-a-function – Tha Brad Jun 05 '22 at 14:04