NativeModule: AsyncStorage is null

rehmanali-vaival commented 2 years ago

What happened?

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

To fix this issue try these steps:

• Rebuild and restart the app.

• Run the packager with --reset-cache flag.

• If you are using CocoaPods on iOS, run pod install in the ios directory and then rebuild and re-run the app.

• If this happens while testing with Jest, check out docs how to integrate AsyncStorage with it: https://react-native-async-storage.github.io/async-storage/docs/advanced/jest

If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-async-storage/async-storage/issues LOG [TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[13], "../../utils/AsyncStorage/asyncstore").setItem')]

Version

1.16.1

What platforms are you seeing this issue on?

[ ] Android
[x] iOS
[ ] macOS
[ ] Windows
[ ] web

System Information

OS: macOS 11.2.3
    CPU: (8) arm64 Apple M1
    Memory: 822.64 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh

Steps to Reproduce

When I try to setItem it returns me this error always.

liquidvisual commented 2 years ago

Exact same issue, I'm not sure what else to try.

In the browser console the object is defined, but in the terminal I get Error: [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null. I've tried all the suggestions, including rebuilding npm, pod update, manually linking etc

krizzu commented 2 years ago

Hey, Can you please provide an example repo where you're able to reproduce the issue? 🙏

tobe-continued commented 2 years ago

I having the same issue when i run jest, i can't provide a example repo, because it's a repository on my work. But i can provide my package.json.

package.json

{
  "version": "0.2.0",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "node ./dotenv.js && expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "lint": "eslint src/**",
    "postinstall": "patch-package",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo",
    "automock": false,
    "resetMocks": false,
    "setupFiles": [
      "./setupJest.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
    ],
    "setupTestFrameworkScriptFile": "./setupTests.js",
    "verbose": true,
    "transform": {
      "^.+\\.jsx?$": "babel-jest",
      "^.+\\.svg$": "jest-svg-transformer"
    }
  },
  "bin": {
    "eslint": "./node_modules/eslint/bin/eslint.js"
  },
  "dependencies": {
    "@babel/preset-typescript": "^7.16.7",
    "@expo/vector-icons": "^12.0.0",
    "@react-native-async-storage/async-storage": "~1.15.12",
    "@react-native-community/netinfo": "7.1.3",
    "@react-native-picker/picker": "2.2.1",
    "@react-navigation/stack": "^6.0.7",
    "apollo-cache-inmemory": "^1.2.5",
    "apollo-client": "^2.3.5",
    "apollo-link": "^1.2.3",
    "apollo-link-context": "^1.0.8",
    "apollo-link-error": "^1.1.1",
    "apollo-link-http": "^1.5.4",
    "apollo-link-retry": "^2.2.5",
    "apollo-upload-client": "^14.1.3",
    "axios": "^0.18.0",
    "blob-util": "^2.0.2",
    "crypto-js": "^3.1.9-1",
    "expo": "^44.0.0",
    "expo-application": "~4.0.1",
    "expo-asset": "~8.4.6",
    "expo-clipboard": "~2.1.0",
    "expo-constants": "~13.0.1",
    "expo-device": "~4.1.0",
    "expo-document-picker": "~10.1.3",
    "expo-file-system": "~13.1.4",
    "expo-font": "~10.0.4",
    "expo-intent-launcher": "~10.1.0",
    "expo-linear-gradient": "~11.0.3",
    "expo-linking": "~3.0.0",
    "expo-location": "~14.0.1",
    "expo-notifications": "~0.14.0",
    "expo-screen-orientation": "~4.1.1",
    "expo-sharing": "~10.1.0",
    "expo-splash-screen": "~0.14.1",
    "expo-updates": "~0.11.6",
    "expo-web-browser": "~10.1.0",
    "firebase": "8.2.3",
    "formik": "^1.4.2",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.9.2",
    "i18n-js": "^3.1.0",
    "jest": "^26.6.3",
    "jest-expo": "^44.0.1",
    "jest-fetch-mock": "^3.0.3",
    "lodash": "^4.17.11",
    "lottie-react-native": "5.0.1",
    "moment": "^2.22.1",
    "moment-range": "^4.0.1",
    "prop-types": "^15.6.1",
    "react": "17.0.1",
    "react-native": "0.64.3",
    "react-native-calendars": "^1.22.0",
    "react-native-collapsible": "^1.5.0",
    "react-native-dash": "^0.0.9",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-pager-view": "5.4.9",
    "react-native-paper": "^4.9.2",
    "react-native-paper-dropdown": "^1.0.7",
    "react-native-paper-tabs": "^0.7.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-section-list-get-item-layout": "^2.2.3",
    "react-native-svg": "12.1.1",
    "react-native-swipe-list-view": "^3.2.6",
    "react-native-webview": "11.15.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.1",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.2.0",
    "rxjs": "^6.3.1",
    "yup": "^0.26.7"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/runtime": "^7.9.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-module-resolver": "^3.1.0",
    "babel-preset-expo": "8.3.0",
    "babel-preset-react-native": "^4.0.1",
    "eslint": "^5.12.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-import-resolver-babel-module": "5",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-react-native": "^3.2.1",
    "jest-svg-transformer": "^1.0.0",
    "patch-package": "^6.2.2",
    "postinstall-postinstall": "^2.1.0",
    "react-test-renderer": "^16.2.0",
    "regenerator-runtime": "^0.13.1"
  }
}

setupJest.js

import jest from 'jest';
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';

require('jest-fetch-mock').enableMocks();

jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);

babel.config.js

module.exports = (api) => {
  api.cache(true);

  const presets = [
    'babel-preset-expo',
  ];
  const plugins = [
    ['module-resolver', {
      root: ['./'],
      alias: {
        _assets: './assets',
        _components: './src/components',
        _config: './src/config',
        _screens: './src/screens',
        _utils: './src/utils',
      },
    }],
    'react-native-paper/babel',
    '@babel/plugin-proposal-export-namespace-from',
    'react-native-reanimated/plugin',
  ];

  return {
    presets,
    plugins,
  };
};

overriding of async-storage in utils/localStorage.js

import AsyncStorage from '@react-native-async-storage/async-storage';

// export const getItem = key => (AsyncStorage.getItem(key));
// export const setItem = (key, value) => AsyncStorage.setItem(key, value);

// transform array [['key': 'value'], ['key2', 'value2']]
// to object {'key': 'value', 'key2': 'value'}
AsyncStorage.multiArrayToObject = (stores, separator) => (
  stores.reduce((obj, item) => {
    const object = obj;
    const [k, v] = item;
    object[k.split(separator).pop() || k] = v;
    return object;
  }, {})
);

export default AsyncStorage;

App.js


  /* */
  async componentDidMount() {
    await this.loadNotifications({
      limit: 10,
      offset: 0,
    });
    const preview = await AsyncStorage.getItem('@preview');
    if (!preview) {
      await AsyncStorage.setItem('@preview', JSON.stringify(true));
    }
    this.setState({ preview: JSON.parse(await AsyncStorage.getItem('@preview')) });
  }
  /* */
  disablePreview = async () => {
    await AsyncStorage.setItem('@preview', JSON.stringify(false));
    this.setState({ preview: false });
  }

__TEST__/App.js

import { enableFetchMocks } from 'jest-fetch-mock'
import React from 'react';
import renderer from 'react-test-renderer';

import App from '../App';
enableFetchMocks();
beforeEach(() => {
  // if you have an existing `beforeEach` just add the following line to it
  fetchMock.doMock()
})

it('renders correctly', () => {
  const tree = renderer.create(<App />);
});

krizzu commented 2 years ago

The most common issue with AsyncStorage is null is because the app was not rebuild after installing the library. And I don't mean to restart bundler, but rather install an app on the device/simulator. So best way to handle this is:

Remove app from simulator/device
Install app again

matanrokach commented 2 years ago

I am experiencing this issue now as well. Did anyone succeed to resolve it?

matt-dalton commented 2 years ago

We've had the same issue when upgrading from React Native 0.63 -> 0.64

It seems like the React Native NativeModule structure has changed with this release. And something (perhaps related to Native Modules?) seems to have stopped our async storage mock working.

Async storage mock at __mocks__/@react-native-async-storage/async-storage.js:

export default from '@react-native-async-storage/async-storage/jest/async-storage-mock'

React Native mock:

const ReactNative = jest.requireActual('react-native')

const View = require('react-native/Libraries/Components/View/View')

// Taken from https://gist.github.com/lededje/1d6f2ee009ae63e25cbec7318240e4ed
const createMockComponent = (name) => {
    const mockedComponent = ({ children }) => <View>{children}</View>
    mockedComponent.displayName = name
    return mockedComponent
}

export const KeyboardAvoidingView = createMockComponent('KeyboardAvoidingView')

ReactNative.NativeModules.ProdChecker = {
    isTestflight: () => Promise.resolve('PRODUCTION'),
}

ReactNative.NativeModules.SettingsManager = {
    settings: {
        AppleLocal: 'pt-br',
        AppleLanguages: ['pt-br'],
    },
    getConstants: () => ({
        settings: {
            AppleLocal: 'pt-br',
            AppleLanguages: ['pt-br'],
        },
    }),
}

const Keyboard = {
    addListener: () => ({
        remove: jest.fn(),
    }),
    dismiss: jest.fn(),
    removeListener: jest.fn(),
}

const Platform = {
    OS: 'ios',
    Version: 14,
}

module.exports = {
    ...ReactNative,
    __esModule: true,
    Platform,
    Keyboard,
}

I'm running a very simple test that should use the mock :

it.only('should getAuthToken correctly', async () => {
     await AsyncStorage.setItem(AppConfig.TOKEN_STORAGE_KEY, testKeyStr)
     const result = await AsyncStorageController.getAuthToken()
     expect(result).to.equal(testKeyStr)
})

i've correctly installed and built the library and the app is working fine in the simulator, so it just seems like the mock isn't being applied (or is overwritten) for some reason.

Has anyone found any solutions/workarounds? Or anything I can try to debug?

lprhodes commented 2 years ago

Seeing this issue too with the update to 0.6.4. @matt-dalton were you able to find a work-around?

matt-dalton commented 2 years ago

I did actually manage to fix this issue, before getting stuck on others (unrelated to this library). Not 100% sure of what helped, but it was likely one of:

Upgrading React Native from 0.66.2 -> 0.66.4
Upgrading metro-react-native-babel-preset to 0.70.3

I also had my own React Native mock I was maintaining before realising React Native had its own, so I deleted my own mock. One of those things seemed to work.

GuiLeme commented 2 years ago

Same error here. I am experiencing it on an Android simulator and I didn't do any tests so far, just imported the dependency, saved it, and the error popped out on my screen. I am using version 1.17.7 for the async storage, and 0.68.2 for RN.

paradite commented 2 years ago

The most common issue with AsyncStorage is null is because the app was not rebuild after installing the library. And I don't mean to restart bundler, but rather install an app on the device/simulator. So best way to handle this is:

Remove app from simulator/device

Install app again

This is the correct solution. I had this problem with both Expo Go and custom dev client. I was able to get both working successfully by reinstalling them manually on my mobile phone.

I am not sure why this is required, or why reinstalling fixes the issue though. Hope someone can provide an explanation.

nickticket2u commented 2 years ago

for expo, solution is to create a new blank expo project with latest expo sdk, then re-add your project files and package.

galihlprakoso commented 1 year ago

I'm also experiencing this issue on Android release variant. Anyone have any idea about this? It's pretty fine working on my other apps and this app but on debug mode, but somehow not in my current app in release mode. In emulator, and on other device. Still don't know how. Already following any suggestions but got no result.

Even, the module is exists on android studio.

galihlprakoso commented 1 year ago

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    "@babel/preset-react",
    "@babel/preset-flow",
  ],
  plugins: ['react-native-reanimated/plugin'],
  env: {
    production: {
      plugins: [
        'react-native-paper/babel',
        // 'babel-plugin-react-native-web', <--- this line
      ],
    },
  },
};

Turns out it was because I accidentally add this line. on babel.config.js .

FerrariAndrea commented 1 year ago

Hi guys, same issue, but I remember that before had the error of this issue, I was stuck on the import error on the react-native code something like unable to resolve module at line import AsyncStorage from '@react-native-async-storage/async-storage';. Then I just power-off my PC and when I relaunched all the stuff:

npx react-native start
npx react-native run-ios

I got from Metro: Error: [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.

I resolve this issue following these steps:

close/kill all the services
delete the app from the simulators
npm instal --reset-cache (i need to use --force too, so-> npm instal --reset-cache --force)
cd ios
pod install
cd ..
npx react-native start
npx react-native run-ios
npx react-native run-android

Now it is working for me.

Main project info:

"@react-native-async-storage/async-storage": "^1.17.10", "react-native": "0.69.5", "react": "18.0.0",

node version: v18.8.0

Muzaffar2807 commented 1 year ago

It is not fixing the issue, I am using expo cli for my project. created a blank expo project but it is not fixing

ghost commented 1 year ago

it's staying with me during the unit tests, I'm following the documentation to configure the mock but the react native selfbinding message persists:

 @react-native-async-storage/async-storage: "^1.17.11",
  react-native: "0.70.6",
  jest: "^26.6.3",

Dovakeidy commented 1 year ago

For people who use react-native-web, my problem was the babel plugin of react-native-web that I had put in the babel.config.js. Removing it solved my problem.

// Remove this in babel.config.js
    [
      'react-native-web',
      {
        commonjs : true,
      },
    ]

And put it instead in the webpack configuration

// webpack.config.js
  module: {
    rules: [
      {
        test: /\.(tsx|ts|jsx|js|mjs)$/,
        include: [
          path.resolve(appDirectory, 'index.web.js'),
          path.resolve(appDirectory, 'src'),
          // path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
        ],
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['@babel/preset-typescript', 'module:metro-react-native-babel-preset'],
            plugins: ['react-native-web'],
          },
        },
      },
  }

Andressaray commented 1 year ago

I solved this error, thanks Chat gpt, you have to do the following:

cd android && ./gradlew clean && cd ..

2.In MainApplication.java

Add this line: import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;

and after: add newAsyncStoragePackage(),

And run your app again.

yash-agarwal0326 commented 1 year ago

Hello there, solution works for me

Run in project directory: "npx pod-install".

king0fCode commented 1 year ago

The most common issue with AsyncStorage is null is because the app was not rebuild after installing the library. And I don't mean to restart bundler, but rather install an app on the device/simulator. So best way to handle this is:
* Remove app from simulator/device

* Install app again

this solution works if the issue was on "expo start --dev-client"

dev-lamichhane commented 1 year ago

i've been stuck on this problem for almost 2 days now. So far i have tried the following:

shutting the app, running ./gradlew clean inside android folder, restarting app with --reset-cache flag

importing the packege in MainApplication.java : import com.reactnativeasyncstorage.AsyncStoragePackage; then

    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      packages.add(new AsyncStoragePackage());
      return packages;
    }

I came across it when i downloaded @react-native-async-storage/async-storage as per the documention for setting up aws-amplify for react native. I am not using an emulator, but a real android device. if it matters, here some system info: nodejs 18.15.0 npm 8.19.2 react 18.2.0 react-native 0.71.6 @react-native-async-storage/async-storage 1.18.1

I'd really appreciate any help. Thanks!

krizzu commented 1 year ago

@davelamichhane Have you re-installed your App after installing async storage? Running a dev server is not enough

dev-lamichhane commented 1 year ago

I've been on this since yesterday and i've installed, reinstalled, uninstalled a few versions of my app several times. But there is a slim chance that i never reinstalled it right after installing async storage. Will try that next and get back at you. Thanks

dev-lamichhane commented 1 year ago

Edit: @krizzu it was indeed a re-installation issue. I had actually tried to "link" @react-native-async-storage/async-storage with instructions for linking react-native-community/async-storage, and when i got rid of that and re-installed my app, it worked. Thanks a lot buddy!

krizzu commented 1 year ago

Great to hear!

Gerald-ux-ux commented 5 days ago

@dev-lamichhane what does re installation mean cause i have deleted the app on the emulator and npx expo run:android again but no luck

react-native-async-storage / async-storage