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

Question

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.

Answer 1

Incase someone has this issue this is the solution by @Ashish-Nanda on github:

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.