How do I use AsyncStorage with React Navigation v5 in TypeScript?

How do I use AsyncStorage with React Navigation v5 in TypeScript?

You can use AsyncStorage to persist navigation state in React Navigation v5. First, install the necessary packages.

What packages do I need to install?

You need to install @react-native-async-storage/async-storage and @react-navigation/native. Use npm or yarn to install them.

Can you show me a code example?

Sure! Here's a basic example:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';

const App = () => {
  const [initialRoute, setInitialRoute] = useState('Home');

  useEffect(() => {
    const loadInitialRoute = async () => {
      const route = await AsyncStorage.getItem('initialRoute');
      if (route) setInitialRoute(route);
    };
    loadInitialRoute();
  }, []);

  return (
    <NavigationContainer initialRouteName={initialRoute}>
      {/* Your navigators go here */}
    </NavigationContainer>
  );
};

This code retrieves the initial route from AsyncStorage.

How do I save the current route to AsyncStorage?

You can save the current route using the navigation.addListener method. Here's how:

navigation.addListener('state', async (e) => {
  const currentRoute = e.data.state.routes[e.data.state.index].name;
  await AsyncStorage.setItem('initialRoute', currentRoute);
});