How do I set up React Navigation with Async Storage?

How do I set up React Navigation with Async Storage?

To set up React Navigation with Async Storage, first install the necessary packages: @react-navigation/native, @react-navigation/stack, and @react-native-async-storage/async-storage. Then, create a navigation container and use Async Storage to persist your navigation state.

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 AsyncStorage from '@react-native-async-storage/async-storage';

const Stack = createStackNavigator();

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

export default App;

You can use Async Storage to save the navigation state by using the onStateChange prop.

What do I need to do to persist the navigation state?

To persist the navigation state, you can use the onStateChange prop of the NavigationContainer to save the state to Async Storage whenever it changes. Then, retrieve the state from Async Storage when the app starts.