Unable to connect with server while running react native app on real android device

I am trying to run my react native app on my real android device as the laptop gets too hot while using Android studio (8 Gb RAM, the pain). Hence, I enabled my USB debugging, plugged the cable and ran the command "react-native run-android". The app started with no issue. I started the backend server also which are up and running on localhost:3000 and localhost:3001. The app runs and greets with a login and sign up page. I tried to sign up but there is an error saying

Error [TypeError: Network request failed]

I am connecting via WIFI on the same network and hoping the server and the app can communicate but the app doesn't.

There is not any issue with the code itself as I ran it multiple times in android studio previously and the app ran well. I was able to sign up as a new user and login with the same id. I am not able to do the same in the real device.

My questions:

I read the official document and it said to open in-app developer menu and put the machine ip address and localhost server. Is this localhost server the one that the Metor JS runs on or the backend server of the app itself?
What am I missing here, any commands or any configuration?
Why is my app not able to communicate with the server?
Reason behind the network error.

Solution

You should follow these steps to connect with the bundler.

Make sure that the app and bundler using the same network.

If you are using android add this code in your androidMenifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission 
android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 <application
   android:usesCleartextTraffic="true" // make sure that this line is added.
     .......>
      .......
 </application>

if you are adding localhost in the developer setting try to add your IP address like this, yourIP:yourPort

example: 192.168.89.24:8081