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.)

Answer 1

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

Answer 2

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.