Develop Reference

Running Emulators on Different Device for React Native Applications

Since Xcode and Android studio consume a lot, I am having storage and processing capacity issues on my Mac, while developing React Native Applications.
My Question is that is there any way to run emulators (in my case android emulator) on another PC, while I am coding on Mac?
Thank you

I tried once the solution below, it might also work for you. And the source is in this repo.
If you want to write and compile an Android application on one machine and debug it remotely on the emulator launched on another follow the instructions below:
Preparation
First of all you need to install SSH server on your remote machine.
Ubuntu
You can use OpenSSH.
sudo apt install openssh-server
Windows
You can install OpenSSH on Windows following this link.
Connection
Now you must connect local machine to remote server using SSH tunnel.
The emulator listens on two TCP ports per instance: 5554 for the telnet interface and 5555 for control communication with tools like DDMS. So you could probably get away with only forwarding port 5555. Each subsequent emulator takes the next available even+odd port number tuple.
Note that you need to enter the ip address of emulator running on remote server instead of emulator-ip and also remote machine username and hostname instead of myuser and remote-server.
Ubuntu
On the local machine try:
ssh -NL 5554:emulator-ip:5554 -L 5555:emulator-ip:5555 myuser#remote-server
Windows
Follow this link instructions and add two source ports and destinations below:
Source port: 5554
Destination: emulator-ip:5554
Source port: 5555
Destination: emulator-ip:5555
then connect to remote server.
ADB
The emulator tries to notify a local adb server at startup; hence you need to restart adb in order for it to probe the local 5554+ ports.
adb kill-server; adb devices
adb devices shows a new emulator — emulator-5554 — and you can use it as if it is running on your local machine.
Running
Finally run:
react-native run-android
the app should be installed on emulator, but you may face an error:
error: more than one device/emulator
Could not run adb reverse: Command failed: path/to/sdk/adb -s emulator-5554 reverse tcp:8081 tcp:8081
you need to specify your debug host IP and port in app's Developer menu -> Dev settings -> Debug server host & port, that is your local machine ip address and 8081 for port.
Note that after APK installation you don't need to do any of these steps. You can just start the npm server: npm start in the project directory of your local machine, run the app on the emulator in remote machine and then reload.
if there was another error:
Exception in thread "Device List Monitor" java.lang.NullPointerException
try:
react-native run-android --deviceId

Nox emulator with React Native

I'm setting up my development environment for React Native with a custom Android Emulator (Nox).
I followed the steps on this website:
How to connect Android Studio with Nox App Player
But when I type: adb devices it still shows nothing.
So when I try to run my app with react-native run-android it says that there is no Android simulator running.
Is there something I missed or someone with the same problem?

Open terminal and type adb connect 127.0.0.1:62001. type adb devices to make sure your emulator is connected.
Go to your project, type react-native run-android --deviceId 127.0.0.1:62001, waiting for the project to finish compiling, and the you will see a red error screen.
Open the developer menu, Go to Dev Settings → Debug server host for device, Assume your local ip is 192.168.1.121, then type: 192.168.1.121:8081
Use developer menu to reload your app,then close the app, and reopen it.

Open terminal and type adb connect 127.0.0.1:62001. type adb devices
to make sure your emulator is connected.
Go to your project, type react-native run-android --deviceId 127.0.0.1:62001, waiting for the project to finish compiling, and then you will see a red error screen.
Open the developer menu, Go to Dev Settings → Debug server host for device, Assume your local ip is 192.168.1.121, then type:
192.168.1.121:8081
Use developer menu to reload your app,then close the app, and reopen it.
Just in step 2 type react-native run-android (if you don't work with android >10 add prefix) --no-jetifier. It works for me!

it mean for android v 4.1.1 in nox emulator adb connect 127.0.0.1:62001
for android v 5.1.1 in nox emulator adb connect 127.0.0.1:62025

adb connect localhost:62001
react-native run-android --deviceId localhost:62001

react-native red screen error

I have installed new application from git but i'm having this red screen error can some one help me out.
ReferenceError: Can't find variable: process (http://10.0.3.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:2506)
E/unknown:React( 2312):
E/unknown:React( 2312): Try the following to fix the issue: E/unknown:React( 2312): • Ensure that the packager server is running E/unknown:React( 2312): • Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
E/unknown:React( 2312): • Ensure Airplane Mode is disabled E/unknown:React( 2312): • If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
E/unknown:React( 2312): • If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to your machine's IP address and the port of the local dev server - e.g. 10.0.1.1:8081
this output is adb logcat.
I have created the github issue any one can refer isssue

Did you run adb reverse tcp:8081 tcp:8081 as suggested in the error message? You always need to execute this after connecting a physical device, and you might need to do the same for Genymotion (never used it with React).
Also make sure that you have no other process running on port 8081: sudo lsof -n -i4TCP:8081 | grep LISTEN.
If you do, you can either kill that process by executing kill -9 <PID>, or start packager on another port: react-native start --port 8082.
If this doesn't help try to open the app on a basic Android emulator instead of Genymotion to see if you get the same error or not.

My problem is mismatch of the native-base module in react-native when i upgraded. checkout this issue and also do npm clean cache.
I also deleted node_module and reinstalled.
I went with native-base": "0.5.15" react-native : "0.33.1" and react is "15.3.1" and everything started working fine.
check this also facebook troubleshoot

dev server returned error code 403 react native

Followed the steps here to try react-native android on a windows box.
On a separate prompt I executed react-native start which is running fine
Started the AVD from AVD Manager
Executed react-native run-android
BUILD SUCCESSFUL
Total time: 27.632 secs
Starting the app on emulator-5554 (D:\software\Android\android-sdk/platform-tool
s/adb -s emulator-5554 shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }
Executed react-native run-android on a separate console from within same folder
But I see an error which I'm having hard time to resolve. Please suggest resolution.
---EDIT---
Possibly the issue is that 8081 port is in use by McAfee. So I updated the server.js to run dev port on 8088 and now when I browse http://localhost:8088/index.android.bundle?platform=android I can see JS loading.
But how do I make android use this address instead of default **10.0.2.2:8081?** I found a file AndroidInfoHelpers.java which contains that 10.0.2.2 path but not sure if that's the way as being a JAVA file I possibly need to recompile whole program. There should be a simpler way to point android app to use a different port for dev server.
Also, when I execute react-native run-android the first line that gets output says "JS Server not recognized.. Continuing with the build" which likely is shouting the same thing.

A) Set the new port for dev server
User command
react-native start --port=8088
or yourproject\node_modules\react-native\local-cli\server\server.js
to set the the available port say 8080
now use react-native start to start server on 8080
B) Now to establish communication between emulator and dev server, use below command
adb -s emulator -5554 reverse tcp:8088 tcp:8088
i) 5554 =>emulator port (adb devices command will tell you emulator port but if this command is not working then set the path C:/../android-sdk/platform-tools in Path environemnt variable )
ii) 8088 =>server port
C) run the command react-native run-android
D) Follow below steps updating Dev server path in emulator
i) Ctrl + M for windows to open your dev menu for the emulator.
ii) Click Dev Settings
III) Under Debugging select Debug server host & port for device
IV) Enter the url and port for your application as 10.0.2.2:8088

Press cmd + M (Ctrl + M for windows) to open your dev menu for the emulator (Please make sure your react-native app is open in the active window of the android emulator before using this command)
Click Dev Settings
Under Debugging select Debug server host & port for device
Enter the correct url and port for your application in your case 10.0.2.2:8088
Once you do that you can reload your application and it should work.

1) First set the port number as 8088 in below file
yourproject\node_modules\react-native\local-cli\server\server.js
now build the project.
2) Follow below steps updating Dev server path in emulator
Ctrl + M for windows to open your dev menu for the emulator.
Click Dev Settings
Under Debugging select Debug server host & port for device
Enter the url and port for your application as 10.0.2.2:8088

This issue might occur because of the blockage of default port. In my case, I was able to fix it after executing following steps-
Start dev server on a new port:-
react-native start --port=8088
Open developer menu by vibrating on actual connected device or pressing 'Ctrl + M' on emulator.
Select Dev Settings
Under Debugging select Debug server host & port for device
Enter the url and port for your application as '10.0.2.2:8088'

Just run this one your phone, it is a waste of time to try to figure out the hard coded React code for the emulator. It just does not seem like enough time was spent fixing this issue. Spent 3 days on reading way to many blogs, and trying way to many things and nothing worked. Our company also runs McAfee and I had the same issue.

This worked for me. Does the same thing but quick.
Just set the port when run the app
react-native run-android --port=8082

Unable to download JS bundle error in android react native

I'm working on React Native on Windows and I have a problem on my device (Android 4.1.2).
I am following the tutorial but, i have a problem when i run on my device then it shows red screen with error message "Unable to download JS bundle"
My question is about the second part : when i Configure device to connect to the dev server via Wi-Fi. When I go to "developer options", to write my machine's IP address then app is crash
How can I try to resolve this error ?

To run with local server, run the following commands under your
react-native project root directory
react-native start > /dev/null 2>&1 &
Make sure your laptop and your phone are on the same Wi-Fi network.
Open your React Native app on your device.
You'll see a red screen with an error. This is OK. We'll fix this in the following steps.
Open the Developer menu by shaking the device or running adb shell input keyevent 82 from the command line.
Go to Dev Settings.
Go to Debug server host for device.
Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). On Mac, you can find the IP address in
System Preferences / Network. On Windows, open the command prompt
and type ipconfig to find your machine's IP address (more info).
Go back to the Developer menu and select Reload JS.