The Problem:
An Expo React Native app is experiencing an Axios network error when interacting with a physical iPhone using the Expo Go app. The same app works fine when accessed through a laptop browser. The error persists even after changing the URL from ‘http://127.0.0.1:8081/predict’ to the device’s IP address. The CORS policy on the backend is enabled. The issue seems to be related to the interaction between the app and the physical device.
The Solutions:
Solution 1: Modify Localhost with Machine’s Local IP Address
In React Native, when using Axios to send a request to a server, it’s essential to understand how networking works on mobile devices. When the app is running on a physical device (e.g., iPhone), it’s separated from the local network that your computer is likely connected to. This means that requests sent to `localhost` will not reach your development server running on your computer.
To resolve this issue, you need to use the machine’s local IP address instead of `localhost`. This IP address represents the device’s physical network address on the local network. You can find your machine’s local IP address by running the command `ifconfig` (for Mac and Linux) or `ipconfig` (for Windows) in your terminal or command prompt.
Once you have the local IP address, modify the URL in the Axios request to use this IP address instead of `localhost`. For example, if your machine’s local IP address is `192.168.1.123`, you would change the request URL from `http://127.0.0.1:8081/predict` to `http://192.168.1.123:8081/predict`.
By using the machine’s local IP address, you’re ensuring that the request is sent to the correct network interface and can reach your development server. This should resolve the Axios network error when interacting with a physical iPhone using the Expo Go app.
Solution 2: Use 10.0.2.2 instead of the IP address
For the given problem in Expo react-native app, the issue was related to the network configuration. Expo uses a proxy server for network requests, which allows us to interact with our local development server using the IP address 10.0.2.2 instead of the actual IP address of our computer.
Hence, to fix the issue:
- In the provided code, update the URL from
http://127.0.0.1:8081/predicttohttp://10.0.2.2:8081/predict. - Make sure that CORS (Cross-Origin Resource Sharing) is enabled on the backend server to allow requests from the Expo app.
This should resolve the Axios network error when interacting with the Expo app from a physical iPhone using the Expo Go app.
Q&A
Why am I getting axios network error when interacting with an expo react native app using an iPhone with expo go app?
Your request is going to your local machine (localhost) instead of your PC/server. Use your machine’s local IP address instead of localhost.
What is the solution to the axios network error when interacting with expo go app?
Send the request to your machine’s IP address instead of localhost, i.e., use http://192.168.1.123:8081/predict instead of http://127.0.0.1:8081/predict.
What should I use instead of localhost for React Native Expo android app?
Use 10.0.2.2 instead of your local IP address.
Video Explanation:
The following video, titled "”axios", provides additional insights and in-depth exploration related to the topics discussed in this post.
This video provides further insights and detailed explanations related to the content discussed in the article.