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'm new in react native whenever i'm trying to reload the application i'm getting error on my emulator screen i.e could not connect to development server.i'm getting below error. Any help will be appreciated.
Try to open in your device browser the url: http://10.0.2.2:8081/index.delta (if it is responding go to step 2 - even with errors - if not go to 3).
Add the following line to your androidManifest.xml Application tag:
android:usesCleartextTraffic="true", rebuild your native app and test.
In a terminal run this command: adb reverse tcp:8081 tcp:8081
i had this problem too.
follow these steps in order
1.
try deleting your emulator and create a new one
then restart your pc
start react native & run android
if not solved
2.
connect an android phone via USB to your pc
turn on USB Debugging at your phone's setting
now start react native & run android
I am just starting with react native. I created my first app using React Native CLI. It was created without any errors. When I am trying to react-native run-android It ends up with this error as shown.
1) Run command " adb devices "
It will let you know if any device is connected or not
2) Try running by setting the Environment variable and proxy commands.
Follow this link: http://facebook.github.io/react-native/releases/0.38/docs/getting-started.html#content
first Start the android emulator.
From your react native folder run:
cd android && gradlew clean
THEN
cd .. && react-native run-android
Make sure you have your device connected to your computer, you can check that by running:
adb devices
if it's not connected, in your phone go to: settings > Developer Options > (enable) USB debugging.
Else if you want to run it from an emulator you will need to either install Genymotion, or AndroidStudio.
1) Run command adb devices to list all connected devices.
2) Then run command emulator #YOUR_DEVICE_NAME.
3) If adb devices will not show any devices then follow this link
http://facebook.github.io/react-native/releases/0.38/docs/getting-started.html#content
Have an android phone attached to your computer via USB cable and enable USB Debugging in the developer options. To get to the developer options open your About Phone and tap the version number several times.
Once it is in USB Debugging mode, run adb devices and a prompt will show up on your phone. Accept it and you should be good to go.
Another problem I had was I needed to path my SDK location, if you run into that then this will help: React Native android build failed. SDK location not found
I followed this official help page and also consulted this previous SO question.
But I still don't know what is wrong here.
Let's take step by step:
Ensure the package server is running. From the screenshot, you can see the command I typed "react-native run-android" and the reponse "Starting JS server..."
Ensure your device is connected... Yes, Vysor sees my device. Wee see Vysor showing the app running in the screenshot.
...USB enabled Yes, the app is running, that's why we see the red error screen, but it's the app running nevertheless.
Run "adb reverse tcp:8081 tcp:8081" Yes, the screenshot shows that I ran the command.
Device and port... Yes, did that too. See next screenshot
What am I still doing wrong? How can I make it work?
Run npm run start in one console window to start the react-native development server.
Then open a separate console window to run react-native run-android.
I sometimes ran into problems if I don't start the development server in a separate console window.
Further notes:
Make sure that your device is shown if you run $ adb devices in your console.
Note that adb reverse tcp:8081 tcp:8081 only works for Android versions 5.0 and up.
Could you provide us the screenshot of React Packager - run 'npm start' before doing 'react-native run-android'.
I am using Visual Studio Code with React Native tools extension that takes care of port forwarding, deploying the app to device/emulator and it works okay - I get similar screen at start, but clicking 'Reload' takes care of it.
I was stuck at this exact step and finally I checked my firewall and lo and behold it was blocking the connection from my device to my computer. I unblocked it and after a reload everything worked.
Try
adb reverse tcp:8081 tcp:8081
react-native start --reset-cache
react-native run-android
I am building React Native app.
It is working well when I launch the app in terminal on Mac using "react-native run-android".
But when I got the apk file and installed it on another android device manually, it does not work.
It looks like this.
If you are connected via cable, do the following:
1. Goto > Settings > About Device
2. Then Software Info
3. Then > Build Number
4. Now Tap (Click) multiple times on Build Number to Enable Developer Options
5. Here you go not the Developer Options will be visible in your Settings
6. Now Go inside the Developer Options and Enable USB Debugging Mode.
7. Open your terminal
On Windows open Android SDK Manger > Platform Tools
Type:
$ adb devices
This will show you the devices and simulator/virtual-devices that you have on you computer.
8. Forward requests from your device
Type:
$ adb reverse tcp:8081 tcp:8081
9. Run it
Type:
$ npm run android
The app should appear on your device
Looks like the source code in your APK is looking for the package server.
Read this on how to build APKs for react-native: React-Native - Generating Signed APK
If your devices is connected via cable:
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
Otherwise, you can still do this via Wifi by following the last point in the error:
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
Please find the below steps to run react-native code on a physical mobile device:-
Please make sure you are on the same wifi network(Mobile and Laptop).
Run your code and install it on the mobile through the Android Studio.
The app will install and asking you to change your "dev settings".
Shake your phone and go to "dev settings" and type your machine's IP address(192.16.XX.XXX:8081).
Close the app once and open again, in the terminal you will see like this
6. wait for a minute app will install and reflect the changes.
Get a list of all the devices:
adb devices
Then set the which device to run on:
adb -s <device name> reverse tcp:8081 tcp:8081
Then deploy the app:
react-native run-android
If you've upgraded your version of react-native since generating your android project files, you might want to regenerate those now. I think you can use react-native upgrade.
The following are required in order to run a React Native app on Android:
Android Studio
Android SDK
JDK 8 (installation instructions for macOS here and Windows here)
Answer Source: Make An App
We can run the React Native app on Android platform by running the following code in the terminal.
react-native run-android
Before you can run your app on Android device, you need to enable USB Debugging inside the Developer Options.
If you get a “bridge configuration isn’t available” error. Then use below command to solve
adb -s tcp:8081 tcp:8081
Now re-run the app using
react-native run-android
The command for correcting networking on the physical device should instead be:
adb -s reverse tcp:8081 tcp:8081
When USB Debugging is enabled, you can plug in your device and run the code snippet given above.
Configure your app to connect to the local dev server via Wi-Fi
Make sure your laptop and your phone are on the same Wi-Fi network.
Open your React Native app on your device. You can do this the same
way you'd open any other app. You'll see a red screen with an error.
This is OK. The following steps will fix that. Open the Developer
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.
The Native Android emulator is slow. We recommend downloading Genymotion for testing your app.
The developer menu can be accessed by pressing command + M.