TypeError: undefined is not an object (evaluating '_asyncStorage.AsyncStorage.setItem')

Question

Version:

@react-native-community/async-storage = ^1.6.1

Problem:

1. Importing AsyncStorage like this:

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

2. Using in my code like this:

AsyncStorage.setItem('locale', locale)

AsyncStorage.getItem('user').then((value) => 
{
...
}

Errors:

1. TypeError: undefined is not an object (evaluating '_asyncStorage.AsyncStorage.setItem')
2. TypeError: undefined is not an object (evaluating '_asyncStorage.AsyncStorage.getItem')

What I've tried

1. Importing AsyncStorage from 'react-native' gives no problems, only warning that AsyncStorage should be imported from '@react-native-community' because the AsyncStorage from 'react-native' is deprecated.
2. Tried to uninstall and reinstall '@react-native-community/async-storage'-dependency, that didn't work.
3. Googling it

Full code:

import React from 'react';
import { View, Image, NativeModules } from 'react-native';
import { AsyncStorage } from '@react-native-community/async-storage'
import { styles } from '../../components/Styles.js';
import { GEOLocation } from '../../scripts/GEOLocation';
import Moment from 'moment/min/moment-with-locales';

export default class SplashScreen extends React.Component {


  constructor(props) {
    super(props);
    this.geo = new GEOLocation();
    this.setLocale();
    this.bootstrapAsync();
  }


  bootstrapAsync = async () => {

    this.geo.grantAccess()

    AsyncStorage.getItem('user').then((value) => {
      const user = JSON.parse(value);
      this.props.navigation.navigate(user ? 'App' : 'Auth');
    })
  };

  setLocale = () => {
    const deviceLocale = NativeModules.I18nManager.localeIdentifier
    var locale;

    if (deviceLocale.includes('_')) {
      var language = deviceLocale.split('_')[0]
      var country = deviceLocale.split('_')[1].toLowerCase()

      locale = language + '-' + country
    } else {
      locale = deviceLocale
    }

    if(Moment.locales().indexOf(locale) > -1 ) {
      console.log('device locale')
      AsyncStorage.setItem('locale', locale)
    } else {
      console.log('default locale')
      AsyncStorage.setItem('locale', 'en')
    }
  }


  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.leImage} source={require('../../../assets/logo_icon.png')} />
      </View>
    )
  }
}

Answer 1

Here's how to use the correct method for importing.

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

This module is not exported as a react-native, so it must not have a square bracket.

Use in react-native module

import { AsyncStorage } from 'react-native';

Answer 2

@react-native-community/async-storage is now deprecated

Use react-native-async-storage/async-storage

instead.

Note: It does not use brackets. Unlike before when it was one of many things exported from react-native, it is now the default export of @react-native-async-storage/async-storage.

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