async-storage: [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.

Hello Guys, am new to react native i just facing a new problem which i cannot understand what and why its happening ? any one help me with this, I was just try to use AsyncStorage for local storage and its just working fine when i import the AsyncStorage from react-native like : import { AsyncStorage } from ‘react-native’; (its working fine )

But when i try to use by import the AsyncStorage from @react-native-community/async-storage like :

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

it produce error like :

[@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, run pod install in the ios directory and then rebuild and re-run the app.

Why it is Happning with this import ? and I forget to tell that I also run the link command as

react-native link @react-native-community/async-storage after installing Still not working why ?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 67 (20 by maintainers)

Most upvoted comments

Hey @santhanakrishnanstark

Looks like you forgot to re-compile your app with react-native run-android or react-native run-ios (dependending on your target platform).

Let me know if that helped.

thanks.

@IvanFMt

If you’re using expo, you cannot add this package. Use whatever expo gives you (and ignore the warning about deprecation).

what do I do if i use expo-cli, im facing the same issue. (i’m new too)

Guys. If you also suffer from this bug - you can try:

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

and then

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

If you’re using pods, adding this to my Podfile fixed this issue: pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'

@rahimnathwani Hey,

Can you check if your MainApplication has AsyncStoragePackage added in its external packages (like example app here). This is the crucial point for RN to know what native modules are available.

@mikeislearning Right,

Can you confirm that everything is linked correctly (you can check manual linking to confirm correctness).

thanks.

I’m using RN 0.60 and throws this error, isn’t supposed to be autolinking? it isn’t for me somehow, because it throws that error.

@Krizzu

I’m having the same issue on Android (both emulator and physical hardware).

I have tried:

  1. Running react-native link @react-native-community/async-storage in the project. Root. This gives me two ‘info’ messages telling me both iOS module and Android module are already linked.

  2. Following the manual linking guidelines. Here, there was nothing to do except changing the sequence of the lines in settings.gradle (the automatic linking had put the two lines after include ':app', but the manual instructions suggest putting them afterwards.

  3. Re-building and re-starting the app (using react-native run-android)

  4. Running the packager with the --resetCache flag (i.e. node node_modules/react-native/local-cli/cli.js start --resetCache). This command doesn’t have any flag clearCache so perhaps I’ve misunderstood what you mean by ‘packager’? I assumed it’s this command, because this is what gets run by npm start, and what brings up the ‘Running Metro Bundler’ message.

  5. Running npm cache clean --force and running npm install again.

  6. Deleting node_modules and running npm install again.

  7. After steps 5 and 6, running yarn add ... and react-native link @react-native-community/async-storage again.

I don’t have any code that’s using AsyncStorage yet. The only line I’ve added between the last working version of the app, and the one with this message, is import AsyncStorage from '@react-native-community/async-storage'; as the last import at the top of one of my JS files.

I think I’ve tried everything the error message suggested (unless, based on my descriptions above, you can see that I’ve misunderstood something?).

Any ideas?

In my case. I’m using ‘Expo’. I unlinked ‘react-native-community/react-native-async-storage’ and I uninstall it. and then I just used that {AsyncStorage} from ‘react-native’. It works for me. I used it in expo sdk-36(based on react native 0.61.4).

This is my code.

import { createStore, applyMiddleware } from 'redux';
import { dishes } from './dishes'
import { comments } from './comments';
import { leaders } from './leaders';
import { promotions } from './promotions';
import { favorites } from './favorites';
import { persistStore, persistCombineReducers } from 'redux-persist';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { AsyncStorage } from 'react-native';

export const ConfigureStore = () => {

  const config = {
    key: 'root',
    storage: AsyncStorage,
    whitelist: [
      'favorites'
    ]
  };

  const store = createStore(
    persistCombineReducers(config, {
      dishes,
      comments,
      leaders,
      promotions,
      favorites
    }),
    applyMiddleware(thunk, logger)
  );

  const persistor = persistStore(store);

  return { persistor, store };
};

@stacywang0601 Yes, you have to link this package in order to use it. You can do so by using react-native link @react-native-community/async-storage or doing it manually

@Krizzu Yes. Here the relevant lines from mReactNativeHost within my MainApplication.java file:

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

I’ve copy-pasted the above directly from my code, and it appears to be the same as in the docs.

Does the import order matter? AsyncStoragePackage is imported before some of the other default imports:

import com.facebook.react.ReactApplication;
import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

Why is this issue closed? It is still happening. 🙂 Autolinking doesn’t work and even worse react-native link also doesn’t work. In order to make this library work on Android I had to follow these instructions: https://github.com/react-native-community/async-storage/blob/LEGACY/docs/Linking.md

@alcristog auto-linking is not adding any line in your MainApplication. See docs to learn more

I’m having this issuee. But I solved running pod install in ios folder because react native 0.60 has Podfile by default and they add
pod ‘RNCAsyncStorage’, :path => ‘…/node_modules/@react-native-community/async-storage’ Reopen and work fine!

thank you. Have a good day

It’s maddening, it was working fine and apparently this error just came up:

    "@react-native-community/async-storage": "^1.8.0",
    "react-native": "0.61.3",

I fixed the issue on Android by checking the react-native link @react-native-community/async-storage manually.

Depending on which branch of https://github.com/react-native-community/async-storage is active you can find the documentation at the following path, https://github.com/react-native-community/async-storage > docs > Linking.md.

react-native link @react-native-community/async-storage did not update my android/app/src/main/java/com/ryd/MainApplication.java file.

After updating/linking the file manually Android started working.

Thanks a lot @Krizzu , missed out that there should be only one getPackages method. Silly from me. Appreciate your quick response.

@rahimnathwani I’ve made an issue in your repo, telling what to do.

Basically the problem was using Wix’s navigation and not following their install instructions. You ended up with two getPackages, where link used wrong one (not used), hence Async Storage was null.

@Krizzu Thanks so much for looking into this, and for the detailed instructions.

I understand what is wrong now, and how to fix it.

FYI - I just checked the commit where I implemented the installation instructions from wix/react-native-navigation, and the diff for MainActivity is the same as in the web page you linked, except for an extra closing brace[0]:

https://github.com/rahimnathwani/monica-companion/commit/7dcb1896b95c1823f6d0f90e5270772a412383f1#diff-44d72f20b3ff8b741d2664683bb93abd Screenshot from 2019-05-09 01-29-24

[0] I assumed this was a typo on their page, as if I include it, then the number of closing braces added by the diff is larger than the number of opening braces, which cannot be right.

@Krizzu thanks. I sent you an invitation to the private repo where I faced this issue. The branch ‘community-async’ is a snapshot of the time when I was successfully using AsyncStorage from core. To reproduce the error, check out that branch, and change these two imports to from core to RNC:

  • ServerSettings.js line 7
  • PendingList line 6

I am not longer using AsyncStorage directly. Instead I switched to redux-persist, which uses AsyncStorage under the hood, and I will probably also use redux-persist for my next RN project.

FYI - There’s an open issue there suggesting redux-persist hasn’t migrated to the RNC version yet.

After installation make sure to run react-native link @react-native-community/async-storage and react-native run-android .

I had modified the MainApplication per the react-native-navigation, and that seems to have confused the linking. Adding them manually made it work.

@Krizzu I have the same issue. Everything is linked as in manual.

I use react-native 0.57.8