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

santhanakrishnanstark · 2019-04-24T17:15:49Z

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 ?

The text was updated successfully, but these errors were encountered:

krizzu · 2019-04-24T17:47:20Z

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 · 2019-04-24T18:00:17Z

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

krizzu · 2019-04-24T18:06:45Z

@IvanFMt

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

IvanFMt · 2019-04-24T19:08:38Z

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

krizzu · 2019-04-24T19:58:08Z

@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 · 2019-04-24T20:01:54Z

thank you. Have a good day

santhanakrishnanstark · 2019-04-25T14:32:37Z

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 · 2019-04-25T14:45:21Z

@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 · 2019-05-01T17:59:20Z

@krizzu

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

I have tried:

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.
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.
Re-building and re-starting the app (using react-native run-android)
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.
Running npm cache clean --force and running npm install again.
Deleting node_modules and running npm install again.
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 · 2019-05-02T01:43:45Z

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

krizzu · 2019-05-03T11:58:24Z

@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 · 2019-05-03T14:10:25Z

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

I use react-native 0.57.8

rahimnathwani · 2019-05-03T14:34:09Z

@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 · 2019-05-07T00:49:41Z

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 · 2019-05-07T07:09:02Z

@marian37 @rahimnathwani

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

thanks.

ElmirMahmudov · 2019-05-07T13:45:13Z

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

rahimnathwani · 2019-05-07T14:09:21Z

@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 · 2019-05-07T20:23:35Z

@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 · 2019-05-08T17:06:50Z

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 · 2019-05-08T17:12:46Z

@nairabhijit

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

rahimnathwani · 2019-05-08T17:34:40Z

@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 · 2019-05-08T18:00:07Z

@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 · 2019-05-08T18:03:48Z

@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 · 2019-05-08T18:07:38Z

Thanks a lot @krizzu , this resolved the issue.

quantumpotato · 2019-05-11T02:57:07Z

@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 · 2019-05-11T02:59:51Z

@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

fidemin · 2019-05-11T11:24:57Z

@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 · 2019-05-11T12:26:58Z

@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

stacywang0601 · 2019-07-02T00:37:05Z

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 · 2019-07-02T05:58:18Z

@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 · 2019-07-02T09:21:04Z

platform :ios, '9.0'

Dimon70007 · 2019-07-03T16:13:05Z

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 · 2019-07-08T22:56:11Z

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

msqar · 2019-07-25T23:08:42Z

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 · 2019-07-29T03:19:29Z

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 · 2019-08-04T05:15:20Z

@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 · 2019-08-08T18:24:26Z

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 · 2019-08-17T07:28:58Z

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 · 2019-08-19T05:25:01Z

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

trickeyd · 2019-08-20T10:33:38Z

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 · 2019-08-20T11:16:25Z

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 · 2019-08-20T19:47:09Z

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

nolan12345 · 2019-08-24T09:26:40Z

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

alcristog · 2019-09-05T11:01:54Z

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 · 2019-09-06T20:12:05Z

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

krshubham · 2019-09-14T11:20:15Z

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 · 2020-01-07T13:27:48Z

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 · 2020-02-09T02:33:21Z

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 · 2020-02-09T10:11:24Z

@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 · 2020-02-29T16:37:41Z

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 · 2020-05-25T00:13:34Z

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 · 2020-07-22T23:27:24Z

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 · 2020-09-29T06:20:49Z

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

The same issue with Android.
Autolinking is OK.

tido64 · 2020-11-06T21:33:34Z

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

krizzu added the bug Something isn't working label Apr 24, 2019

krizzu closed this as completed Apr 24, 2019

krizzu mentioned this issue Jul 4, 2019

async-storage is not working after importing as '@react-native-comiunity/async-storage #139

Closed

vmurin mentioned this issue Oct 23, 2019

AcquireTokenSilent not working vmurin/react-native-azure-auth#45

Closed

This comment has been minimized.

Sign in to view

react-native-async-storage locked as resolved and limited conversation to collaborators Nov 6, 2020

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

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

Comments

santhanakrishnanstark commented Apr 24, 2019

krizzu commented Apr 24, 2019

IvanFMt commented Apr 24, 2019 • edited Loading

krizzu commented Apr 24, 2019

IvanFMt commented Apr 24, 2019 • edited Loading

krizzu commented Apr 24, 2019

IvanFMt commented Apr 24, 2019

santhanakrishnanstark commented Apr 25, 2019

krizzu commented Apr 25, 2019

rahimnathwani commented May 1, 2019

mikeislearning commented May 2, 2019

krizzu commented May 3, 2019

marian37 commented May 3, 2019

rahimnathwani commented May 3, 2019

djMax commented May 7, 2019

krizzu commented May 7, 2019

ElmirMahmudov commented May 7, 2019

rahimnathwani commented May 7, 2019

krizzu commented May 7, 2019 • edited Loading

nairabhijit commented May 8, 2019

krizzu commented May 8, 2019

rahimnathwani commented May 8, 2019 • edited Loading

nairabhijit commented May 8, 2019

krizzu commented May 8, 2019

nairabhijit commented May 8, 2019

quantumpotato commented May 11, 2019 • edited Loading

quantumpotato commented May 11, 2019

fidemin commented May 11, 2019

krizzu commented May 11, 2019

stacywang0601 commented Jul 2, 2019

krizzu commented Jul 2, 2019

jlala commented Jul 2, 2019

Dimon70007 commented Jul 3, 2019

m4rcoperuano commented Jul 8, 2019

msqar commented Jul 25, 2019

charleycesar commented Jul 29, 2019

wangbing0417 commented Aug 4, 2019

codeithuman commented Aug 8, 2019

priyajainSE commented Aug 17, 2019

krizzu commented Aug 19, 2019

trickeyd commented Aug 20, 2019 • edited Loading

trickeyd commented Aug 20, 2019 • edited Loading

krizzu commented Aug 20, 2019

nolan12345 commented Aug 24, 2019

alcristog commented Sep 5, 2019

krizzu commented Sep 6, 2019

krshubham commented Sep 14, 2019

hsk-kr commented Jan 7, 2020 • edited Loading

developer239 commented Feb 9, 2020

krizzu commented Feb 9, 2020

alex-mironov commented Feb 29, 2020

paulorod07 commented May 25, 2020

weblancaster commented Jul 22, 2020 • edited Loading

mrKorg commented Sep 29, 2020

This comment has been minimized.

tido64 commented Nov 6, 2020

IvanFMt commented Apr 24, 2019 •

edited

Loading

IvanFMt commented Apr 24, 2019 •

edited

Loading

krizzu commented May 7, 2019 •

edited

Loading

rahimnathwani commented May 8, 2019 •

edited

Loading

quantumpotato commented May 11, 2019 •

edited

Loading

trickeyd commented Aug 20, 2019 •

edited

Loading

trickeyd commented Aug 20, 2019 •

edited

Loading

hsk-kr commented Jan 7, 2020 •

edited

Loading

weblancaster commented Jul 22, 2020 •

edited

Loading