NativeModule: AsyncStorage is null, with @RNC/AsyncStorage

Question

I'm working on a React Native project created with Expo. I've been using regular old AsyncStorage, importing from react-native, and all has been well.

In looking up how to mock AsyncStorage for testing, I saw that react-native-community/react-native-async-storage has its own mock built in.

So I installed the community plugin with yarn add and switched out all my import statements.

When I run my app, I'm getting an error (which I'm retyping myself, excuse some ellipses):

[@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.

To fix this issue try these steps:

-Run `react-native link @react-native-community/async-storage` in the project root.
-Rebuild and restart the app
-Run the packager with `--clearCache` flag.
-If you are using CocoaPods on iOS...
-If this happens while testing with Jest...

So I tried running react-native link @react-native-community/async-storage but I keep getting this error:

Something went wrong while linking. Error: Cannot read property 'pbxprojPath' of null

Some research showed me that Expo apps can't (and don't need to) link.

I tried npm start --clearCache to no avail.

Also, I don't have an ios (or android) folder in my project. This has always been kind of confusing for me because I see it referenced all over the place. I run my app in the Simulator/Emulator (and device) through the Expo app. Once I tried ejecting and there were problems. So, I don't have an ios folder.

(I'll go back to using the old native AsyncStorage from react-native and creating a mock myself, but I'd like to know how to solve this, and similar problems that may arise in the future.)

I think it's better to erase the project, re-create it, and copy and paste the code. — hong developer, May 08 '19 at 01:48

score 38 · Answer 1 · answered Aug 27 '19 at 13:30

38

This error can be rectified by linking the module like mentioned above but linking does not work if your app is Expo Managed (created via expo-cli).

Assuming your app is Expo managed, instead of using the AsyncStorage from Facebook RN Documentation:

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

Do:

import { AsyncStorage } from 'react-native';

Check documentation here: AsyncStorage Expo

answered Aug 27 '19 at 13:30

Tadiwanashe

1,246
14
15

this solution also doesn't work for me, it's not updating data in first time, please help I am working in a project whose deadline id 5 march means tomorrow. – Anuj Sharma Mar 04 '20 at 10:02
4

Good, but deprecated answer, at the top of docs this note – Oleg Reym Jan 07 '21 at 07:37
If you're running on an Expo managed project, the above solution will no longer work in 2021. As documented on https://docs.expo.dev/guides/testing-with-jest/ you can now just add `yarn add jest-expo --dev` – Niko Dunk Sep 17 '21 at 20:27
1

This answer is deprecated! Install it via `expo install @react-native-async-storage/async-storage` (https://docs.expo.dev/versions/latest/sdk/async-storage/), see the answer from @jonnyg23 below. – Tobias Kaufmann Sep 21 '21 at 18:48

score 15 · Answer 2 · answered Apr 30 '21 at 18:12

15

What resolved this for me was to first install the following library:

expo install @react-native-async-storage/async-storage

Then, update your import as such:

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

Note: You may have to restart Expo after this fix.

answered Apr 30 '21 at 18:12

jonnyg23

229
2
11

This is the only valid answer around here! – Tobias Kaufmann Sep 21 '21 at 18:47
This works for me too. It's a valid answer. – AyoDavid Dec 07 '21 at 20:09
Thank you - after an entire afternoon of searching - this answer was the solution – Steph Apr 29 '22 at 14:05

Munishkin · Answer 3 · 2019-05-10T16:40:24.850

I just had a similar issue and found the answer provided by Krizzu on github very helpful. Here is what he says: 'If you're using expo, you cannot add this package. Use whatever expo gives you (and ignore the warning about deprecation).' and 'You cannot add additional native modules to expo, unless you eject your project.'

You can read more about this issue following the threads on: https://github.com/react-native-community/react-native-async-storage/issues/89 and https://github.com/react-native-community/react-native-async-storage/issues/72. I hope this helps.

score 2 · Answer 4 · answered Jun 13 '19 at 13:44

I had the same issue, the reason was cuz I was using react-native-navigation and it messed up the android section in MainApplication.java, so I had to change the file manually, I had already run this command:

react-native link @react-native-community/async-storage

now I have this:

   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(new MainReactPackage(),
            new AsyncStoragePackage()); //<----- here
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

and this :

    protected List<ReactPackage> getPackages() {
        // Add additional packages you require here
        // No need to add RnnPackage and MainReactPackage
        return Arrays.<ReactPackage>asList(
                // eg. new VectorIconsPackage()                    
                new AsyncStoragePackage()); //<----- here
    }

rephrase what you are describing, I didn't really understand. in my ```MainApplication.java``` looks like this: ```@Override protected List getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; }``` — hanan, Jul 28 '20 at 13:23
are you suggesting to remove this piece of code and replace with yours? or append them? both methods didn't work for me! note I am also using ```react-navigation``` and facing same issue here — hanan, Jul 28 '20 at 13:24

score 2 · Answer 5 · answered Jul 17 '19 at 12:56

2

Just close the Metro bundler and run react-native run-android or run-ios and it will be fixed.

answered Jul 17 '19 at 12:56

vanskins

75
6

guy mentioned he is using expo. I think you need to eject first before running react-native run-ios – NoloMokgosi May 11 '20 at 20:32
For non expo users - this is a correct solution to the problem. The better answer explanation would help – Adam Sep 20 '20 at 13:02
"BUNDLER" is the key! You have to rebuild your app UGH – testing_22 May 16 '22 at 00:03

score 2 · Answer 6 · answered Dec 20 '20 at 18:42

Let's try with @react-native-async-storage/async-storage

And if still error I think you will follow the step in this link

remove the app in the Ios simulator (this is the main step for fix the error)
then cd ios/ && pod install
if React Native <= 0.59 run react-native link @react-native-async-storage/async-storage.
run npm start --reset-cache
reinstall app with react-native run-ios

Hope that can help you.

score 1 · Answer 7 · answered May 26 '23 at 10:01

I faced the same problem while using react native AsyncStorage. Try:

cd ios && pod install || npx pod-install

Note: For react native version higher than 0.60, linking is automatic.

Then just restart the app.

npm start --reset-cache

App should start up and running again.

score 0 · Answer 8 · answered Feb 16 '21 at 10:10

0

running

react-native link @react-native-async-storage/async-storage

after this running Metro with "--reset-cache" verbose and running "react-native run-android" in a fresh cmd resolved my issue

answered Feb 16 '21 at 10:10

irzum shahid

181
2
12

score 0 · Answer 9 · answered Feb 16 '21 at 10:14

Have a try by running the project again by

npx react-native run-android command.

If you are using the iOS Device then:

cd ios && pod install
npx react-native run-ios

if still not works try installing the npm package again and follow the official documentation.

score 0 · Answer 10 · answered May 15 '21 at 19:17

0

In node_modules/@react-native-async-storage/async-storage”/async-storage/src/AsyncStorage.native.js, replace import RCTAsyncStorage from ‘./RCTAsyncStorage’ by import RCTAsyncStorage from ‘./RCTAsyncStorage.expo’;

answered May 15 '21 at 19:17

houcin olmostaf

191
1
12

score 0 · Answer 11 · answered Jul 14 '21 at 10:09

0

In package.json created link:

    "@react-native-community/async-storage": "https://github.com/react-native-async-storage/async-storage",

answered Jul 14 '21 at 10:09

Yanov

655
7
13

score 0 · Answer 12 · answered Jun 07 '22 at 09:25

0

Autolink npx pod-install didn't work for me.

I had to follow the steps for manual linking to eliminate the error.

answered Jun 07 '22 at 09:25

Daniel Danielecki

8,508
6
68
94

score 0 · Answer 13 · answered Jun 13 '22 at 21:20

0

This issue is mostly happen when node_modules folder has been changed by installing new library or some sort of action. Please try removing cache and do yarn install or npm install again

$ npx react-native-clean-project
$ yarn install

answered Jun 13 '22 at 21:20

Kerem Erguner

1

Try to add this line in the file where you add the navigation: import * as React from 'react'; this has worked for me. – Kerem Erguner Jun 13 '22 at 21:20

score 0 · Answer 14 · answered Jul 20 '22 at 17:23

0

try cleaning cache and and restart the server, or you can rebuild the app

npm start --reset-cache
npm run android 
for ios: npm run ios

answered Jul 20 '22 at 17:23

Muhammad Qasim Qadri

574
1
4
15

score 0 · Answer 15 · answered Aug 26 '22 at 15:07

0

Have a try by running the project again by

npx react-native run-android command. If you are using the iOS Device then:

cd ios && pod install

npx react-native run-ios

if still not works try installing the npm package again and follow the official documentation.

answered Aug 26 '22 at 15:07

Muhammad Arslan ali

1

npm start --reset-cache npm run android for ios: npm run ios – Muhammad Arslan ali Aug 26 '22 at 15:07
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 31 '22 at 14:48

score 0 · Answer 16 · answered Apr 04 '23 at 20:53

0

install pods -> pod install
uninstall the app
install the app again.

answered Apr 04 '23 at 20:53

jose920405

7,982
6
45
71

score 0 · Answer 17 · answered Aug 15 '23 at 11:06

I tried the solutions above. My project is expo based react native project.

The only thing that worked was to remove the ios folder. And rebuild everything using npx expo run:ios.

If this doesnt work you could try again with expo install @react-native-async-storage/async-storage and then remove ios folder and rebuild.

NativeModule: AsyncStorage is null, with @RNC/AsyncStorage

17 Answers17