Connecting React Native to localhost
Tags: reactnative, todayilearned, testing, api
Published: 2020-04-28 09:11:45

---
title: Connecting React Native to localhost
published: true
date: 2020-04-28 08:44:21 UTC
tags: reactnative,til,testing,api
canonical_url: https://revs.runtime-revolution.com/connecting-react-native-to-localhost-65e7ddf43d02
---

This is something that happens to me on every React Native project.

**_How can I make a request to my local API (that runs on localhost)_**?

To be able to do a request to your local machine you have to do two things.

First, you must use your **machine IP** as the base URL for the request.

To discover your IP, just type this command on your console and look for the **inet** that looks like **192.168.1.200**.

```
ifconfig | grep inet

---

**inet** 192.168.1.200 netmask ...
```

After that you will need to update your Android and iOS configurations.

### **Android**

One of the problems may be related to **CLEARTEXT HTTP,** which protects apps from accidental usage of cleartext traffic.

> Starting with Android 9 (API level 28), cleartext support is disabled by default.

> \* from [Android Developers](https://android-developers.googleblog.com/2018/04/protecting-users-with-tls-by-default-in.html)

Which means that Android can only make a request to **HTTPS** sources. So we need to allow our application to use **HTTP**  sources.

In the **AndroidManifest.xml** file, we need to add these lines:

```xml
<manifest ...>
  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:name=".MainApplication"
    android:usesCleartextTraffic="true"  
    android:networkSecurityConfig="@xml/network\_security\_config"...>

    <activity android:name=".MainActivity" ...>
      ...
    </activity>
  </application>
</manifest>
```

This will allow our application to connect to **EVERY HTTP** source. But we want to allow only your machine’s IP. So to do that we will need to create the **network\_security\_config.xml** file in the folder **main/res/xml**.

```xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false"> localhost </domain>
    <domain includeSubdomains="false"> 10.0.2.2 </domain>
    <domain includeSubdomains="false"> 192.168.1.200 </domain>
    <base-config cleartextTrafficPermitted="true"/>
  </domain-config>
</network-security-config>
```

This file restricts the **HTTP** domains that our app can communicate with. The IP **10.0.2.2** is an alias for the emulator to **127.0.0.1,** and **192.168.1.200** is our machine’s IP.

After that we need to set the domain url on the Android emulator. So open **Dev Settings by** clicking **CMD + M** and then click on **Debug server host & port for device.** On this modal we add our machine’s IP **192.168.1.200.**

![](https://cdn-images-1.medium.com/max/718/1*_bb-PXxubZrZTV2fsILL9Q.png)

### **iOS**

On the iOS side we will have the same issue, we need to allow our app to do requests to **HTTP ** sources.

> By default, iOS will block any request that’s not encrypted using [SSL](https://hosting.review/web-hosting-glossary/#12). If you need to fetch from a cleartext URL (one that begins with http) you will first need to [add an App Transport Security exception](https://reactnative.dev/docs/integration-with-existing-apps#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](https://reactnative.dev/docs/integration-with-existing-apps#app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.  
>   
> \* from [React Native](https://reactnative.dev/docs/network)

To do that we will need to update our **Info.plist** file and add the **NSAppTransportSecurity** key.

```xml
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
  <dict>
  <key>localhost</key>
  <dict>
    <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
    <true/>
  </dict>
  </dict>
</dict>
```

On iOS we don’t need to define our machine’s IP because it translates **localhost** to that.

After that all we need to do is re-install our app on the emulator and it’s done, with this you can now make requests to your local API.

**Note:** This should only be used on local development environment, don’t commit this to your production app.

**Recommended links**

- [https://developer.android.com/training/articles/security-config](https://developer.android.com/training/articles/security-config)
- [https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple\_ref/doc/uid/TP40009251-SW33](https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33)
- [https://reactnative.dev/docs/network](https://reactnative.dev/docs/network)

* * *

_I’m a software developer from Portugal, currently working at_ [_Runtime Revolution_](https://www.runtime-revolution.com/) _as a front-end and mobile developer._

[Runtime Revolution](https://www.runtime-revolution.com/)
[anunes9 - Overview](https://github.com/anunes9)