Most questions that I read on the topic said they receive Warning
while, I receive Error
and I can not run my project.
Today I upgraded expo-sdk from v.45 to v.48. Since then the whole day I am fighting the following error :
Android Bundling complete 118ms ERROR Invariant Violation: AsyncStorage has been removed from react-native core. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'
In my project, I do use AsyncStorage
, however, I have imported it from the correct package. As I researched the issue comes from the fact that firebase-auth
uses AsyncStorage
from the wrong package. Everything I tried and read on the internet did not work for me. Mainly people suggest using const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage)});
I had troubles with that as well (everybody suggest it be imported from firebase/auth/react-native';
however I can’t import it from there)
My main question is why I can not start my expo. Everybody says this issue is a warning however I do receive it as an error and I can not start my project.
My package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"debug": "firebase emulators:start --inspect-functions"
},
"dependencies": {
"@expo/config-plugins": "~6.0.0",
"@react-native-async-storage/async-storage": "1.17.11",
"@react-native-camera-roll/camera-roll": "^5.2.4",
"@react-native-community/datetimepicker": "6.7.3",
"@react-native-community/netinfo": "9.3.7",
"@react-native-community/slider": "4.4.2",
"@react-native-firebase/app": "^17.3.1",
"@react-native-firebase/auth": "^17.3.1",
"@react-navigation/bottom-tabs": "^6.3.2",
"@react-navigation/elements": "^1.3.3",
"@react-navigation/material-top-tabs": "^6.2.2",
"@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.2",
"@react-navigation/web": "^1.0.0-alpha.9",
"axios": "^0.21.1",
"expo": "^48.0.4",
"expo-av": "~13.2.1",
"expo-blur": "~12.2.2",
"expo-camera": "~13.2.1",
"expo-device": "~5.2.1",
"expo-env-info": "^1.0.5",
"expo-file-system": "~15.2.2",
"expo-image-manipulator": "~11.1.1",
"expo-image-picker": "~14.1.1",
"expo-image-picker-multiple": "^1.4.1",
"expo-linking": "~4.0.1",
"expo-location": "~15.1.1",
"expo-media-library": "~15.2.2",
"expo-modules-autolinking": "~1.1.0",
"expo-notifications": "~0.18.1",
"expo-permissions": "~14.1.1",
"expo-server-sdk": "^3.6.0",
"expo-status-bar": "~1.4.4",
"expo-video-player": "^1.6.1",
"expo-video-thumbnails": "~7.2.1",
"firebase": "^8.2.3",
"firebase-admin": "^10.3.0",
"firebase-functions": "^3.21.2",
"formik": "^2.2.9",
"moment": "^2.29.1",
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-infinite-scroll-component": "^6.1.0",
"react-native": "0.71.3",
"react-native-bottomsheet-reanimated": "0.0.39",
"react-native-dropdown-picker": "^4.0.9",
"react-native-expo-cached-image": "^1.3.1",
"react-native-form-validator": "^0.3.5",
"react-native-geocoding": "^0.5.0",
"react-native-gesture-handler": "~2.9.0",
"react-native-gifted-chat": "^0.16.3",
"react-native-google-places-autocomplete": "^2.1.2",
"react-native-image-modal": "^2.0.3",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-interactable-reanimated": "0.0.15",
"react-native-loading-spinner-overlay": "^2.0.0",
"react-native-map-clustering": "^3.4.2",
"react-native-maps": "1.3.2",
"react-native-material-menu": "^2.0.0",
"react-native-mentions": "^1.1.4",
"react-native-modalbox": "^2.0.2",
"react-native-optimized-flatlist": "^1.0.4",
"react-native-orientation": "^3.1.3",
"react-native-pager-view": "6.1.2",
"react-native-paper": "^4.9.2",
"react-native-parsed-text": "0.0.22",
"react-native-popup-dialog": "^0.18.3",
"react-native-progress": "^5.0.0",
"react-native-ratings": "^8.1.0",
"react-native-reanimated": "~2.14.4",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"react-native-svg": "13.4.0",
"react-native-tab-view": "^3.1.1",
"react-native-unimodules": "~0.14.5",
"react-native-vector-icons": "^8.1.0",
"react-native-video": "^2.3.1",
"react-native-video-player": "^0.12.0",
"react-native-walkthrough-tooltip": "^1.3.1",
"react-native-web": "~0.18.11",
"react-navigation": "^4.4.4",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2",
"rn-tooltip": "^3.0.1",
"rne-modal-tooltip": "gist:b28c003d87c619674def0878473338a0",
"unimodules-permissions-interface": "^6.1.0",
"yup": "^0.32.9"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"eslint": "^8.17.0",
"eslint-plugin-react": "^7.30.0"
},
"private": true
}
2
Answers
I had the same issue with packages using deprecated imports,
What I did was install these versions of RNFirebase
Don’t use
expo install
usenpm install or yarn install
to install none-expo packages in the future.old
firebase
packages use old version ofAsyncStorage
which is why you are getting the error. to fix this, update all the packages to the latest versions. from herenow import firebase like this
this will solve the
AsyncStorage
error