Testing React Native Apps Online: Connect Your Local Server to the Web with ngrok

10 minutes read

Oct 01, 2025

8 Likes

Testing React Native with ngrok for Real-Time Connectivity

Testing React Native apps that connect to a local server can be tricky, especially if you want to test real-time features on mobile devices outside your Wi-Fi network.

ngrok solves this problem by creating a secure public URL for your local server, allowing your app to access it from anywhere, even on mobile data networks.

This tutorial demonstrates how to utilize ngrok with React Native to facilitate real-time WebSocket communication, ideal for IoT-style testing or development.

Project Overview

Goals:

Connect React Native to a local server over Wi-Fi or mobile data.
Test live data flow without deploying to a staging environment.
Display real-time data in the app using WebSockets.
Ensure cross-network communication works on both iOS and Android devices.

Architecture Diagram

+——————–+ WebSocket +—————-+

| React Native App | <——————-> | ngrok Tunnel |

| (Wi-Fi or Mobile) | | Public URL |

+——————–+ +—————-+

+—————-+

| Local Server |

| (Dev Machine) |

+—————-+

The React Native app communicates through ngrok when mobile data is used.

Key Components

Local Server / WebSocket Bridge

Runs on your development machine.
Provides WebSocket endpoints for React Native to connect.
Example JSON message from server:

{“device”:”local_server”,”distance_cm”:47}

React Native App

Connects to the server via WebSocket.
Switches between local Wi-Fi and ngrok tunnel automatically.
Updates UI with real-time data.

How ngrok Works

Start your local server (e.g., port 8080).
Run ngrok to create a public HTTPS URL forwarding to that port.
Mobile devices connect using the ngrok URL if outside Wi-Fi.

Workflow Diagram:

[React Native Mobile App]

[ngrok URL]

[Local Server / WebSocket]

Setting Up ngrok

1. Install ngrok (macOS example):

brew install ngrok

2. Add your auth token:

ngrok config add-authtoken <YOUR_AUTH_TOKEN>

3. Start your local server (Node.js example):

node server.js

4. Expose server with ngrok:

ngrok http 8080

Sample output:

Forwarding

https://ad1536ad41ee.ngrok-free.app -> http://localhost:8080

React Native Integration Example

import NetInfo from “@react-native-community/netinfo”;

const state = await NetInfo.fetch();

const wsUrl =

state.isConnected && state.type === “wifi”

? “ws://192.168.1.125:8080” // Local Wi-Fi

: “wss://ad1536ad41ee.ngrok-free.app”; // ngrok tunnel

const ws = new WebSocket(wsUrl);

ws.onmessage = (event) => {

const data = JSON.parse(event.data);

console.log(“Distance:”, data.distance_cm);

};

Real-Time Features Example

Display live sensor data in your React Native app.
Trigger alerts such as vibration or Text-to-Speech notifications.
Update UI dynamically with each message received.

Diagram:

[Sensor Data] –> [Local Server] –> [ngrok Tunnel] –> [React Native App]

| |

+—————- Real-Time Updates —–+

Benefits of ngrok for React Native Testing

Test apps on real devices without deploying the backend.
Cross-network testing: works on Wi-Fi and mobile data.
Debug WebSocket or HTTP traffic using ngrok web interface: http://127.0.0.1:4040.
Fast setup: no staging server required.

Note: Free ngrok URLs reset every 2 hours. Use a paid plan for persistent URLs.

Challenges and Solutions

Challenge	Solution
Network switching	Handle dynamically via NetInfo
Latency	Minimal with ngrok, real-time still responsive
Reliability	Implement WebSocket reconnection logic

React Native real-time testing made simple with ngrok

The Way Forward

Using React Native, a local WebSocket server, and ngrok, you can:

Build real-time, cross-network testing setups.
Test IoT-style scenarios from anywhere.
Debug quickly without deploying servers.

This setup simplifies development, saves time, and works seamlessly on iOS and Android.

Free Consultation

Lopa Das

Oct 01 2025

With over 13 years of experience, Lopa Das is a seasoned professional at iFlair Web Technologies Pvt Ltd, specializing in web and mobile app development. Her technical expertise spans across Laravel, PHP, CodeIgniter, CakePHP, React, Vue.js, Nuxt.js, iOS, Android, Flutter, and React Native. Known for her exceptional skills in team handling, client communication, presales, and risk analysis, Lopa ensures seamless project execution from start to finish. Her proficiency in Laravel CRM, Next.js, and mobile app development makes her a valuable asset in delivering robust, scalable solutions.