Undefined is not an object when setting item in AsyncStorage

Question

In my React Native app, I want to store the token into AsyncStorage but when trying to do so, it throws the following warning.I went through many SO answers regarding this kind of issues but couldn't come up with a solution.

SignupScreen.js

import React from "react";
import { View } from "react-native";
import { AsyncStorage } from '@react-native-community/async-storage'
import PhoneInput from "react-native-phone-input";
import {
  Button,
  Text,
  Form,
  Item as FormItem,
  Input,
  Label,
} from 'native-base';

export default class Signup extends React.Component {
  static navigationOptions = {
    drawerLabel: "Signup",
  };

  constructor(props) {
    super(props);
    this.state = {
      fname: "",
      mobile: "",
    };

  }

  setToken = async () => {
    //This is where the warning is throws
    await AsyncStorage.setItem('token', 'tokka').then(
      val => {
        if(val) this.props.navigation.navigate('Dashboard')
      }
    )
  }

  render() {
    return (
      <View style={{paddingTop: "40%"}}>
        <Text style={{textAlign: "center",fontSize: 40}}>OnTask</Text>
        <Text style={{fontSize: 20,textAlign: "center"}}>Signup</Text>
        <Form>
        <FormItem>
          <Label>First Name</Label>
          <Input />
        </FormItem>

        <Label style={{marginTop: "3%",marginLeft: "4%"}}>Mobile Number</Label>
          <PhoneInput
          ref="phone"
          style={{
            height: 50,
            padding: 10,            
            width: 300,
            marginLeft: "2%",
            marginBottom: "5%",
            borderRadius: 10
          }}
          onChangePhoneNumber={ number => this.setState({mobile: number})}
/>

        <Button full primary onPress={() => this.setToken()}>
          <Text> Sign Up </Text>
        </Button>

      </Form>
      </View>
    );
  }
}

Zeeshan Ansari · Accepted Answer · 2019-07-07 11:37:05Z

4

The problem is this you're importing AsyncStorage wrong. please import AsyncStorage without curly braces.

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

instead of

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

And for the best practice use the try and catch

setToken = async () => {
  try {
    const val = await AsyncStorage.setItem('token', 'tokka');
    if(val) this.props.navigation.navigate('Dashboard')
  } catch (e) {
    console.log('error', e.message);
  }
}

answered Jul 7, 2019 at 11:37

Zeeshan Ansari

11k3 gold badges29 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Undefined is not an object when setting item in AsyncStorage

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related