I'm debugging my app via WiFi. It installs successfully but I got a red screen with an error:
The documentation says that I should set debug host and port but there is no "Debug server host & port for device" menu entry. Also, my problem is similar to this issue.
bring up the react native menu that is referenced in the link below
start with debugging turned off (the menu should show debug JS remotely and not stop debugging).
if the app is running with debugger, configure the debugging host and port: click on dev settings and type localhost:8081.
now try to run the app while npm start or yarn start is running in the host's terminal window.
This is the menu:
https://process.filestackapi.com/cache=expiry:max/FAoXMWT3QJPYymUBYSOw
Related
App crash on opening it on android device. Build successfully but raising an error "Failed to connect to development server".
There can be multiple issues with this.
Check that your node package mananger is running close it, connect
your mobile and run the following command.
adb reverse tcp:8081 tcp:8081
npx react-native start
it my solve your problem.
second
if you want wireless debugging, shake your cellphone it will open the debug menu click on the setting , find your ip address witht he command ipconfig/all and then click on Debug server host & port for device enter your IP like this xxx.xxx.xx.xx:8081 and press R from your development server.
Hope this solve your porblem
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
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
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.
I used the react-native Android demo project AwesomeProject and within the project I executed:
react-native start
In a second terminal:
react-native run-android
To start webserver and install the Android APK. The default webserver configuration is localhost:8081, how can I modify the webserver port, and how do I update recording of the IP & Port in Android project.
Edit:
I just found out that can modify ip address in Android debug setting, it seems "getDebugServerHost" is a private API, does Facebook provide any API to change ip&port?
As OP commented on MossP's answer, this can now be achieved using the debug_http_host shared preference (see this issue).
So, if you wanted to use, say, port 8082, you could add an onCreate method to your MainActivity.java file, which might look something like this:
#Override
protected void onCreate(Bundle state){
super.onCreate(state);
SharedPreferences preferences =
PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
preferences.edit().putString("debug_http_host", "localhost:8082").apply();
}
Of course not forgetting to import android.content.SharedPreferences, android.os.Bundle, and android.preference.PreferenceManager.
This would make your app try to access the packager at the desired port instead of 8081.
Then you'd just make sure to start the packager with --port 8082 (as described here), and you should be all set.
(Unless you happen to be using Nuclide, which is a whole other story).
Note that up until React Native 0.46, this would only allow one to run the app successfully, but still didn't make it possible to actually attach a debugger on a non-standard port. As of React Native 0.46, attaching a debugger should also work.
Update: See Tomty's answer for the current recommended way to do this in 2019.
Unfortunately, the port is currently (2015/09/23) hardcoded. I believe this will be changed in time as it already has an Issue raised from a high level contributor to the project.
https://github.com/facebook/react-native/issues/2704
There is a small work around for this. Anyone running this on a physical device(or even otherwise) can restart their adb session using a different port.
eg.
react-native start --port=1234
On a different cmd/terminal window.
react-native run-android
After which I am greeted by these messages.
BUILD SUCCESSFUL
Total time: 22.589 secs
Running C:\SDK/platform-tools/adb -s VY0025160560725694 reverse tcp:8081
tcp:8081
This runs it on default reverse port of 8081, which is blocked by McAfee.
Work around:
adb reverse tcp:8081 tcp:1234
Try it out. It works for me.
Note: You may have to kill and re-open the app.
Currently I am unable to provide an answer for an emulated device since I do not have one installed on my system. But the symantics should be similar.
Note: This may break automatic code updates using watchman.
As stated in https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu,
You can access the developer menu by shaking your device or by
selecting "Shake Gesture" inside the Hardware menu in the iOS
Simulator. You can also use the ⌘D keyboard shortcut when your app is
running in the iOS Simulator, or ⌘M when running in an Android
emulator. Alternatively for Android, you can run the command adb shell
input keyevent 82 to open the dev menu (82 being the Menu key code).
So on iOS device shake it, on iOS emulator press control D, on Android emulator control M, on Android device do adb shell input keyevent 82
Then in the menu that opens, go to Dev Settings, debug server & host port for device, and edit the IP and port.
ps: will only work for non production
On Mac :
go To Wifi
Open network preferences
Wi-Fi is connected to {wifi name} and has the IP address {xxx.xxx.x.x}.
Get your ip address .
Go to application on devices
go to Dev Setting
Tap to Debug server host & port for device
Fill your IP address and port is 8081 (example ipaddress:8081) .
This is an extension of Tomty's answer. Check out an example project here:
npm i #nick-bull/react-native-debug-address
# DEBUG_HOST=127.0.0.1:8081 npx react-native start --port 8081
# or, equivalently
DEBUG_PORT=8081 npx react-native start --port 8081
npx react-native run-android --port 8081