AsyncStorage doesn't work when debugging in chrome using emulator.

tl;dr: try not using then and also consider using node-style callbacks.

I spent some time looking into this yesterday. I think there is another (open) issue on GitHub, so this subject hasn't completely gone away. I rolled back my changes without tracking the root cause, but here are my impressions and some possible avenues to investigate. (And sorry, the code below is from memory. I should have kept my code so I could drop it here verbatim.)

The implementation that they've chosen seems a bit odd to me. The code in question is here (before it disappears into native Android code). It is odd because it simultaneously supports both Node-style callbacks and Promises. Maybe this is very common in RN modules. I'm not sure. But as it is now, this maybe leads to odd race conditions, where an entire (long) promise chain can sometimes (often) resolve before the stored value is returned. This should not be possible, but I saw this happen about 50% of the time.

Several times, with the code below, I saw "DONE" before I saw "the value of foo is 1".

componentDidMount() {
    AsyncStorage.getItem('foo')
    .then(v => alert('the value of foo is' + v))
    .then(() => alert('DONE'))
}

I found that it was less racy when using async/await. The problem was more deterministic, but knowing how await works under the hood, this seems just very sugary to me. So I am not sure this will solve your problem. Anyways, this did work consistently for me.

async componentDidMount() {
    let v = await AsyncStorage.getItem('foo');
    alert('the value of foo is', v);
    alert('DONE');
}

One thing I did not try, and I strongly encourage you to do next is to use Node-style callbacks. You can create a simple wrapper for getItem. For example:

const getValue = () => new Promise((resolve, reject) => {
    AsyncStorage.getItem('foo', (err, val) => {
        if (err) return reject(err);
        resolve(val);
    })
})

...then you can use await/async if you want:

async componentDidMount() {
    let v = await getValue();
    console.log('the value of foo is', v);
}

or use thenables:

componentDidMount() {
    getValue()
    .then(v => console.log("The value of foo is", v))
    .catch(err => console.log("There was an error:", err.message))
}

I hope this helps. If it does, let me know and I will try to write up a test case for github and maybe do a pull request. I should have kept following this up yesterday, but the debugger kept giving me problems and I ran out of time.

/r/reactnative Thread