How can I use AsyncStorage with React Navigation?

How can I use AsyncStorage with React Navigation?

You can use AsyncStorage to persist navigation state in React Navigation. First, install AsyncStorage using npm or yarn.

What are the steps to install AsyncStorage?

Run npm install @react-native-async-storage/async-storage or yarn add @react-native-async-storage/async-storage in your project.

How do I save the navigation state?

You can save the navigation state by using the onStateChange prop in your navigator and storing the state in AsyncStorage.

Can you show me a code example?

Sure! Here's a simple example:

import AsyncStorage from '@react-native-async-storage/async-storage';

const MyNavigator = () => {
  const [initialState, setInitialState] = useState();

  useEffect(() => {
    const restoreState = async () => {
      const savedState = await AsyncStorage.getItem('navigationState');
      if (savedState) {
        setInitialState(JSON.parse(savedState));
      }
    };
    restoreState();
  }, []);

  return (
    <NavigationContainer
      initialState={initialState}
      onStateChange={state => AsyncStorage.setItem('navigationState', JSON.stringify(state))}
    >
      {/* Your navigators go here */}
    </NavigationContainer>
  );
};

This code restores the navigation state from AsyncStorage when the app starts.