React Navigation: Why to use methods on the navigation object instead of using action creators and dispatch (i.e. CommonActions)?

Question

In the official docs of react-navigation it says:

It's highly recommended to use the methods on the navigation object instead of using action creators and dispatch. It should only be used for advanced use cases.

But why is that? I didn't find any explanation for this strong recommendation in the react-navigation docs.

With CommonActions (or NavigationActions in react-navigation smaller equal 4.x) I can nicely create navigation functions which I can access from anywhere without the need of passing a navigation prop around. And I didn't encounter issues with it which I could relate to it being a CommonAction instead of a part of the navigation prop - even in more complex scenarios with many screens and special routing arrangements.

I now also found the following reason in another part of the docs reactnavigation.org/docs/navigating-without-navigation-prop/…: Do not use this method when you have access to a navigation prop or useNavigation since it will behave differently, and many helper methods specific to screens won't be available. — Andru
– Andru, Commented Aug 6, 2020 at 12:10

satya164 · Accepted Answer · 2020-08-05 17:00:29Z

1

There are several reasons:

Methods on the navigation object are strictly type-checked, i.e. if you use something like TypeScript or Flow, you'll get errors if you pass incorrect values, it's way more relaxed with action objects, which will only log error during runtime.
When a method exists, it means the related navigator is definitely rendered. You can't call openDrawer if you don't have a drawer, but you can call dispatch(DrawerActions.openDrawer()).
It's more typing navigate('Home') vs dispatch(CommonActions.navigate('Home'))

without the need of passing a navigation prop around

Not sure how action creators help with that, but you could just use useNavigation

answered Aug 5, 2020 at 17:00

satya164

10.2k2 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andru Over a year ago

useNavigation fulfills a similar purpose as CommonActions in that it offers the use of a navigation prop without the need to manually pass it down to the component. Given this, useNavigation also has the disadvantage of the second reason you mentioned I guess.

Collectives™ on Stack Overflow

React Navigation: Why to use methods on the navigation object instead of using action creators and dispatch (i.e. CommonActions)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related