It is extremely easy to use Redux in an app with React Navigation. It's basically no different than without React Navigation. The following example shows how to do it end to end: https://snack.expo.io/@react-navigation/redux-example. The most important piece from it is the following:
Notice that we take the component returned from
createAppContainer and wrap it in a
Provider. Ta da! Now feel free to use
connect throughout your app.
Alright fair enough, the answer here isn't the most obvious. Let's say that you want to access the Redux store state from the title, what would you do? There are a couple of options. For these examples let's say that you want to put the count from the above example into the title.
Use a component that is
Create a component,
connect it to the store, then use that component in the
Pass the state you care about as a param to the screen
If the value isn't expected to change, you can just pass it from a
connected component to the other screen as a param.
setParams from your screen
Let's modify the
StaticCounter from the previous example as follows:
Now whenever the store updates we update the
count param and the title updates accordingly.
Can I store the navigation state in Redux too?
This is technically possible, but we don't recommend it - it's too easy to shoot yourself in the foot and slow down / break your app. We encourage you to leave it up to React Navigation to manage the navigation state. But if you really want to do this, you can use react-navigation-redux-helpers, but this isn't an officially supported workflow.