Introducing react-navigation-actions

Josef Roth
Jul 21, 2017 · 2 min read

Recently at NETSYNO we integrated react-navigation in one of our existing React Native apps. Overall, react-navigation was a pleasure to work with as it is a major improvement over the old Navigator.

However, we stumbled across some common navigation actions which are not provided directly by the library, but are easy to implement, especially with help from Stack Overflow. Due to the fact that other people were already looking for a solution to the same problems, we asked ourselves why there is no library for this. As we did not find one, we decided to create it ourselves.

react-navigation-actions provides ready-to-use action creators for direct usage with react-navigation. These actions are goBackN , replace and resetTo . We do not claim to have every thinkable action covered, therefore, we are happy to integrate your ideas, preferably in the form of a pull request.

How to use

First of all you have to install react-navigation-actions using your favorite package manager:

npm install --save react-navigation-actions
yarn add react-navigation-actions

To use the actions you first have to override your Navigator’s getStateForAction . You have to pass the existing getStateForAction as fallback for actions unknown to react-navigation-actions.

import { StackNavigator } from 'react-navigation';
import { getStateForAction } from 'react-navigation-actions';
const Navigator = new StackNavigator(screens, navigatorConfig);
Navigator.router.getStateForAction = getStateForAction(Navigator.router.getStateForAction);
// continue to use your navigator as before

Now, inside your navigation-aware components you are able to dispatch the new actions.

For a complete documentation have a look at the GitHub repository. Please be aware that we only tested the library with StackNavigators without nesting. If you encounter problems in other scenarios don’t hesitate to raise an issue.

)
Josef Roth

Written by

Developer at NETSYNO. Interested in Open Source Software and great UX. My opinions do not necessarily reflect the opinions of my employer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade