How To Run A React Native App With Node Js Backend On Android Device?

I want to run my React Native app on my local Android Device. The app uses Node js APIs for fetching data from mysql. The problem is, my android device can't access node js app whi

Solution 1:

So I solved it like this. 1. I got my ip address from cmd using ipconfig 2. In node js, I wrote the server listening code like this

const hostname = "192.168.2.103";
const port = "3002";
app.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Now the app will run on this ip address instead of localhost and hence we can access it anywhere on the same network even in React Native fetching from APIs process

Solution 2:

That is because when you run your React Native app on a phone you are not on your computer anymore, hence, localhost (your computer) is not accesible anymore. Try using a full ip address, even in a local environment.

Let's say you attack your api using axios to localhost:3000, you should change this localhost for the ip of your computer. Then it should work.

Solution 3:

Connect your mobile device to the same network as your machine.

Then try this command :

ifconfig

Find your machine's ip address from the log. You'll find something like this :

en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
    options=400<CHANNEL_IO>
    ether a4:83:e7:d5:35:85 
    inet6 fe80::439:b3fe:c51a:364%en0 prefixlen 64 secured scopeid 0x6 
    inet 192.168.1.6 netmask 0xffffff00 broadcast 192.168.1.255
    nd6 options=201<PERFORMNUD,DAD>
    media: autoselect
    status: active

Get the address, which is this in my case : inet 192.168.1.6.

On your app, input this address for hitting the node service. 192.168.1.6. If node is running on port 3000, add directly to the address. 192.168.1.6:3000

Solution 4:

You have to set your API Address in android device by using adb reverse.

for example, if your APIs is on localhost:3000, run this command:

$ adb reverse tcp:3000 tcp:3000

Now when your phone tries to request to localhost:3000 it will routed to that address in your laptop.

Don't forget to recompile your app after running that command.

Reference & more info:

1. https://blog.grio.com/2015/07/android-tip-adb-reverse.html

2. https://www.jaygould.co.uk/2018-11-07-react-native-connecting-development-server-debugging/