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

[srivatsav]

AsyncStorage is working great when using the following import :-
import { AsyncStorage } from 'react-native';

But when I try importing the AsyncStorage from @react-native-community/async-storage :
import AsyncStorage from '@react-native-community/async-storage';

it gives me an error :
I haven't run *react-native link @react-native-community/async-storage * because I believe react native with version >= 0.60 should automatically link right ? But it won't link automatically.
Please help me if I am missing something here ..!!!

[Krizzu]

Hi @srivatsav

Have you rebuild your app with run-android command?

[srivatsav]

Hi @Krizzu yes. I did it several times. This is happening as part of migration of our project's react native from 0.57 to 0.60. Infact this is happening in iOS as well not only android.

[Krizzu]

Have you used this lib before migrating to 0.60?

[srivatsav]

Nope, I didn't. While migrating it said AsyncStorage will be removed from 'react-native' and the new AsyncStorage should be imported from @react-native-community/async-storage. Earlier I used it directly from 'react-native' only.

[Krizzu]

Can you provide content of your MainApplication.java file?

[srivatsav]

Here it is..!! It's not getting linked automatically. I can't find that async storage in the getPackages() method.

public class MainApplication extends Application implements ReactApplication {

  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 RNGestureHandlerPackage(),
            new NetInfoPackage(),            
            new RNDeviceInfo(),
            new RNFetchBlobPackage(),          
            new RNSharedPreferencesReactPackage(),            
            new SvgPackage(), new LinearGradientPackage(),
            new ImageResizerPackage(), new ReactNativeDocumentPicker(), new RNCardViewPackage(),
            new RNFSPackage(), new ImagePickerPackage(), new BarcodeScannerPackage(),
            new VectorIconsPackage(), new SmsRetrieverPackager(), new ImageUtilsPackage(), new OpenSettingsPackage(),
            new RNGoogleSigninPackage(), new BackgroundUploadPackage()
      );
    }

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

@srivatsav I'm not quite sure if getPackages should be there at all - maybe this is a blocker for autolinking? 🤔

cc @thymikee

[thymikee]

@srivatsav you're using an implementation of getPackages from RN 0.59, it changed in 0.60. Please see: https://github.com/facebook/react-native/blob/eec4dc6b7287c5a3536ca18b553e3153a0aba103/template/android/app/src/main/java/com/helloworld/MainApplication.java#L24-L31

[thymikee]

Also make sure to verify your changes with Upgrade Helper: https://react-native-community.github.io/upgrade-helper/?from=0.57.8&to=0.60.4 which will show you the diffs for what changed in the RN default template.

[srivatsav]

@thymikee @Krizzu Thanks a ton..!! It was the getPackages

[moshemoses]

@Krizzu and @thymikee I've been getting the same error as pictured above except I'm using IOS. I was having some issues with a library that I ultimately removed from my npm packages and unlinked. All of a sudden started getting the other error about automatic linking and so I unlinked all packages listed in the error. Now I'm getting the above error even though I am using RN .60.

Any ideas? Thanks!

[thymikee]

@moshemoses did you run pod install in ios dir and opened .xcworkspace file?

[moshemoses]

@thymikee I've been using npm as my package manager, I assumed that precluded CocoaPods, is that correct? (I'm obviously a bit of a newbie in this regard). Should I run it anyways?

[thymikee]

Unfortunately RN development is not as straight forward as using JS tooling only (unless you use Expo). You need to have CocoaPods installed and install iOS deps using it. It's a change that happened in RN 0.60 default template.

[moshemoses]

Gotcha, thanks for clarifying. I've installed cocoapods and Iv'e got that .xcworkspace file.

I ran react-native run-ios and now I'm getting other errors saying that myProejctTest.m cannot be found. I'm pretty sure that file is where its supposed to be.

[msqar]

I run perfectly on iOS, no need of pod, the problem is on Android for me. Any idea anyone? please i've been struggling for more than a week.

[Jakuubzmeko]

Android is problem form me as well, I had the problem on iOs too but somehow repaired it but not on android

[Krizzu]

@msqar @Jakuubzmeko I'd need more info of what issue you have, what RN version you use, how you link the library.

[msqar]

@Krizzu hi, thanks for replying. I had to link it manually on both android and iOS. Im using RN 0.60.4, i know i should have used auto-linking but it's not working properly for me.
This is the async-storage version that i'm using: "@react-native-community/async-storage": "^1.6.1",

The alert is being shown in Android only, not on iOS. There might be something wrong during the manual installation. If you need it, i can give you all the changes i made on my Android project to link it.

Also, i might be creating a RN 0.60.5 dummy project and moving all my code into that fresh project. To avoid having these type of errors while installing.

[Krizzu]

@msqar You can compare your MainApplication.java file with RN 0.60+ one, where autolinking is handled.

List<ReactPackage> packages = new PackageList(this).getPackages(); line gets all automatically linked packages and uses them. Those packages are linked prior to app start, during the build time.

[msqar]

@Krizzu ohh gotcha. This is my getPackages function now.

protected List<ReactPackage> getPackages() {
        // Add additional packages you require here
        // No need to add RnnPackage and MainReactPackage
        return Arrays.<ReactPackage>asList(
            new VectorIconsPackage(),
            new RNI18nPackage(),
            new AsyncStoragePackage(),
            new GeolocationPackage(),
            new ReactSliderPackage(),
            new ImagePickerPackage(),
            new LinearGradientPackage(),
            new SvgPackage(),
            new FBSDKPackage(),
            new LottiePackage()
        );
    }

It seems that it was different after all.
I need to add the ones that are showing errors on auto-linking while doing react-native run-android. And async storage or sentry are throwing it among others.
So, if a package supports autolinking. Should i also remove all the manual installation that i did?
Modifications in AndroidManifest.xml, both build.gradle files, etc ?

Thanks again for taking your time to help us :)

[Krizzu]

@msqar AFAIK, using List<ReactPackage> packages = new PackageList(this).getPackages(); should do the trick. You don't have to have additional projects in settings.gradle and build.gradle. Just unlink each one of them and run build.

Give it a go and let me know.

[msqar]

@Krizzu you're a God! thanks man! i upgraded as it was supposed to, added exactly everything, now my iOS works and autolinks with cocoapods, and android autolinks as well! no more warnings, no more nothing! everything super smooth!

[muhammadwafa]

Same issue on react-native 0.61.5 and also I am using react-native-navigation

[Krizzu]

@muhammadwafa In that case, you'll have to manually link the package. Check out the auto linking docs for help.

[sshanzel]

Hi @Krizzu, i am actually having this in a different scenario (RN .61.5). When i build my app initially it will work fine, then when i debug my app and encounter some error that will be the time this thing will show up, which is why i can't manually link the package since at my initial build it will say i have duplicated the package instantiation. Do you any thoughts about this? Thanks a lot in advance!