react native async storage render error occurred even though it was called and implemented as it is in the documents

Question

ERROR TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[6], "@react-native-async-storage/async-storage").AsyncStorage.getItem')

This error is located at: in App (at renderApplication.js:48) in RCTView (at View.js:32) in View (at AppContainer.js:106) in RCTView (at View.js:32) in View (at AppContainer.js:133) in AppContainer (at renderApplication.js:41)

Blockquote my code:`

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import OnboardingScreen from './Component/Onboardingscreen';
import LoginScreen from './Component/Loginscreen';
import { AsyncStorage } from '@react-native-async-storage/async-storage';
import { useEffect } from 'react';
const AppStack = createStackNavigator();

 const App =() => {
     const [isFirstLaunch, setIsFirstLaunch,] = React.useState(null);

     useEffect(() => {
         AsyncStorage.getItem('alreadyLaunched').then(value => {
             if(value == null) {
                 AsyncStorage.setItem('alreadyLaunched','true');
                 setIsFirstLaunch(true);
             } else {
                 setIsFirstLaunch(false);
             }
         });
     }, []);
     
     if (isFirstLaunch == null) {
         return null;
     } else if ( isFirstLaunch == true ){
        return (
            <NavigationContainer>
                <AppStack.Navigator
                headerMode='none'
                >
                    <AppStack.Screen name="OnboardingScreen" component={OnboardingScreen}/>
                    <AppStack.Screen name='login' component={LoginScreen} />
                </AppStack.Navigator>
            </NavigationContainer>
        );
     } else {
    return  <LoginScreen />;
 }
}

export default App;

`

Answer 1

As indicated in the docs, AsyncStorage should be imported as a default import instead of a named import.

So replace:

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

by:

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