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.
Related
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
I don't modify any part of app; I just exec following cmds on macOS:
react-native init ***
cd ***
react-native run-android
I tested on both emulator and Samsung Galaxy note 3 both are the same.
also tried adb reverse.
My $PATH is
/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/mohammad/Documents/sdk/platform-tools/:/Users/mohammad/Documents/sdk
Then I get these errors in app (as in image):
ReferenceError: Can't find variable: require (http://10.0.3.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:15)
Try the following to fix the issue:
• Ensure that the packager server is running
• 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
• Ensure Airplane Mode is disabled
• 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
• 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
loadScript
JSBundleLoader.java:66
runJSBundle
CatalystInstanceImpl.java:177
call
XReactInstanceManagerImpl.java:906
call
XReactInstanceManagerImpl.java:899
run
MessageQueueThreadImpl.java:74
handleCallback
Handler.java:739
dispatchMessage
Handler.java:95
dispatchMessage
MessageQueueThreadHandler.java:31
loop
Looper.java:135
run
MessageQueueThreadImpl.java:196
run
Thread.java:818
The problem is cannot connect the packager server of react native and device (or) simulator.
To solve this problem, need to connect the packager server and device (or) simulator.
react native is default use adb reverse tcp:8081 tcp:8081 to connect the packager server and device (or) simulator.There has a some problem in under android 5.0 because adb reverse is not support under android 5.0. However, react native is also support with using same wi-fi network.
To Solve
android 5.0 (or) Above
Need to check the packager server is running or not. ( Some OS not run automatically like ubuntu, but you can run react-native start in your project directory. )
Need to connect device (or) simulator. ( If your using devices, need to connect your device and computer, and sure to open USB debugging mode. If your using simulator, sure to open simulator. ), ( You can check is step complete or not using adb devices command )
Run again react-native run-android (or) open dev menu of react native and press Reload.
below android 5.0
Need to check the packager server is running or not. ( Some OS not run automatically like ubuntu, but you can run react-native start in your project directory. )
Need to connect your device and computer on same wi-fi network. And add packager server IP on your device's dev menu > Dev Settings > Debug server host & port for device like xxx.xxx.xxx.xxx:port)
Run again react-native run-android (or) open dev menu of react native and press Reload.
Open Dev Menu
Devices
Press Menu button (or) shake device.
Simulator
Press Ctrl + M (or) Cmd + M.
Find Packager Server Host
Computer's IP. ( On unix use ifconfig in terminal (or) On Window use ipconfig. )
Port ( Can find on Packager Server Terminal like localhost:8081 )
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
appears after running react-native run-android
I click the reload JS button and it changes to
Which is more informative, I am using VS standalone Android Emulator, and have already ran adb reverse etc etc
I do not see an option for Debug server host & port for device in Dev settings like it says there should be.
This happens when you haven't set the server IP (which should be on the same local network as your phone).
From your question I assume you can connect to the emulator using adb then you should be able to send command to it using the following according to the official guide pointed out by G. Hamaide:
adb shell input keyevent 82
This should send open menu event to the emulator and show you the menu where you will find Dev Settings and if you open it there you will find Debug Server host & port.
In order to connect to this server you must be on the same local network (i.e. connected to the same router). I assume you are using default options on a Windows machine so open a cmd shell and learn you local IP address using ipconfig. You can now set host and port to YOUR_LOCAL_IP:8081 (default port is 8081). Try to reload and it should work now.
You need to follow the steps from their official guide.
From where you are stuck follow these 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.
How to Enable Internet Connection Through Proxy in Android in Windows?
http://www.coderanch.com/t/462906/Android/Mobile/connect-internet-behind-proxy
In the earlier versions of Android emulators (up to version 1.1r2), you were required to make an entry in the system table of“com.android.provider.setting.db” database and/or start the emulator with –http-proxy switch supplying it the IP address and port number of your proxy.
These methods however, have become obsolete and don’t work with SDKv1.5.
Step 1: On emulator, go to:
Home->Menu->Settings->WirelessControls->MobileNetworks->Access Point Names->T-mobile US->set Proxy IP and Port#
Step 2: Now the next time you go to a web address, the browser will prompt for your user-id and password. Enter your credentials and you should be good to go.
Reference: http://groups.google.com/group/android-beginners/b…d4f948c4ed622#5ced4f948c4ed622” target=”_new” rel=”nofollow”>
Steps for Android 2.2
1) Create an emulator with name say android_2.2_emulator using AVD manager in eclipse.
2) Create a batch file (.bat) with following command and a keep a handy shortcut.
emulator -avd “android_2.2_emulator” -http-proxy “your_proxy_url”:”port”
3) Run the batch file before starting the eclipse IDE, so that the emulator session will have internet connection.
That’s it.
Give your Android device a static IP. Ensure both the Windows computer and the Android device are on the same subnet. Set the IP of the android device as the gateway for the Lan connection on the Windows computer.