I am developing a React Native app using React Navigation and redux. I have been reading countless questions dancing around the proper way to implement the two libraries. My question is: Is there any relationship between navigation.dispatch() and redux’s dispatch()?
To be clear if I implement React Navigation with redux as described in the redux integration section could I dispatch other non-navigation actions through navigation.dispatch? This stems from trying to dispatch a logout action from a header button attached to a TabNavigator (as a child of a StackNavigator). Trying to access redux’s dispatch inside this header seems quite tricky.
Related
What is the difference between using navigation.navigate() and navigation.dispatch(CommonAction.navigate()) in React Native?
The docs explanation is:
The dispatch method lets us send a navigation action object which determines how the navigation state will be updated. All of the navigation functions like navigate use dispatch behind the scenes.
https://reactnavigation.org/docs/navigation-prop/#dispatch
AFAIK there is no real difference between using actions and navigate
I'm looking for a navigation library for a new React Native project. I've read information on this 3 main libraries:
react-native-router-flux
react-native-navigation
"Standard" react native navigation system
I have read that the "standard" system is very buggy, is it true?
What is your favorite navigation library to date?
The most used navigation library for react is react-navigation as it is kind of simple to use, has a lot of features and can be customise at will.
react-native-router-flux is a wrapper over react-navigation, it is really simple to use and allows you to write a lot less code than with react-navigation, however if you want to implement complex features it might not be the best choice.
react-native-navigation aims to do the same things as react-navigation but... misses the point, as it clearly lakes some complex features that react-navigation has.
I suggest you to read https://medium.com/#ian.mundy/choosing-a-routing-library-for-react-native-604f97e58729 if you can, although that article is from 2017 it is still relevant !
You should give the Navigation router a try. It provides 100% native navigation on iOS and Android. It isn’t like React Native Navigation because it doesn’t require any native setup and has a JavaScript array representation of the native stack of screens.
as written in the react-navigation page:
Warning: in the next major version of React Navigation, to be released in Fall 2018, we will no longer provide any information about how to integrate with Redux and it may cease to work.
In the next version of react-navigation it could be hard to use redux with react-navigation.
My question is: what can I do to use states (and passing states between screens) in a react-navigation app without using redux?
For children of navigator
react-navigation gives you an withNavigation HOC, so you can easily wrap the component inside it to access the navigation state and navigate.
Why you integrate react navigation with redux?
For me, I want to be able to perform navigation actions from outside of my components(screens). Eg: Redux-saga. If we don't integrate, we can't navigate via redux-saga.
For a task like that we don't need to integrate react-navigation and redux. We just need to use NavigationService.
Which navigation is best to use in react native with redux
react navigation
react native navigation
react native router flux
Is here anything best rather than this ?
I would go with react navigation for redux. It is pretty easy, there is a good number of tutorials as well as their documentation I would say is pretty clear: https://reactnavigation.org/docs/en/redux-integration.html
You should give the Navigation router a try. It provides 100% native navigation on iOS and Android. It doesn’t require you to do anything special to integrate with Redux. Wrap the top level component in a Redux Provider component and away you go. I’ve written a Redux example to get you started
React-Navigation itself answers your question here
I'm considering a navigator for a new react-native project
I think the best 2 options are react navigation and react native navigation
Which one is more flexible in terms of defining custom navbars (for example a toggle searchbar) and overriding the default back button handler (for example: to prompt a 'save changes?' warning)?
I would say react-navigation is a better choice, in terms of its flexible api.
Also check out this post from Eric Vicenti, if you are trying to choose the way to go in terms of navigation and navigation animations;
https://medium.com/#ericvicenti/playing-with-react-navigation-and-airbnbs-native-navigation-4e49fc765489