`unable to resolve module @react-native-community/async-storage` broke down my React Native environment

Question

I'm basically having the issue same as here.

https://github.com/firebase/firebase-js-sdk/issues/1899

How I got this error

Since AsyncStorage is deprecated, I tried to install @react-native-community/async-storage following the official documentation

But it failed completely as I got the error above. Thus I wanted to roll back to my previous working version except none of what I did worked.

None of these solved my problem

1. 4 commands suggested on the error screen
2. undoing yarn add with yarn remove
3. I also did npm install @react-native-community/async-storage, did not work. 3.5 so I did npm uninstall @react-native-community/async-storage It was removed, but roll-back did not work.
4. Re-installing the react-native-cli
5. Re-creating a completely new project from scratch, but it is still giving the same error.

I could not find a solution for this. Please help.

Answer 1

Somehow the path to the package got changed.

This helped me:

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

Answer 2

If it's on iOS you probably forgot to do pod install.

Paste this inside ios/Podfile:

  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'

then just do cd ios && pod install

EDIT.

I createad a project from scratch, this are the steps i did to make asyncStorage run on iOS and Android:

1) react-native init AsyncTest

2) npm i @react-native-community/async-storage

(trying to use asyncStorage during this step shows error, but works on Android)

3) Pasted inside Podfile this pod:

  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'

4) From terminal, assuming you are in the project folder do cd ios and pod install

5) Project run succesfully on iOS and works.

react-native version was 0.60.4

This is how the project test App.js was for the test:

import React from 'react';
import { View } from 'react-native';
import AsyncStorageTest from './AsyncStorageTest'
const App = () => {
  return (
    <View>
      <AsyncStorageTest />
    </View>
  );
};

export default App

And AsyncStorageTest is:

import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
import AsyncStorage from '@react-native-community/async-storage';

export class AsyncStorageTest extends Component {
    constructor(props) {
        super(props)
        this.state = {
            storedData: "myValue"
        }
    }


storeData = async () => {
    console.log("inside storeData")
    try {
        await AsyncStorage.setItem('Test', 'TestValue')
    } catch (e) {
        console.log(e)
    }
}

getData = async () => {
    console.log("inside getData")
    try {
        const value = await AsyncStorage.getItem('Test')
        this.setState({ storedData: value })

    } catch (e) {
        // error reading value
    }
}

render() {
    return (
        <View style={{ marginTop: 40 }}>
            <Text> {this.state.storedData}</Text>
            <Button title={"storeData"} onPress={this.storeData}></Button>
            <Button title={"getData"} onPress={this.getData}></Button>
        </View>
    )
}
}


export default AsyncStorageTest

Tested and worked, see if you missed something.

Make sure the that @react-native-community/async-storage is unlinked from your project.