Accessing a local network API in React Native can be essential during development when testing your app against APIs hosted on your local machine. However, there are some configurations that need to be set up to ensure that your React Native app can communicate with the API over the local network, especially when using HTTP instead of HTTPS.

In this guide, we’ll go over how to configure your React Native project to access a local network API. This includes enabling HTTP access, modifying the gradle file, and setting up the Android AndroidManifest.xml file.

Step 1: Configure the gradle File

When working with Android, the gradle build system allows us to configure various aspects of how the app is compiled and runs. To ensure proper communication with your local network API, you’ll need to make changes to the build.gradle file.

Navigate to the android/app/build.gradle file in your project structure.

Configure Release Builds: If you’re testing in a release mode, you can configure your build.gradle file to allow debugging and access to your local network API. Here’s how you can modify it:gradle

android { buildTypes { release { debuggable true // Allows debugging in the release build // Additional configurations if needed... } } }

Enable ProGuard in Release Builds (Optional): ProGuard is used for code optimization and obfuscation. If enabled, make sure it’s properly configured to not block your network requests.You can set this flag in build.gradle:gradle

def enableProguardInReleaseBuilds = true 

Ensure that your proguard-rules.pro file doesn’t interfere with network-related classes if you’re using libraries like Axios, Fetch, or other HTTP clients.

Step 2: Modify the AndroidManifest.xml File

To access APIs running on your local network over HTTP, you’ll need to modify the AndroidManifest.xml file to allow cleartext traffic (HTTP, not HTTPS).

Allow HTTP Traffic in the Manifest:Add the following line to the <application> tag in the android/app/src/main/AndroidManifest.xml file:xml

<application android:usesCleartextTraffic="true" android:label="@string/app_name" android:icon="@mipmap/ic_launcher"> ... </application> 

This ensures that Android will allow unencrypted HTTP requests, which is crucial when dealing with local APIs that often don’t have SSL certificates (HTTPS).

Specifying Network Security Configurations (Optional):If you need more granular control over which domains can use HTTP, you can set up a network security configuration. Here’s how to create and apply one:

First, create a new file named network_security_config.xml under android/app/src/main/res/xml/ with the following content:xml

<?xml version="1.0" encoding="utf-8"?> <network-security-config> <domain-config cleartextTrafficPermitted="true"> <domain includeSubdomains="true">your-local-ip</domain> </domain-config> </network-security-config> 

Replace your-local-ip with the IP address of the server where your API is hosted.

Then, reference this file in your AndroidManifest.xml:xml

<application android:networkSecurityConfig="@xml/network_security_config" android:usesCleartextTraffic="true" android:label="@string/app_name" android:icon="@mipmap/ic_launcher"> ... </application>

Step 3: Start Your Local API Server

Ensure that your local server is running and accessible from the same network as your development device.

Find Your Local IP Address: On your development machine (where your API server is running), you’ll need to find the local IP address:

Replace localhost with Your IP Address: In your React Native code, replace any references to localhost with the local IP address of your machine. For example:javascript

const API_URL = 'http://192.168.x.x:5000/api';

Using localhost will not work because the app is running on a device or emulator, and localhost refers to the device itself, not your local machine.

Step 4: Testing the Local Network Access

Run Your App on the Device/Emulator: Once you’ve set up everything, run your React Native app using the following commands:

npx react-native run-android 

This will deploy the app on your connected Android device or emulator.

Ensure Both Devices Are on the Same Network: Make sure both your Android device/emulator and the machine hosting the API server are connected to the same Wi-Fi network. If they are on different networks (e.g., your device is on mobile data while your server is on Wi-Fi), the app won’t be able to reach the local API.

Troubleshooting Common Issues

Clear Old Build Issues: Sometimes old cache files or issues in the build system can prevent proper network communication. You can clear these by running:

cd android ./gradlew clean 

Then restart your app:

npx react-native start

Check for Build Issues: Running npx react-native doctor can help you identify any configuration issues in your environment or project setup.

Use npm audit fix: This can help resolve any known vulnerabilities or issues with the project's dependencies:

npm audit fix

Rebuild the Project: If your app is not behaving as expected, it can be helpful to rebuild the Android app by running the following commands:

cd android npx react-native build-android 

or

./gradlew assembleRelease

Conclusion

Accessing local network APIs in React Native is an important part of the development process. By configuring your gradle file, allowing cleartext traffic in the AndroidManifest.xml, and ensuring your device and server are on the same network, you can successfully interact with APIs hosted on your local machine.

Be cautious when allowing HTTP requests, especially in production. In a real-world production app, it’s highly recommended to secure your API with HTTPS to protect sensitive data. However, for local development, these steps will help you effectively test your app’s API connections.