React native Question posted in
The official React Native documentation can be found here.

React native – Android Emulator is showing Network Errors, but iOS Simulator works fine

I’ve never used Android Studio or an Android Emulator before. Recently I download and set them up on my computer to test a project that I am working on using Expo, React Native, and Apollo graphql. When I test my project on an iOS simulator, I have no problem loging-in or moving between screens. However, when I try to log into my app on the android emulator I am getting an error on the device saying invalid credentials and an error in the terminal saying:

{
  "name": "ApolloError",
  "graphQLErrors": [],
  "clientErrors": [],
  "networkError": {
    "line": 21252,
    "column": 33,
    "sourceURL": "http://192.168.0.133:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false"
  },
  "message": "Network request failed",
  "line": 142425,
  "column": 30,
  "sourceURL": "http://192.168.0.133:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false"
}

To get around this, I tried to create a new user, but I’m getting errors when I do that as well.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
 LOG  [Network error]: TypeError: Network request failed
 LOG  true
 LOG  {
  "name": "ApolloError",
  "graphQLErrors": [],
  "clientErrors": [],
  "networkError": {
    "line": 21252,
    "column": 33,
    "sourceURL": "http://192.168.0.133:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false"
  },
  "message": "Network request failed",
  "line": 142425,
  "column": 30,
  "sourceURL": "http://192.168.0.133:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false"
}

In the emulator, it is showing this error in useNavigation.tsx, which is a document I don’t have in my project. (I might have when I first started it, but I’m not 100% sure) Does anyone know why this might be happening? I would really appreciate any help or advice. Thank you!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In case anyone else is having this problem, I was getting this error because I hadn't changed the uri and url from localhost to my ip address in my client.ts document (sets up apollo client). "http://${IP address}:${PORT}/graphql" You have to make this change for the android emulator to work. The iOS Simulator on the other hand, works fine with localhost. I wish the documents had been more clear on this from the beginning it would have saved me a lot of time.

    Additionally, some minor issues that I was having after changing localhost to my ip address dealt with justifyContent, alignContent, etc. I'm used to css, which allows justify-content:left, etc., so even though I realized these styling error weren't doing anything in iOS they weren't causing errors, so I had left a couple of them. In android, these errors will cause your app to crash, so it's important to be cognizant of that.


  2. 0

    You might be missing permission in AndroidManifest.xml. Try adding this permission in the manifest.

        <uses-permission android:name="android.permission.INTERNET" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search