expo AsyncStorage methods is not a function

Question

I am new to react native environment and I am trying to build an app in which I am using AsyncStorage to save the user preferences.

I am not able to save/get anything and getting below warning like,

[Unhandled promise rejection: TypeError: _reactNative.default.getItem is not a function. (In '_reactNative.default.getItem('name')', '_reactNative.default.getItem' is undefined)]

Stack trace:
  src\components\Settings\Settings.js:62:39 in _callee$
  node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
  node_modules\regenerator-runtime\runtime.js:271:30 in invoke
  node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
  node_modules\regenerator-runtime\runtime.js:135:28 in invoke
  node_modules\regenerator-runtime\runtime.js:170:17 in <unknown>
  node_modules\promise\setimmediate\core.js:45:7 in tryCallTwo
  node_modules\promise\setimmediate\core.js:200:23 in doResolve
  node_modules\promise\setimmediate\core.js:66:12 in Promise
  node_modules\regenerator-runtime\runtime.js:169:27 in callInvokeWithMethodAndArg
  node_modules\regenerator-runtime\runtime.js:192:38 in enqueue
  node_modules\regenerator-runtime\runtime.js:216:8 in async
  src\components\Settings\Settings.js:60:16 in _callee
  src\components\Settings\Settings.js:13:2 in componentDidMount
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15036:10 in commitLifeCycles
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16636:8 in commitAllLifeCycles

note: I am getting this warning in both setItem & getItem method....

loadDefaults = async () => {
        AsyncStorage.setItem('name','TEST');
        let val = await AsyncStorage.getItem('name');
        console.log("val >  " + val);

my package.json file,

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "expo-haptics": "^7.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-circular-progress": "^1.3.3",
    "react-native-easy-grid": "^0.2.2",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-reanimated": "^1.3.0",
    "react-native-svg": "^9.13.3",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.3.2",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.5.6"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.1.0"
  },
  "private": true
}

Full Component Code base

import React from 'react';
import { View, Text,Switch, StyleSheet, Platform, Alert } from 'react-native';
import { TextInput, TouchableOpacity } from 'react-native-gesture-handler';
import { colors } from '../../themes';
import AsyncStorage from 'react-native';


export default class Settings extends React.Component {

    componentDidMount() {
        this.loadDefaults();
    }

    constructor(props) {

        super(props);
        this.state = {
            input:''
        };

        this.savePref = this.savePref.bind(this);
        this.onTxtChange = this.onTxtChange.bind(this);

        this.styles = StyleSheet.create({
            container: {
                //paddingTop: 23
            },
            text: {
                marginLeft:20,
                margin: 10
            },
            input: {
                marginLeft: 10,
                marginRight: 10,
                height: 40,
                borderColor: colors.primary,
                borderWidth: 1,
                padding: 10,
                paddingLeft:20,
                borderRadius:10

            },
            submitButton: {
                backgroundColor: colors.primary,
                padding: 10,
                margin: 10,
                height: 40,
                borderRadius:10
            },
            switchContainer: {
                flexDirection:'row'
            }
        });
    }

    loadDefaults = async () => {
        AsyncStorage.setItem('name','TEST');
        let val = await AsyncStorage.getItem('name');
        console.log("XXXXXX >  " + val);
    }



    onTxtChange = (val) => {
        this.setState({input: val});
    }

    savePref = () => {
        AsyncStorage.setItem("input", this.state.input);
        this.showAlert();
    }

    showAlert = () => {
        Alert.alert(  
            'Preferences',  
            'Your preferences have been saved.',  
            [
                {text: 'OK'},  
            ],  
            {cancelable: false}  
        );
    }

    render() {
        return (
            <View style={this.styles.container}>

                <Text style={this.styles.text}>Input: </Text>

                <TextInput style={this.styles.input}
                    placeholder="Enter input"
                    placeholderTextColor={colors.grayFontColor}
                    keyboardType="number-pad"
                    value={this.state.input}
                />
                <TouchableOpacity
                    style={this.styles.submitButton}
                    onPress={this.savePref}
                    >
                    <Text style={{alignSelf:'center', color: '#fff'}}> Save </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

Answer 1

You are importing AsyncStorage as default. You need to use curly brackets for this.

Replace this:

import AsyncStorage from 'react-native';

With this one:

import { AsyncStorage } from 'react-native';