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

[sumanthyedoti]

I upgraded react-native from 0.59.8 to 0.61.5
Unlinked @react-native-community/async-storage
App builds successfully and splash screen comes. After that it says (In Android):

[@RNC/AsyncStorage]: NativeModule: AsyncStorage is null
- Run react-native link @react-native-community/async-storage

When I tried linking it says:

info Linking "@react-native-community/async-storage" iOS dependency
error Linking "@react-native-community/async-storage" failed. 

If I try unlinking again (I already did before as I encountered error while upgrading), it says

info iOS module "@react-native-community/async-storage" is not installed
info Android module "@react-native-community/async-storage" is not installed

Why does it say @react-native-community/async-storage is not installed even after I installed the package?
I tried removing the package and installing again. Same errors

[Krizzu]

@y-sumanth
Have you checked troubleshooting docs?

[sumanthyedoti]

I am facing this on Android

[RunningShadow-007]

I am facing this on Android too.How to resolve this?

[Krizzu]

If you upgraded from < 0.60 version, you need to unlink all your dependencies and then relay just on cli feature. Please read the docs to get more info.

If you started with version 0.60+, then autolinking should kick in. no react-native link is required. You just need to make sure that the setup you have follows the proper setup. Again, here are the docs for autolinking.

If you're below version 0.60, then you have to install the dependency manually or through react-native link name-of-the-library. We have guides for manual linking here

[elirichey]

@Krizzu I'm having the same issue on Android. The only package I have manually installed is react-native-navigation by Wix. Everything else relies on auto-linking.

I also tried to install AsyncStorage v2 to see if that would fix my problem and the issue persists.

[Arjorie]

I'm facing the same problem
I am using 0.61 of react-native and I'm using expo. So it should link automatically but it didn't work, so I tried to unlink but it says that it is not installed. So I tried linking it manually and I found out that some of my android files is missing.

debug Available platforms: iOS, Android
debug Package to link: @react-native-community/async-storage
info Linking "@react-native-community/async-storage" Android dependency
debug Patching D:\Work Files\Freelance\knoCard\android\settings.gradle
error Linking "@react-native-community/async-storage" failed.
Error: ENOENT: no such file or directory, open 'D:\Work Files\Freelance\knoCard\android\settings.gradle'
at Object.openSync (fs.js:440:3)
at Object.readFileSync (fs.js:342:35)
at applyPatch (D:\Work Files\Freelance\knoCard\node_modules\@react-native-community\cli-platform-android\build\link\patches\applyPatch.js:42:51)
at Object.registerNativeAndroidModule [as register] (D:\Work Files\Freelance\knoCard\node_modules\@react-native-community\cli-platform-android\build\link\registerNativeModule.js:31:27)
at D:\Work Files\Freelance\knoCard\node_modules\react-native\node_modules\@react-native-community\cli\build\commands\link\linkDependency.js:63:16
at Array.forEach ()
at linkDependency (D:\Work Files\Freelance\knoCard\node_modules\react-native\node_modules\@react-native-community\cli\build\commands\link\linkDependency.js:36:32)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Object.link [as func] (D:\Work Files\Freelance\knoCard\node_modules\react-native\node_modules\@react-native-community\cli\build\commands\link\link.js:107:5)
at async Command.handleAction (D:\Work Files\Freelance\knoCard\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:164:9)

Are you guys don't have the same files inside your android folder except for app folder?

[Arjorie]

I'm facing the same problem
I am using 0.61 of react-native and I'm using expo. So it should link automatically but it didn't work, so I tried to unlink but it says that it is not installed. So I tried linking it manually and I found out that some of my android files is missing.

debug Available platforms: iOS, Android
debug Package to link: @react-native-community/async-storage
info Linking "@react-native-community/async-storage" Android dependency
debug Patching D:\Work Files\Freelance\knoCard\android\settings.gradle
error Linking "@react-native-community/async-storage" failed.
Error: ENOENT: no such file or directory, open 'D:\Work Files\Freelance\knoCard\android\settings.gradle'
at Object.openSync (fs.js:440:3)
at Object.readFileSync (fs.js:342:35)
at applyPatch (D:\Work Files\Freelance\knoCard\node_modules@react-native-community\cli-platform-android\build\link\patches\applyPatch.js:42:51)
at Object.registerNativeAndroidModule [as register] (D:\Work Files\Freelance\knoCard\node_modules@react-native-community\cli-platform-android\build\link\registerNativeModule.js:31:27)
at D:\Work Files\Freelance\knoCard\node_modules\react-native\node_modules@react-native-community\cli\build\commands\link\linkDependency.js:63:16
at Array.forEach ()
at linkDependency (D:\Work Files\Freelance\knoCard\node_modules\react-native\node_modules@react-native-community\cli\build\commands\link\linkDependency.js:36:32)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Object.link [as func] (D:\Work Files\Freelance\knoCard\node_modules\react-native\node_modules@react-native-community\cli\build\commands\link\link.js:107:5)
at async Command.handleAction (D:\Work Files\Freelance\knoCard\node_modules\react-native\node_modules@react-native-community\cli\build\index.js:164:9)

Are you guys don't have the same files inside your android folder except for app folder?

Now I know why I dont have android folder files, I am Using Expo and it does not support native modules like async-storage because it will look for setting.gradle or other files inside your android folder or ios folder. See https://facebook.github.io/react-native/docs/getting-started at Caveats

In other words, we need to use react-native eject or expo eject

[Krizzu]

@Krizzu I'm having the same issue on Android. The only package I have manually installed is react-native-navigation by Wix. Everything else relies on auto-linking.

I also tried to install AsyncStorage v2 to see if that would fix my problem and the issue persists.

How does your MainApplication's getPackages looks like? PackageList last is responsible for autolinking feature.

Compare android files from this migration guide to your setup - you probably missed some steps to get it to work. Compare .java files and gradle.settings file too.

[elirichey]

@Krizzu I'm having the same issue on Android. The only package I have manually installed is react-native-navigation by Wix. Everything else relies on auto-linking.
I also tried to install AsyncStorage v2 to see if that would fix my problem and the issue persists.

How does your MainApplication's getPackages looks like? PackageList last is responsible for autolinking feature.

Compare android files from this migration guide to your setup - you probably missed some steps to get it to work. Compare .java files and gradle.settings file too.

So here's what I've figured out... I went through line by line to see if I was missing anything and I didn't notice any missing pieces. I was able to manually link AsyncStorage and it worked as expected. But autolink still doesn't work. I know react-native-navigation has changed the config so it's not the same.

Btw, thanks for your help. It's much appreciated!

`// Package name redacted

import com.facebook.react.ReactApplication;
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 java.util.Arrays;
import java.util.List;

import com.brentvatne.react.ReactVideoPackage;

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 getPackages() {
return Arrays.asList(new ReactVideoPackage());
}

@Override
public List createAdditionalReactPackages() {
return getPackages();
}
}`

[hebiao6446]

{"_40":0,"_65":0,"_55":null,"_72":null} WHY ?????

[Arjorie]

Have you tried downgrading @react-native-community/async-storage to its previous working and stable version?
I've encountered so many issues after I install this module. I ejected from expo so I can use this module but no luck. So I reverted back to expo.

But I get another issue regarding with react-native-gesture-handler and my build fails. So I tried changing it from ^1.5.3 to ~1.5.0 and it works perfectly.

Update here if it works and what version. Thanks!

[Djunnni]

How about using "@react-native-community/async-storage": "^1.7.1",
work very well 1.7.1 , my environment is referred to #282

[Krizzu]

@elirichey
I think auto-linking does not work with custom setup from Wix navigation - you have to manually install it. So you need to add an instance of AsyncStorage's Package to your getPackages returned array.

@hebiao6446
This what you get when you print out Promise object. You need to either await it or use .then to get the value

[uncodable]

@Krizzu I'm getting this now from a clean install.

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

I did:

1. yarn add @react-native-community/async-storage
2. Imported as import AsyncStorage from '@react-native-community/async-storage';
3. Errors out straight away, followed the readme.md

[jamesjara]

@elirichey
I think auto-linking does not work with custom setup from Wix navigation - you have to manually install it. So you need to add an instance of AsyncStorage's Package to your getPackages returned array.

@hebiao6446
This what you get when you print out Promise object. You need to either await it or use .then to get the value

Look like yep, this is my case as well

[Krizzu]

@Krizzu I'm getting this now from a clean install.

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

I did:

1. yarn add @react-native-community/async-storage
2. Imported as import AsyncStorage from '@react-native-community/async-storage';
3. Errors out straight away, followed the readme.md

Did you reinstall your app after adding the dependency? for iOS, you also have to run Pod install in ios/ directory

[sumanthyedoti]

I guess I can conclude there is no workaround possible for this issue. So I am going to start new project with latest version and migrate code.
Does that work? What do you guys suggest?

[Krizzu]

@y-sumanth There's definitely something that we're missing something in the project setup.
Can you post your settings.gradle, MainApplication and MainActivity content please?

[uncodable]

@Krizzu This was a clean native app install, did what I would normally do, just seems to hate v36 expo 🤷‍♂

[Krizzu]

@narwy Expo does not support adding external native modules to the project :)

[sumanthyedoti]

@Krizzu
settings.gradle

rootProject.name = '_appName_'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'

MainApplication.java

package in.example._appName_;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import in.example._appName_.BluetoothPackage;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.lang.reflect.InvocationTargetException;
import java.util.Arrays;
import java.util.List;

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

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

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

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

MainActivity.java

package in.example._appName_;

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

[Krizzu]

@y-sumanth Right, so the problem lies in your MainApplication's getPackages method. Autolinked modules are placed in PackageList, which is missing in your case. Checkout this upgrade helper and look for getPackages method call in MainApplication

[sumanthyedoti]

@Krizzu
Thanks, it removed the error.
(But a lot of dependencies kept showing errors one after another. It's a production app. So I created new project and migrated code to move fast)

[elirichey]

I ran into quite a few issues with Wix nav and my Android config. I decided to ditch react-native-navigation and move to react-navigation. Fixed all my problems.

[Krizzu]

@elirichey React Native Navigation comes with no-standard setup for React Native app, hence auto-linking won't work. You need to manually add the necessary packages.