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

[santhanakrishnanstark]

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 :

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 ?

[Krizzu]

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]

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

[Krizzu]

@IvanFMt

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

[IvanFMt]

okay thank you for the replies, but asyncStorage will be removed from react native? or i can continue using it ("forever")?

[Krizzu]

@IvanFMt It will be available, no worries. It's just a transition from Core repo to Community packages.

Going to close thread for now, let me know if you need to re-open it.

[IvanFMt]

thank you. Have a good day

[santhanakrishnanstark]

Hi @Krizzu
I have re-compiled many times still its showing the same error , only i get the error by changing import from asyncstorage from react-native to asyncstorage from '@reactantive community'

[Krizzu]

@santhanakrishnanstark

What's the output of react-native link @react-native-community/async-storage for you? It should say it's already linked.

Then, remove the app from emulator/phone and reinstall via react-native run-X, where X is either android or ios.

[rahimnathwani]

@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?

[mikeislearning]

I'm also getting this error, but everything works fine when I import AsyncStorage directly from react-native

[Krizzu]

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

[marian37]

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

I use react-native 0.57.8

[rahimnathwani]

@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;

[djMax]

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]

@marian37 @rahimnathwani

Can you guys provide a separate repo with same setup you have, so I could have into it?

thanks.

[ElmirMahmudov]

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

[rahimnathwani]

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

[Krizzu]

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

[nairabhijit]

I am still facing same issue 'NativeModule: AsyncStorage is null'. I tried everything, I have added react-native-navigation and react-native-vector-icons, Is this the problem?. Please suggest something as I am stuck, any help is appreciated.

[Krizzu]

@nairabhijit

I assume you have run react-native link for AsyncStorage.
Can you post your MainApplication.java please?

[rahimnathwani]

@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

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

[nairabhijit]

@Krizzu yes i did run react-native link. Here is my MainApplication.java file.

package com.rntestapp;

import android.app.Application;

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;

import com.reactnativenavigation.NavigationApplication;
import com.reactnativenavigation.react.NavigationReactNativeHost;
import com.reactnativenavigation.react.ReactGateway;

import com.oblador.vectoricons.VectorIconsPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends NavigationApplication {
  @Override
  protected ReactGateway createReactGateway() {
      ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
          @Override
          protected String getJSMainModuleName() {
              return "index";
          }
      };
      return new ReactGateway(this, isDebug(), host);
  }

  @Override
  public boolean isDebug() {
      return BuildConfig.DEBUG;
  }

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

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
      return getPackages();
  }

  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(),
          new VectorIconsPackage()
      );
    }

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

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

[Krizzu]

@nairabhijit Same situation. You have two getPackages, one belongs to mReactNativeHost. It contains your packages (native modules). Move them out to the first method (where it says // Add additional packages you require here).

[nairabhijit]

Thanks a lot @Krizzu , this resolved the issue.

[quantumpotato]

@santhanakrishnanstark

What's the output of react-native link @react-native-community/async-storage for you? It should say it's already linked.

No response, but I still get this error in the simulator.

[quantumpotato]

@marian37 @rahimnathwani

Can you guys provide a separate repo with same setup you have, so I could have into it?

thanks.

https://github.com/QuantumProductions/dirt/tree/tokens

from project directory

react-native link @react-native-community/async-storage
== no response

expo start
hit i to open iOS

[yhmin84]

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

react-native link dosen't add import AsyncStoragePackage to MainApplication... should be done manually

[Krizzu]

@quantumpotato You won't get this lib running with expo, as expo does not allow to extend its native module packages.

@yhmin84 If it's the issue, I'd create an new issue on RN-CLI repo

[yhmin84]

@Krizzu

Some react-native packages add explanation about adding code for MainApplication.java (case by case). I think extra explanation for this in main README.md file is OK.

[quantumpotato]

Yep, thank you -- I "ejected" and it works now.

[Krizzu]

@yhmin84 Yup, we have it here, in manual linking guide

@quantumpotato 👍

[nairabhijit]

I still get this error

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

in error log react-native log-android , though now the scenario is different. I am using library react-native-push-notification for push notification integration in my mobile app, when the notification is received I get this error and the app crashes. Can someone help me out on this as I did debugged this for two days now without any progress. Any help would be appreciated.

[Krizzu]

@nairabhijit I guess it's on Android, right? Can you post your MainApplication.java content? Looks like AS is not linked correctly

[nairabhijit]

Yes its on Android, it works for me until I receive a notification and the app crashes with the error

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

Here is my MainApplication.java file.

package com.rntestapp;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
import org.wonday.pdf.RCTPdfView;
import com.RNFetchBlob.RNFetchBlobPackage;
import com.airbnb.android.react.maps.MapsPackage;
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;

import com.reactnativenavigation.NavigationApplication;
import com.reactnativenavigation.react.NavigationReactNativeHost;
import com.reactnativenavigation.react.ReactGateway;

import com.oblador.vectoricons.VectorIconsPackage;


import java.util.Arrays;
import java.util.List;

public class MainApplication extends NavigationApplication {
  @Override
  protected ReactGateway createReactGateway() {
      ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
          @Override
          protected String getJSMainModuleName() {
              return "index";
          }
      };
      return new ReactGateway(this, isDebug(), host);
  }

  @Override
  public boolean isDebug() {
      return BuildConfig.DEBUG;
  }

  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(),
          new VectorIconsPackage(),
          new MapsPackage(),
          new RCTPdfView(),
          new RNFetchBlobPackage(),
          new ReactNativePushNotificationPackage()
      );
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
      return getPackages();
  }

  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()
      );
    }

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

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

[Krizzu]

@nairabhijit Just noticed you have the same issue as before. I've already answered this here.

[nairabhijit]

Yes i did the same, do you mean to say I have to also move new MainReactPackage() to the outer getPackages method.

[Krizzu]

@nairabhijit you should have only one getPackages.

https://wix.github.io/react-native-navigation/#/docs/Installing?id=_7-update-mainapplicationjava

[nairabhijit]

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

[nikhil-tayal]

I am not using Asyncstorage but using react-native-navigation but still i am getting this erroe

[nairabhijit]

@nikhil-tayal Even I am using react-native-navigation and I ain't facing any issues. Please check if you have configured the package correctly and do check the MainActivity.java file as errors are most bound to appear in this file.

[stacywang0601]

I'm having this issue when I upgrade the storage of redux-persist

See issue here https://github.com/rt2zz/redux-persist/

But when I use

import AsyncStorage from '@react-native-community/async-storage';
const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  ...
};

I got error saying [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.
Do I have to have access of native layer to use this package?

[Krizzu]

@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

[jlala]

platform :ios, '9.0'

[Dimon70007]

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

[m4rcoperuano]

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

[msqar]

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.

[charleycesar]

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!

[wangbing0417]

@m4rcoperuano hi guys, thanks a lot

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

[codeithuman]

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.

[priyajainSE]

I am using expo and facing the same null problem for asyncstorage. I installed and linked @react-native-community/async-storage, even after that it shows same error. I removed this and used {AsyncStorage} from 'react-native' in my expo app, but problem persists.
Please someone help to find the solution.

[Krizzu]

@priyajainSE You can't add new native modules with Expo, so this package won't work for ya.

[trickeyd]

I was getting this problem in the app but manual linking fixed it, but now it is null in my jest unit tests. I can mock it of course but it is extremely worrying if it is there sometimes and not others.

Has anyone else found this?

RN: 0.59.10

[trickeyd]

I mocked the module as would need to anyway, but it still worries me that it is inexplicably null during testing...
Anyway - if yo want the Jest mock it is here:
https://stackoverflow.com/a/57572377/4924767

[Krizzu]

@trickeyd
https://github.com/react-native-community/async-storage/blob/LEGACY/docs/Jest-integration.md

[nolan12345]

问题解决方案
1，react-native unlink @react-native-community/async-storage
2，cd ios && pod install

[alcristog]

In my case the automatic linking did not add any line into the MainApplication.java file. I had to manually type the import and the corresponding package in the getPackages() method, just as it is explained in point 3 (Android) at:

https://github.com/react-native-community/async-storage/blob/LEGACY/docs/Linking.md

You have to rebuild the project again with react-native run-android to make it work.

[Krizzu]

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

[krshubham]

I was also facing this issue on iOS, after reading the instructions carefully, it says you can do pod install in the ios/ directory.

Did that and rebuild the app, its working fine 😄

[hsk-kr]

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 };
};

[developer239]

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

[Krizzu]

@developer239 If auto-linking is not working for you, I'd suggest to check out docs about how it works and what setup you have to have in order to get it working. Most devs have problem after upgrading from <=0.59 to 0.60+. This is because there are changes to native code that need to be addressed in order to get auto linking work.

[alex-mironov]

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",

[paulorod07]

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",

You Resolved it?

[weblancaster]

I had this issue for a very brief moment but if someone else if having the same here is some info.

// tip: always use exact version to mitigate issues like these
"@react-native-community/async-storage": "1.11.0",
"react-native": "0.63.1",

I ran pod install inside the ios folder and then started having this issue. So I quit the RN server and ios simulator then ran npm start and npm run ios.

After that everything was fine.

[mrKorg]

"@react-native-community/async-storage": "^1.12.0",
"react-native": "0.63.2",

The same issue with Android.
Autolinking is OK.

[BrandedNomad]

Had the same issue. Resolved it by importing AsyncStorage from 'react-native' instead of "@react-native-community/async-storage". My app works fine now.

[tido64]

@BrandedNomad: I've hidden your comment because it's just plain wrong. Reverting to AsyncStorage in react-native means that you're 1) no longer using @react-native-async-storage/async-storage, and 2) are not addressing the underlying issue which is most likely related to not setting up your build correctly, e.g. with regards to autolinking.

If you're still hitting this issue, please file a new issue with your environment information and a repro so we can help you debug this properly.