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, Commented May 8, 2019 at 1:48

Tadiwanashe · Accepted Answer · 2019-08-27 13:30:35Z

37

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, 2019 at 13:30

Tadiwanashe

1,25414 silver badges15 bronze badges

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
Commented Mar 4, 2020 at 10:02
6

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

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

Add a comment |

jonnyg23 · Accepted Answer · 2021-04-30 18:12:34Z

16

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, 2021 at 18:12

jonnyg23

2492 silver badges11 bronze badges

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

Add a comment |

Munishkin · Accepted Answer · 2019-05-10 16:40:24Z

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.

vanskins · Accepted Answer · 2019-07-17 12:56:22Z

3

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

answered Jul 17, 2019 at 12:56

vanskins

757 bronze badges

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

Add a comment |

Ehsan Zargar Ershadi · Accepted Answer · 2019-06-13 13:44:14Z

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<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> 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, Commented Jul 28, 2020 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, Commented Jul 28, 2020 at 13:24

tuanngocptn · Accepted Answer · 2020-12-20 18:42:06Z

2

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.

answered Dec 20, 2020 at 18:42

tuanngocptn

1,38114 silver badges22 bronze badges

Add a comment |

Piyush Chandra · Accepted Answer · 2023-05-26 10:01:30Z

1

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.

answered May 26, 2023 at 10:01

Piyush Chandra

1891 silver badge4 bronze badges

Add a comment |

irzum shahid · Accepted Answer · 2021-02-16 10:10:13Z

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, 2021 at 10:10

irzum shahid

1803 silver badges13 bronze badges

Add a comment |

Jignesh Mayani · Accepted Answer · 2021-02-16 10:14:02Z

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 Feb 16, 2021 at 10:14

Jignesh Mayani

7,1151 gold badge21 silver badges37 bronze badges

Add a comment |

houcin olmostaf · Accepted Answer · 2021-05-15 19:17:05Z

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, 2021 at 19:17

houcin olmostaf

2011 silver badge13 bronze badges

Add a comment |

Yanov · Accepted Answer · 2021-07-14 10:09:25Z

0

In package.json created link:

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

answered Jul 14, 2021 at 10:09

Yanov

6747 silver badges13 bronze badges

Add a comment |

Daniel Danielecki - Ditectrev · Accepted Answer · 2022-06-07 09:25:30Z

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 7, 2022 at 9:25

Daniel Danielecki - Ditectrev

9,9746 gold badges77 silver badges106 bronze badges

Add a comment |

Kerem Erguner · Accepted Answer · 2022-06-13 21:20:04Z

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, 2022 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
Commented Jun 13, 2022 at 21:20

Add a comment |

Muhammad Qasim Qadri · Accepted Answer · 2022-07-20 17:23:11Z

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, 2022 at 17:23

Muhammad Qasim Qadri

7222 gold badges6 silver badges16 bronze badges

Add a comment |

Muhammad Arslan ali · Accepted Answer · 2022-08-26 15:07:07Z

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, 2022 at 15:07

Muhammad Arslan ali

1

npm start --reset-cache npm run android for ios: npm run ios
– Muhammad Arslan ali
Commented Aug 26, 2022 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.
– Community Bot
Commented Aug 31, 2022 at 14:48

Add a comment |

jose920405 · Accepted Answer · 2023-04-04 20:53:08Z

0

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

answered Apr 4, 2023 at 20:53

jose920405

8,0306 gold badges46 silver badges74 bronze badges

Add a comment |

jsbisht · Accepted Answer · 2023-08-15 11:06:51Z

0

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.

answered Aug 15, 2023 at 11:06

jsbisht

9,3978 gold badges54 silver badges59 bronze badges

Add a comment |

Abhishek Jain · Accepted Answer · 2024-02-21 05:14:06Z

0

For folks who are still facing this issue on the latest versions onf Expo (v48 and above)

Rebuild the application and generate the development build. This should resolve the issue for you.

answered Feb 21 at 5:14

Abhishek Jain

7277 silver badges28 bronze badges

Add a comment |

Krishn Panchal · Accepted Answer · 2024-03-02 05:35:30Z

0

npx expo-doctor

npx expo install --check

just run this two command for dependency conflicts and see magic, it works fine

answered Mar 2 at 5:35

Krishn Panchal

1

Add a comment |

andrewJames · Accepted Answer · 2024-03-08 04:56:28Z

0

The @react-native-community/react-native-async-storage is probably being used as a dependency for another library. But it's deprecated.

You should use @react-native-async-storage/async-storage instead.

edited Mar 8 at 4:56

andrewJames

21.1k11 gold badges25 silver badges61 bronze badges

answered Mar 7 at 13:36

Bruno Aiolfi

1

Add a comment |

Collectives™ on Stack Overflow

NativeModule: AsyncStorage is null, with @RNC/AsyncStorage

20 Answers 20

Your Answer

Not the answer you're looking for? Browse other questions tagged
react-native
expo
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

20 Answers 20

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged react-nativeexpo or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
react-native
expo
or ask your own question.