Aws amplify not working with react-native and expo version 36.0.0

[Versheri]

Describe the bug

I'm currently working on a react-native-app using expoSdk which is supposed to run on web,ios and android. The most challenging part till now has been to setup the navigation which I finally did. Now I added amplify to my project but the project stops working whenever I run it on any mobile device but it works just fine on web. The error I receive is

NetInfo has been removed from React Native

After a lot of trial and error I discovered that the error comes from aws-amplify since it seems to still run with reac-native-community/netinfo. The error only occours when I import something from amplify. I found this in

node_modules\@aws-amplify\core\lib\Util\Reachability.native.js

Deo anyone know how I can resolve this issue?

Here is my package.json if needed

>   "dependencies": {
>     "@expo/vector-icons": "~10.0.0",
>     "aws-amplify": "^2.2.6",
>     "@react-native-community/masked-view": "0.1.5",
>     "@react-navigation/bottom-tabs": "^5.0.0",
>     "@react-navigation/drawer": "^5.2.0",
>     "@react-navigation/native": "^5.0.0",
>     "@react-navigation/stack": "^5.0.0",
>     "@react-navigation/web": "~1.0.0-alpha.9",
>     "expo": "~36.0.0",
>     "expo-asset": "~8.0.0",
>     "expo-constants": "~8.0.0",
>     "expo-font": "~8.0.0",
>     "expo-web-browser": "~8.0.0",
>     "react": "~16.9.0",
>     "react-dom": "~16.9.0",
>     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
>     "react-native-gesture-handler": "~1.5.0",
>     "react-native-reanimated": "^1.7.0",
>     "react-native-safe-area-context": "0.6.0",
>     "react-native-screens": "2.0.0-alpha.12",
>     "react-native-web": "~0.11.7",
>     "react-spring": "^8.0.27",
>     "styled-components": "^5.0.1",
>     "@aws-amplify/api": "^2.1.6",
>     "@aws-amplify/pubsub": "^2.1.7",
>     "@expo/samples": "^3.0.3",
>     "apollo-boost": "^0.4.3",
>     "apollo-cache-inmemory": "^1.6.2",
>     "apollo-client": "^2.6.3",
>     "apollo-link-http": "^1.5.15",
>     "aws-amplify-react-native": "^3.2.2",
>     "aws-appsync": "^1.7.0",
>     "aws-appsync-react": "^1.2.5",
>     "expo-av": "~8.0.0",
>     "expo-camera": "~8.0.0",
>     "expo-file-system": "~8.0.0",
>     "expo-image-picker": "~8.0.1",
>     "expo-permissions": "~8.0.0",
>     "graphql-tag": "^2.10.1",
>     "moment": "^2.20.1",
>     "prop-types": "^15.7.2",
>     "react-apollo": "^2.0.4",
>     "react-native-datepicker": "^1.7.2",
>     "react-native-deck-swiper": "^1.6.7",
>     "react-native-keyboard-aware-scroll-view": "^0.9.1",
>     "react-native-material-dropdown": "^0.11.1",
>     "react-native-modal": "^11.3.1",
>     "react-native-modal-datetime-picker": "^4.13.0",
>     "react-native-modal-dropdown": "^0.6.2",
>     "react-native-paper": "^2.16.0",
>     "react-native-responsive-screen": "^1.4.0",
>     "react-native-segmented-control-tab": "^3.4.1",
>     "react-native-slideable-calendar-strip": "^0.4.0",
>     "react-native-snap-carousel": "^3.8.0",
>     "react-native-sound": "^0.11.0",
>     "react-native-svg": "9.13.3",
>     "react-native-swipe-gestures": "^1.0.3",
>     "react-native-swipeable": "^0.6.0",
>     "react-native-swipeout": "^2.3.3",
>     "react-native-touchable-swipe": "^1.0.0",
>     "react-navigation": "^4.2.2",
>     "react-redux": "^7.2.0",
>     "redux": "^4.0.5",
>     "redux-persist": "^4.10.2",
>     "redux-thunk": "^2.3.0",
>     "uuid": "^3.2.1"
>   },

Any help is much appreciated thanks.

To Reproduce
setup expo project with latest version and install aws-amplify. Then try to import say Auth or Amplify

Other errors tend to be similar to this

[(https://github.com//issues/5010)]

[Ashish-Nanda]

@Versheri Do you still face the issue after doing npm install @react-native-community/netinfo

You can take a look at this comment on the issue #5010 you referenced

[Versheri]

@Ashish-Nanda yes I do have tried installing it several times and different versions but the problem still persist

[Ashish-Nanda]

Can you post a screenshot of your issue? What is the exact error you get?
Also it is not in the package.json you shared. Could you do
npm install @react-native-community/netinfo (make sure it is in your package.json)
rm -rf node_modules
npm install
npm start to run your app

[Versheri]

when I install @react-native-community/netinfo I get the error

react-native-netinfo/react-native-netinfo#232

and when I install react-native-netinfo I get the error

Unable to resolve module @react-native-community/netinfo from node_modules@aws-amplify\core\lib\Util\Reachability.native.js

[Ashish-Nanda]

The issue you linked has a reply from the package maintainer with the reason for the error.
It is likely that one or more of your dependencies is importing NetInfo from React Native core. Looking at your package.json, one of these would be aws-appsync-react where you will need to upgrade to any version above 2.x.x. Remove both aws-appsync-react and aws-appsync from your package.json and install the latest versions (ensure its above 2.x.x). And then do:

npm install --save @react-native-community/netinfo@4.7.0

You need to install this specific version because newer versions cause issues as the API changed.

Give this a try and let us know.

[Versheri]

Thanks so much this solved my problem

[Ashish-Nanda]

Glad that it worked! Will go ahead and close this issue.

[niteshwaghmare]

after installing npm install --save @react-native-community/netinfo@4.7.0

RNCNetInfo.getCurrentState got 2 arguments, expected 3 getting this error

Expo SDK 40

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.