Introducing react-navigation-actions
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-actionsTo 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.
