DEV Community

Muhammad Saad Bin Nadeem
Muhammad Saad Bin Nadeem

Posted on

Why your React Native app can't connect to your local .NET API (And how to fix it)

#dotnet #networking #reactnative #tutorial

You just built a beautiful .NET Core Web API. You test it in Swagger or Postman, and it works perfectly. It returns data instantly.

So, you open up your React Native Expo app, write a simple axios.get('http://localhost:5257/api/users'), press save, and... 💥 Network Error.

If you are testing on an Android emulator or a physical device, this error will drive you crazy. Here is exactly why it happens and how to set up your environment variables to fix it forever.

The Problem: What is "Localhost"?
When you type localhost inside your React Native code, the code is running inside the mobile device (or emulator).

To your computer, localhost means the computer itself.

To your Android emulator, localhost means the Android device's internal loopback network.

The emulator is literally looking inside itself for a .NET server that doesn't exist, failing, and throwing a Network Error.

The Solution: The Magic IP Addresses
To fix this, you need to point your mobile app to your computer's actual network address, depending on what you are testing on.

  1. Testing on the iOS Simulator (Mac) Apple made this easy. The iOS simulator shares the host machine's network.

URL to use: http://localhost:

  1. Testing on the Android Emulator Google built the Android emulator to run on an isolated virtual router. To break out of that router and talk to your computer's localhost, they provide a specific alias IP.

URL to use: http://10.0.2.2:

  1. Testing on a Physical Device (iPhone or Android via Wi-Fi) If you are running the Expo app on your actual phone, neither localhost nor 10.0.2.2 will work. Your phone needs your computer's local Wi-Fi IP address.

Open your terminal and type ipconfig (Windows) or ifconfig (Mac).

Find your IPv4 address (it usually looks like 192.168.1.X or 10.0.0.X).

URL to use: http://192.168.1.X:
(Note: For this to work, you must ensure your .NET app is listening on your local IP, not just localhost. You can do this by running dotnet run --urls "http://0.0.0.0:")

The Best Practice: Environment Configuration
Instead of manually changing your Axios URLs every time you switch from iOS to Android, set up a dynamic config.

If you are using Expo, create a .env file at the root of your project:

Code snippet

# Change this depending on your testing device!
# iOS Simulator
# EXPO_PUBLIC_API_URL=http://localhost:5257/api

# Android Emulator
EXPO_PUBLIC_API_URL=http://10.0.2.2:5257/api

# Physical Device
# EXPO_PUBLIC_API_URL=http://192.168.1.45:5257/api
Enter fullscreen mode Exit fullscreen mode

Then, configure your Axios instance once, and never touch it again:

TypeScript

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});
Enter fullscreen mode Exit fullscreen mode

export default api;
Now, whenever you switch testing devices, you just uncomment the right line in your .env file, restart your Expo server with npx expo start -c (to clear the cache), and your API will connect flawlessly.

I hope this saved you a few hours of debugging! I build full-stack architectures and post weekly about React Native, .NET Core, and mobile enterprise solutions. Make sure to follow my profile here on Dev.to so you don't miss the next architecture breakdown!

reactnative, #dotnet, #javascript, and #beginners

Top comments (0)