How can I integrate React Navigation with Redux?

How can I integrate React Navigation with Redux?

To integrate React Navigation with Redux, you can use the react-navigation library along with Redux for state management. First, ensure you have both libraries installed.

What are the steps to set it up?

1. Install the necessary packages: npm install @react-navigation/native @react-navigation/stack react-redux.
2. Create a Redux store and wrap your app with the Provider from react-redux.
3. Set up your navigation container and screens.

Can you show me a code example?

Sure! Here's a basic example:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

const Stack = createStackNavigator();
const store = createStore(reducer);

function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

This sets up a basic navigation structure with Redux.