Wipe AsyncStorage in react native

Question

I notice that I am wasting a certain amount of time debugging redux actions that I am persisting to AsyncStorage in react-native thanks to redux-persist. Sometimes I'd just like to wipe AsyncStorage to save some development time and try with fresh data.

EDIT: Best case the solution should work on simulators and real devices, iOS and Android. Maybe there are different work arounds for different platforms.

Thanks

you can try react-native-dev-button. Small addition which does exactly what you need. i actually added the purge() from redux-persist to the clearActions and used it whenever i needed it. — BigPun86, Feb 21 '18 at 10:11

Tony Vincent · Accepted Answer · 2022-01-22T05:15:41.500

46

Try using clear() function which erases all AsyncStorage for all clients, libraries, etc

edited Jan 22 '22 at 05:15

answered Sep 06 '16 at 09:52

Tony Vincent

13,354
7
49
68

It would require a really small implementation, sounds good. Do you have a global helper method under `window` object or something similar? – jsdario Sep 06 '16 at 10:52
@jsdario It's $reactNative in debugger mode. Please see my answer. – Alister Jun 03 '19 at 12:32
The above embedded is not working! So use this updated link for API Documentation for [clear()](https://react-native-async-storage.github.io/async-storage/docs/api#clear) function – Mohit Patil Jan 20 '22 at 07:59

score 35 · Answer 2 · edited Oct 01 '18 at 12:20

35

clearAsyncStorage = async() => {
    AsyncStorage.clear();
}

This function can be applied anywhere on the code base to clear AsyncStorage. For example, here is how it can be called on a <Button> component.

<Button onPress={this.clearAsyncStorage}>
  <Text>Clear Async Storage</Text>
</Button>

edited Oct 01 '18 at 12:20

Karl Taylor

4,839
3
34
62

answered Sep 13 '18 at 04:28

hzak

719
9
18

Code only answers are generally discouraged on Stack Overflow as they aren't usually very clear. Please consider updating this answer with a brief description of what you're doing, how it works, and a link to relevant documentation. – Shadow Sep 13 '18 at 05:09

Alister · Answer 3 · 2019-09-03T14:18:00.247

18

You can clear AsyncStorage easily without touching your source code. Using react native debugger; and in the devtools console type

$reactNative.AsyncStorage.clear();

or to call it in RN's normal debugger with clear() you can put this in...

if (__DEV__) {
   global.clear = () => {
     AsyncStorage.clear().then(() => console.log('Cleared'))
   }
}

edited Sep 03 '19 at 14:18

answered Jun 03 '19 at 12:31

Alister

27,049
9
40
35

1

If you want to validate that you've cleared your key, you can run ```$reactNative.AsyncStorage.getAllKeys().then(data => console.log(data));``` to list out your keys after you run the above command form react native debugger. – ryanjones Jun 08 '19 at 03:14

score 16 · Answer 4 · answered Jan 27 '21 at 19:09

16

IMHO, all the answers referring to AsyncStorage.clear() are wrong, since, as the documentation say:

Erases all AsyncStorage for all clients, libraries, etc. You probably don't want to call this; use removeItem or multiRemove to clear only your app's keys.

The correct answer may be found here:

Here is a simple way of doing it:

clearAllData() {
    AsyncStorage.getAllKeys()
        .then(keys => AsyncStorage.multiRemove(keys))
        .then(() => alert('success'));
}

answered Jan 27 '21 at 19:09

Yossi

5,577
7
41
76

docs says `clear()`also work same `/** * Erases all AsyncStorage for all clients, libraries, etc. You probably don't want to call this. * Use removeItem or multiRemove to clear only your own keys instead. */ clear(callback?: (error?: Error) => void): Promise;` – Mohd Qasim Oct 14 '21 at 10:46
I'm confused Yossi: removing _all_ the keys recursively isn't the same as clearing _all_ the AsyncStorage in practice? – pietro909 Jan 21 '22 at 09:32
As far as I understand from the documentation, clear() clears AsynStorage for all clients, while getAllKeys() gets only the app's keys. See https://reactnative.dev/docs/asyncstorage#clear – Yossi Apr 30 '22 at 17:40

score 5 · Answer 5 · answered Sep 06 '16 at 13:56

5

redux-persist comes with a purge() callback. You can call that in a debug menu somewhere if you choose.

answered Sep 06 '16 at 13:56

Tom A

944
1
6
16

This is then a wrap of the previous answer, right? I'll check both methods and try to make a difference between both answers. – jsdario Sep 07 '16 at 07:35
I have validated the other answer since AsyncStorage is always available through `import from 'react-native'`. It comes quite handy. – jsdario Sep 07 '16 at 14:24

Yoann Buzenet · Answer 6 · 2021-10-23T07:22:09.257

Working with AsyncStorage threw a Reference Error on my side :

ReferenceError: AsyncStorage is not defined

I finally found in the React Native Debuguer documentation a mention about

$reactNative.*

(For RN >= 0.56)

Which led mean to this snippet to wipe out all of my local storage :

clearAllData = () => {
    $reactNative.AsyncStorage.getAllKeys()
        .then(keys => $reactNative.AsyncStorage.multiRemove(keys))
        .then(() => alert('success'));
}

Then just clearAllData();

Wipe AsyncStorage in react native

6 Answers6