React Native app debug on real device has some problems;
My metro bundler console gives warn:
warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
warning and that cause real IOS device connection problem.
When I try to reload my react native app from Chrome React Native Debugger, it gives above warning and I can not debug my code from on Chrome
react-native: 0.62.2,
IOS: 13.6
It happens on Real device connection. When I work with IOS simulator, there is not problem.
NOTE: My phone and macbook on SAME wi-fi network.
So problem is not related to different wi-fi network usage.
⚠️ For iOS users :
Check that your build target is Debug :
Xcode Product => Scheme => Edit Scheme => Debug (and not release ! )
⚠️ For Android users :
I have found a solution that I posted on github.
Not the best but it could be useful:
First, you have to open MainApplication.java
and remove import com.facebook.react.BuildConfig;
Next, follow these steps :
# Reset metro bundler cache :
`npx react-native start --reset-cache`
# Remove Android assets cache :
`cd android && ./gradlew clean`
# Relaunch metro server :
`npx react-native run-android`
And see the magic 🎉
See here :
https://github.com/facebook/react-native/issues/29396
Running this worked for me for a Physical Android Device.
adb reverse tcp:8081 tcp:8081
or
npm run android-connect
If you face an error saying 'More than two devices are running', make sure that the emulators like BlueStacks are not running.
Your iPhone has to be connected to the same network (WiFi for example) as your Mac, because they have to communicate with each other (React Native Doc).
If it's already the case, then fill in the DCHP server manually on your iPhone and Mac, using Google's server (8.8.8.8), because it could be due to DHCP problems.
You may need to disconnect and reconnect to your Wifi.
For me I need to set the bundler location in my app from "localhost:8081" to "192.168.1.XX:8081" which is my computer's local IP address where Metro bundler runs on and the port is 8081.
If you don't know which port your bundler runs on you can specify it as a parameter like:
npx react-native start --port 8081
Then you need to specify the location in your development app. To do that:
Shake your device
Click change bundle location (I am on RN 0.64 it may differ in yours)
Give the bundler location of your computer's IP and port where Metro bundler runs on like:
and they started to communicate with each other.
My problem was that I was not connected to the same WiFi on my Mac and Iphone.I turned the wifi off and back on on both devices, and made sure both the mac and Iphone was connected to the same WiFi. Annoying, but true!
Your iPhone & mac must be connected to the same network. If both device connected to same network you must check local network availability for your app. (this happened to me on a iOS 14.0 running device).
check local network - iOS 14
Settings -> Privacy -> Local Network
On Android, this may also happen due to a problem with the network security config. If you do use the network security config, try removing the line android:networkSecurityConfig="#xml/network_security_config" from AndroidManifest.xml
My problem was that the emulator I was using had airplane mode turned on (because I tested related functionality). The problem resolved when I turned it off, thus enabling network to operate as usual.
My problem is that the device is not connected to the internet. Throws the error. Try connecting stable internet connection.
When I remove network_security_config.xml and remove the following:
`android:networkSecurityConfig="#xml/network_security_config"`
It works
I work on IOS environment, testing on an IPad that is USB connected.
I managed to fix this issue by adding the bundler address (127.0.0.1) in the ipad to reconnect
Shake the device (opens react native debug menu) > Configure Bundler > "127.0.0.1" in the first field
Hope this helps someone !
What did the trick for me was the following:
In Xcode go to Debug/Detach from YourAppName
Then reattach it by going to Debug/Attach to Process, select your app from the list (usually the first entry at the top).
I tried everything and after running
adb reverse tcp:8081 tcp:8081
yarn android
it worked.
What worked for me in this scenario was these steps
run server with --reset-cache
run npx jetify
open the project in adroid studio
go to refactor -> Migrate to AndroidX (this was the step that i was missing earlier)
start your emulator
run the app from android studio and it should work
Sometimes it's a firewall / router issue - see if that's your problem:
Find out the local IP address of your computer (where your Metro bundler / server is running).
Open a browser from your phone.
Open the IP address from #1 with port 8081 (e.g. http://192.168.0.42:8081).
If it's not loading -> it's a firewall / router issue.
A simple solution would be to connect the computer to the phone's hotspot.
yarn start web
you can use this command to scan the QR code and see the app in you EXPO app at you mobile
You musk permit local network in the application setting in iOS. Otherwise, Metro can not find your app even in the same network.
For iOS on Xcode:
Go to Window > Devices and Simulators, Go to "Installed Apps" section, Click on +, Pick your app , Run your code.
(This issue happened to me when I run the app after I uninstalled it from the device)
For me the solution was to remove the installed app and build run in Xcode again.
Oh, I had the same problem with RN - for me - there was a problem with connecting iphone to macbook server on localhost - and it solved if I just turned off wifi on macbook and then turned it on again. (Yes, it sounds weird - but it's a common problem)
For me, on IOS, Xcode would be stuck in debugging, a breakpoint is active and Metro can't reload because no apps are connected. To solve this:
open Xcode
In the left-hand side panel, click from the top row on Debug navigator (if it's not already focused and in the view like it was for me)
In the bottom pane (which can be minimized fully, in which case you have to hold and drag from the bottom of Xcode to expand it into view) you see a set of debugging buttons, the most left
one is a blue arrow-head-shaped button that continues/unpauses the script, click it.
after unpausing the script my app would connect to Metro.
Easy solution ->
1- Go to Developer options of your phone .
2- Disable adb authorization timeout..
Now reload project and enjoy coding..
My problem was that i added --variant=release
npx react-native run-android --variant=release
So i remove it and worked for me.Like this:
npx react-native run-android
I've looked at so many tutorials, and they seem so simple, but I just can't get debugging to work (running Expo, not ready to eject, that's a whole other level of craziness).
I've tried creating an app with create-react-native-app and also with expo-init which appear to be the same thing. I start running the app with yarn start and I can see the app in Expo. I select "Attach to Packager" in VSCode, and it fails every time.
I've added "react-native.packager.port": 19005 to my settings.json but I can't seem to find the right port. My Metro screen has so many different ports in so many different places:
The terminal where I ran yarn start says
Expo DevTools is running at http://localhost:19003
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19005.
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Tunnel ready.
exp://192.168.1.5:19004
The chrome window is at localhost:19003
The first line of the Metro Bundler terminal says Starting Metro Bundler on port 19005.
Later in the terminal it says Opening exp://127.0.0.1:19004 in iOS simulator
In the sidebar it says exp://192.168.1.5:19004, which is reflected in the Dev settings screen in the iOS simulator.
I've tried changing the port in "react-native.packager.port": 19005 to every number between 19000 and 19005 and they all fail. They all say:
Could not debug. Cannot attach to packager.
Are you sure there is a packager and it is running in the port 19003?
If your packager is configured to run in another port make sure to add that to the settings.json. (error code 504)
with, of course, the currently set port.
HELP ME!!!
react-native.packager.port should be changed to the port the Browser's developer tool's is running on. Stopping and Restarting the npm server once again worked for me.
I am developing a simple chat program with react native for learning purpose (not use expo). I made changes with the chat message (along with other code change) and was trying to reload the new message with USB debugging on Android device. But the app persistently shows the old message before change. Here is what I did:
Under android subdir, run .\gradlew clean
close android studio and react-native run-android again
Shake the device and choose reload
The #3 causes the error below:
Is there some module like nodemon for nodejs which picks up the code change nice and easily?
I often get this issue too. In this situation, I turn off the debug mode, and run adb reverse tcp:8081 tcp:8081 && react-native run-android again.
Connect your phone to your wifi, and try this,
Trigger the Developer Menu
Go to Dev Settings > Debug server host & port for device
Set it to <your_pc_ip_address_on_local_wifi>:8081. (If you are on a emulator, set it to localhost:8081)
Restart the app
In the past weeks, I have been using react-native run-android to test my android app in android emulator successfully.
Yesterday, I tried to generate a signed APK by following the link https://facebook.github.io/react-native/docs/signed-apk-android.html#content, the signed APK does work in my cellphone.
Today, when I try to run react-native run-android again to test new features in emulator, the packager run successfully, Android emulator report "ReferenceError can't find variable _fbBatchedBridge(line 1 in the generated bundle), when I hit "RELOAD JS", it report "Unable to download JS bundle, did you forget to start development server or connect your device?
I even tried to change the DEV settings by adding the ip:8081, still no luck.
Could anyone help on this, thanks a lot
You need to run this command.
adb reverse tcp:8081 tcp:8081
https://facebook.github.io/react-native/docs/running-on-device.html#method-1-using-adb-reverse-recommended
I am trying to configure react native for windows for android app development but I am unable to use port 8081 as it is used by McAfee agent on my laptop.
I am able to start node js server on different port (8090)
react-native start --port=8090
But when I run the command:
react-native run-android
I am unable to specify port option. Looks to be that it is hardcoded with 8081.
Is there anyway I can start react-native run-android for custom port(8090) port on windows?
I am completely new to reactnative and following below link to configure sample Awesomeproject for android on windows.
https://facebook.github.io/react-native/docs/getting-started.html#content
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
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 steps should be similar.
Was setting up RN with android emulator. Had the same problem with company's laptop with McAfee installed and 8081 port occupied. 3 things i did to make it work.
run the packager server in a different port as you mentioned above, like 8090 port: react-native start --port=8090.
i use android emulator(VD), so i need to change the VD's debug server by: cmd+M in the emulator, Go to Dev Settings → Debug server host for device, enter ‘localhost:8081’. If you connect a real android device, this step may be skipped.
Last thing to do is to forward the request in our local VD’s 8081 port to our machine’s 8090 port which runs the packager server by doing: adb reverse tcp:8081 tcp:8090
More about adb reverse.
Now you should be able to change your index.android.js and hit r twice or cmd+M -> Reload to reload the VD.
I found a workaround that works (I am on Linux, but it should work on Windows also).
In a Terminal tab, from the project root, I run :
react-native start --port=8082
This kicks Node up on port 8082.
Then, I launch the app using :
react-native run-android
Once the app is launched, I update the development server's url and port to match the settings above (Cf. this answer if you don't know how).
It works !!
Finally It Worked! I also faced the same issue where my 8081 port was being used by McAfee and after reading and trying all the solution only the following steps worked for me where I able to run my project on 8088
Steps :
1. react-native init myproject(create myproject using react-native cli) then cd myproject(move to myproject)
2. open android studio - ctrl + R => Replace 8081 to 8088 from every file.
3. react-native run-android(simulator should be running).
4. Check your local IP ex : ipconfig in windows will give your IP
5. Check yourIP:8088 in your browser => It wil show(React Native packager is running.)
6. At this time in your simulator you will get 403 forbidden error or package manager not running error
7. Ok, Now you need to point your simulator to 8088 instead of 8081, So on your simulator type cntrl + m => Dev settings => Debugging => Set IP eg : yourIP:8080
8. Now stop package manager.
9. Now remove .babelsrc from your project.
10. Rerun the react-native run-android(If everything goes fine it will work).
I know its not the best way to solve this problem but until facebook team is not giving any better solution for it this may be a good approach since 8081 is hard coded everywhere.
Note : In some cases I have seen white screen comes without any error. For this issue please make sure that you have removed initially generated .babelsrc.
and stop server and restart should solve this issue.
For this
react-native start --port=1234
U just need to do this
react-native run-android --port=1234
That's it, worked for me.
update port for both commands, they should be same.
This is not currently supported, but there appears to be an active and open issue regarding this as well, but unfortunately the core team hasn't had a chance to merge in the PR...
https://github.com/facebook/react-native/issues/1429
This has also been reported on Product Pains, so be sure to up-vote it there...
https://productpains.com/post/react-native/allow-packager-port-to-be-configurable-change-from-8081/
Right now, it may be easier to change the port McAfee runs on. Sorry