CODEWITHSUNDEEP
react-nativepromiseexpoasyncstorage
Kimako
Kimako

Reputation: 625

Expo AsyncStorage returning promise issue

I'm new to react-native and using Expo. I'd like to get information from the user and his device while connecting or using the app like the id of the device, the manufacturer, what is the os etc. I've done a file where I put all my AsyncStorage functions.

export async function storeDeviceUID(uid) {
  // TODO : Do validation
  try {
    await AsyncStorage.setItem("@App:deviceUID" , JSON.stringify(deviceUID));
  } catch (error) {
    // Error saving data
    console.log("KO");
  }

  return uid;
}

export async function retrieveDeviceUID() {
  try {
    const value = await AsyncStorage.getItem("@App:deviceUID");
    if (value !== null) {
      return value;
    }
  } catch (error) {
    // Error saving data
    //console.log("KO");
  }
}

export async function storeDeviceManufacturer(value) {
  //TODO : Do validation
  try {
    await AsyncStorage.setItem("@App:device_manufacturer", value);
  } catch (error) {
    // Error saving data
    //console.log("KO");
  }
}

export async function retrieveDeviceManufacturer() {
  try {
    const value = await AsyncStorage.getItem("@App:device_manufacturer");
    if (value !== null) {
      return value;
    }
  } catch (error) {
    // Error saving data
    //console.log("KO");
  }
}

export async function storeDeviceOSVersion(value) {
  //TODO : Do validation
  try {
    await AsyncStorage.setItem("@App:device_osVersion", value);
  } catch (error) {
    // Error saving data
    //console.log("KO");
  }
}

export async function retrieveDeviceOSVersion() {
  try {
    const value = await AsyncStorage.getItem("@App:device_osVersion");
    if (value !== null) {
      return value;
    }
  } catch (error) {
    // Error saving data
    //console.log("KO");
  }
}

When I call the functions in an other file : 

  render() {
    const viewStyles = [styles.container, { backgroundColor: "orange" }];
    const textStyles = {
      color: "white",
      fontSize: 40,
      fontWeight: "bold"
    };

    // User active session
    if (retrieveProfileUserId() !== null && retrieveProfileUserId() > 0) {
      // OK
    } else {
      // Need connection
    }
    console.log("===>retrieveProfileUserId", retrieveProfileUserId());

    // Device UUID
    console.log("Results retrieveDeviceUID() : ", retrieveDeviceUID());
    if (retrieveDeviceUID() !== null) {
      // OK
    } else {
      // TODO : next step...
      // storeDeviceUID(getDeviceUID());
    }

    // Detect Manufacturer : iOS, Android, ..
    if (retrieveDeviceManufacturer() !== null) {
      // OK
    } else {
      storeDeviceManufacturer(getDeviceManufacturer());
    }

    // Get system version
    if (retrieveDeviceOSVersion() !== null) {
      // OK
    } else {
      storeDeviceOSVersion(getDeviceOSVersion());
    }

    console.log("Results retrieveDeviceOSVersion() : ", retrieveDeviceOSVersion());
    console.log("Results retrieveDeviceManufacturer() : ", retrieveDeviceManufacturer());

I get the error: 

===>retrieveProfileUserId Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}
Results retrieveDeviceUID() :  Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}
Results retrieveDeviceOSVersion() :  Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}
Results retrieveDeviceManufacturer() :  Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}

I guess I'm a little bit lost and I need your help. That may look stupid for you but... really trying to learn. Thanks for reading me

Upvotes: 0

Views: 482

Answers (1)

Aurangzaib Rana
Aurangzaib Rana

Reputation: 4252

first use await when using async functions

second use componentDidMount for getting results from async functions

Do not use await in render 

class SampleClass extends React.Component {
  constructor () {
    this.state = {
        userId:null,
    };
  }

componentDidMount= async()=> {
   const userId=await retrieveDeviceManufacturer();
   this.setState({userId}); 
  }

render () {
    const { userId }=this.state;
   }
}

Upvotes: 2

Related Questions