A small demonstration app showing how to use Redux to manage navigation state in a React Native (>0.21) application using NavigationExperimental.
The key elements to note when trying to implement NavigationExperimental with Redux include the following:
- You don't need a
<NavigationRootContainer />, which otherwise runs the navigation reducers, because Redux will do that for us. We lose the constantonNavigate()method in React's context, but that's okay because we just make more specific dispatches to navigation methods where they are needed, connected via Redux. - This implementation is still following the
NavigationStateandNavigationParentStateconventions established by NavigationExperimental. - It also uses
NavigationStateUtilsto do the dirty work when reducing state. - You can skip your own implementation of the reducers and use React Native's versions. See [https://github.com/jlyman/RN-NavigationExperimental-Redux-Example/issues/7#issuecomment-202385080](this comment) and the [/tree/pure-rn-reducers](pure-rn-reducers branch).
Finally, this was just an attempt to figure out how to connect Redux and NavigationExperimental, and does not represent an ideal implementation. If you see room for improvement, please let me know.
At this time, NavigationExperimental is moving quite quickly and the API is still a bit of a moving target. Thanks to @ericvicenti's work we are tracking the master branch against the Facebook react-native master branch until things quite down a bit. For version-specific implementations, I'm creating a branch per RN version. For example, see the 0.21 branch of this repo to see how to implement against the NavigationExperimental API in RN 0.21.