Connect local back-end with React Native in your phone

26 March, 2021

These days I tried to access a back-end API to an application running in my phone using React Native for finishing a course. My computer does not have good performance to run a emulator (I tried to using Genymotion and Android Studio) and it was soooo slow.

My computer is a HP 14-dk0002dx with a AMD-A9 dual core, 12GB RAM, 512GB SSD and does not have a dedicated graphics card. To work with web development it's ok (with a project not too big) but work with mobile development it's not. I have to use my phone to build and test any application, so running two or three console windows and a emulator it's out of question.

The back-end application was running in 3333, so the standard way to run in my phone is run this in console:

adb reverse tcp:3333 tcp:3333

I tried to connect using localhost, it failed. Tried again with my IP, it failed again.

Searching Stack Overflow I found a solution running Ngrok. Ngrok basically creates a proxy tunnel between an application running locally to a public URL. You choose a port to connect and Ngrok creates a URL to connect.

With the back-end running in port 3333, you simply have to run in a separate console window:

ngrok http 3333

And you will see this:

ngrok by @inconshreveable (Ctrl+C to quit)

Session Status online
Account YourUsername (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://123456789abc.ngrok.io -> http://localhost:3333
Forwarding https://123456789abc.ngrok.io -> http://localhost:3333

Connections ttl opn rt1 rt5 p50 p90

Now you have to use only http://123456789abc.ngrok.io in your React Native application and it will connect normally.

There's some caveats:

Without use any account, it will disconnect every two hours
Using a free account, every time you run ngrok http it will send another URL different than the last one.
You have to be careful with your URL, because it will connect to the server and making your local server globally.
Using a paid account, you can set a custom URL and it will not change everytime you run Ngrok. But you have to be careful.