Calling functions such as
popToTop on the
navigation prop is not the only way to navigate around your app. As an alternative, you can dispatch navigation actions on your top-level navigator, provided you aren't passing your own
navigation prop as you would with a redux integration. The presented approach is useful in situations when you want to trigger a navigation action from places where you do not have access to the
navigation prop, or if you're looking for an alternative to using the
You can get access to a navigator through a
ref and pass it to the
NavigationService which we will later use to navigate. Use this only with the top-level (root) navigator of your app.
In the next step, we define
NavigationService which is a simple module with functions that dispatch user-defined navigation actions.
NavigationService and call functions which you exported from it. You may use this approach outside of your React components and, in fact, it works just as well when used from within them.
NavigationService, you can create your own navigation actions, or compose multiple navigation actions into one, and then easily reuse them throughout your application. When writing tests, you may mock the navigation functions, and make assertions on whether the correct functions are called, with the correct parameters.