So I literally just started my react native app and am trying to run the app on the simulator. I am using Genymotion and am on the Mac. I have upgraded Genymotion to the latest.
Stack:
npm: 6.4.1
react-native: 0.57.1
react-native-cli: 2.0.1
I have done these steps:
adb reverse tcp:8081 tcp:8081
npm start
react-native run-android
I did steps 1-2 in one terminal tab and step 3 in another. I have tried to add port 8081 as a flag on step 3 and that did not work. I also tried to do this:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
and it did not work. Instead I get this as an error:
Unable to resolve module `#babel/runtime/helpers/interopRequireDefault` from `/Users/jeffrey/projects/desti/index.js`: Module `#babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map
Update:
Ok I resolved it. I added this to my dependecies: "#babel/runtime": "^7.0.0-beta.55". I yarn installed and did steps 1-3 again. However, now I run into the issue of 'could not connect to development server'
Update2:
nvm, what I said before resolved it. I don't know what happened with that device I created in Genymotion, but I had to delete it and recreate it and it worked. I noticed this because I had a Pixel simulator on Genymotion and it worked fine, but not this one.
How should I close this?
If you cannot load it from localhost, and exhausted all options - try the below:
Option 1 (Change your listening address IP and port)
Get your Mac IP Address:
Use ipconfig getifaddr en1 for wireless, or ipconfig getifaddr en0 for ethernet.
(Kindly taken from: https://apple.stackexchange.com/questions/20547/how-do-i-find-my-ip-address-from-the-command-line)
Open your development console in React Native:
Go to your emulator > CMD + M or 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 (enter the IP you have from your command prior and the port will likely be 8081) like 1.1.1.1:8081
Go back and reload JS. If the metro bundler has not started, in your cmd type react-native start.
Option 2: From Android Studio
Open your project in Android Studio and Run your project there. Again, if the metro bundler isn't present run the react-native start
I found out the answer myself. I needed to add the dependency: "#babel/runtime": "^7.0.0-beta.55". I don't know why it solved it, but it did.
I execute the project with react-native run-android and in another terminal, i do:
npm run react-devtools
and it opens the new window of electron that says:
The react native app it will open in a few seconds...
but nothing happens.
I put in the simulator toggle inspector with Ctrl + m and i can see in networks that it makes a request to http://localhost:8097 and the result is it fails to connect and keeps trying with the same result.
The window of electron that is open it says that it wait connections to the port 8097 so i can see is trying to connect but with no results!
You need to run this command in a new terminal adb reverse tcp:8097 tcp:8097
react-devtools v4 is incompatible with react-native
try version 3 instead of version 4:
npm install -d -g react-devtools#3.x, it's worked for me.
The answer by #Unemployed3494 didn't work for me. Instead I killed all running processes belonging to my Mac OS user with this command:
pkill -u username
After doing so, react devtools connected as expected to the simulator.
Trying to create a react-native project on Android 4.4.2 I get this error screen
and couldn't find any way to resolve it. I tried restarting packager, reconnecting device, even reinstalling react native and starting new project. On 6.0.0 and later versions it works just fine.
A possible solution for this is that you most probably not bundling your application first, perform the following steps and then deploy your app-debug.apk to your device
$ cd myproject
$ react-native start > /dev/null 2>&1 &
$ curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
(if the folder assets does not exists create it)
Then run from project root
$> (cd android/ && ./gradlew assembleDebug)
install the created apk to you device, from location: android/app/build/outputs/apk/app-debug.apk
let me know if that fixes your issue
EDIT:
You can simply put it to your package.json as a script to automate it, I believe it will be fixed in upcoming releases of react-native and will be executed prior assembling the final APK, hence this won't be needed (I hope as well)
put :
"scripts": {
"build": "(cd android/ && ./gradlew assembleDebug)",
"start": "node node_modules/react-native/local-cli/cli.js start",
"bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
},
or as mentioned the curl equivalent, but for most cases the above is more robust
I came across this issue as well.
What I did was force kill the app on my device, then I opened up another console and ran
react-native start
and then I opened the app again from my device and it started working again.
EDIT: If you are using an android device via USB and have unplugged it or your computer went to sleep, you may have to first run
adb reverse tcp:8081 tcp:8081
Just got this error. Here's what I did to fix:
I selected Dismiss, Went into the Developer menu, then Dev Settings,
Choose Debug server host & port for device, I added my computers IP address and the port: 192.168.0.xx:8xxx, use whatever your developer machines assigned IP address is on your wifi network. The port is usually :8081
Once I did this, all went well. Also, while you're in the dev menu remember to select Enable Live Reload and Debug JS Remotely, it makes your life much-much easier while debugging.
This is what worked for me (After trying every other solution i found ...):
Run adb reverse tcp:8081 tcp:8081 inside \Android\sdk\platform-tools
I got this also when I started for the first time with React Native, using a physical device. If that's the case, you need to do some extra things before you can get started. You have to enter some information about your development machine in the 'Dev Settings' of React Native.
When you see the error, shake your device. A dialog will popup, the last option will be 'Dev Settings'. Select 'Debug server hot & port for device' and enter your local IP and the used port (usually 8081).
See the last paragraph of https://facebook.github.io/react-native/docs/running-on-device-android.html
If none of the solution work for you try this:
I found that my <root>/android/app/build/intermediates/assets/debug folder was empty and by running cd android && ./gradlew assembleDebug was not creating those files required, which are later used by javascript thread in our react native apps.
I ran manually the following command which the debug build command should have created ideally.
node node_modules/react-native/local-cli/cli.js bundle --platform android --dev true --reset-cache --entry-file index.android.js --bundle-output /<path to dir>/android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest /<path to dir>/android/app/build/intermediates/res/merged/debug
After running these commands I found two bundle files in this directory <root>/android/app/build/intermediates/assets/debug
And then a I ran again cd android && ./gradlew installDebug my app started working again.
Will debug more and would update what is failing actually.
In a separate terminal, connect your device to the computer and run the following commands:
react-native start
cd user/Library/Android/sdk/platform-tools/
./adb reverse tcp:8081 tcp:8081
Application terminal:
react-native run-android
install apk on your device from this location android/app/build/outputs/apk/app-debug.apk
It's little too late but this really works for me.
react-native run-android.
react-native start.
First command will build apk for android and deploy it on your device if its connected. When you open the App it will show red screen with error. Then run second command which will run packager and build app bundle for you.
see issue:
1.react-native start
2.click Reload(R,R) on your device.
Try this command in terminal and then reload. It worked for me
adb reverse tcp:8081 tcp:8081
restart the genymotion
run react-native run-android
the problem was solved
I was having the same exception on the device Z3 Compact D5803 - 6.0.1
I went opened the .buckconfig file and changed the line:
target = Google Inc.:Google APIs:23
to
target = Google Inc.:Google APIs:24
Because i saw in SDK Manager that Android 6.X has api level 24.
For me, it's because adb was not in the PATH. It's located /Users/man/Library/Android/sdk/platform-tools for me, it may be somewhere else for you, but anyway, find it and add it to your path to see if that help.
Since you are using Android < 5.0 you can't use the default adb reverse method, but Facebook has added official documentation to connect to the development server via Wi-Fi, which would support your version. Quoting the instructions for MacOS, but they also have them for Linux and Windows:
Method 2: Connect via Wi-Fi
You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
You can find the IP address in System Preferences → Network.
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. The following steps will fix that.
Open the in-app Developer menu.
Go to Dev Settings → 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).
Go back to the Developer menu and select Reload JS.
It had this issue "randomly" and took me sometime to realize what was wrong in my scenario.
After I have updated to React-native-cli 2.0.1, there was a message output to the log which helped me to dig and find the root cause:
JS server not recognized, continuing with build...
After researching some links I found this one:
Unable to recognize JS server
Since I´m on windows, I ran netstat and found out that my VLC player was also running on port 8081 causing the issue.
So, in my case, if I started the vlc server prior to the react-native server it wouldn´t work.
This same log message wasn´t output on previous versions of the react-native-cli, making it fail silently.
TL, DR: check if there´s anything running on the same port as the package manager (8081 by default)
someone suggested the following one
react-native run-android
react-native start --reset-cache,
But in my case, I just close the cli command prompt window and used the following.
npx react-native run-android
and it worked fine.
My way are:
react-native start
After that in your device using:
click to Reload.
See in console react-native, it will be fetch js bundle data.
My issue was that I went through my AndroidManifest.xml file and had removed the line
<uses-permission android:name="android.permission.INTERNET" />
because my app will not need internet. However, the react native debugging app does need internet access (to access the packager) Whoops. :)
I had the same problem. When I did create a react native project via create-react-native-app AwesomeProject it worked well in Expo app on phone. After that I wanted to use that quickstart project for developing my project and got same error as you do.
After some research I find out it's better to start new project with react-native init AwesomeProject (with all setting in react native docs) Then run this command:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
That should fix the thing with bundle (--dev false is not showing warnings)
All you need to do for app to run on your virtual / real device is:
react-native run-android
And it should be working just fine. At least it worked for me.
Try to clean cache
react-native start --reset-cache
Please check if you have following error when you run react-native run-android:
adb server version (XX) doesn't match this client (XX); killing...
In that case make sure /usr/local/opt/android-sdk/platform-tools/adb and /usr/local/bin/adb are pointed to the same adb
In my case one was pointed to /Users/sd/Library/Android/sdk/platform-tools/adb (Android SDK), but another was pointed to /usr/local/Caskroom/android-platform-tools/26.0.2/platform-tools/adb (Homebrew)
And issue have been fixed after both of them pointed to /Users/sd/Library/Android/sdk/platform-tools/adb (Android SDK)
I got this error too, really confused. cuz all answers does not work.
Just after add adb to path.
For me, I had side-sync enabled and active. Closing it imediately made the issue go away. It might be worth closing this or any other communication between PC and device
I ended up having to open up the port that I was using (8081 by default). On Linux, you can do the following
sudo iptables -A INPUT -p tcp --dport 8081 -m conntrack --ctstate NEW,ESTABLISHED -j ACCEPT
sudo iptables -A OUTPUT -p tcp --sport 8081 -m conntrack --ctstate ESTABLISHED -j ACCEPT
You can test to see whether you actually need to do this. Just navigate to your dev server in Chrome on your Android device. If it doesn't respond, then this might be what you need. If it does respond, then this won't help you.
For me the problem was that 'adb' was not recognised - check this answer.
To fix this add C:\Users\USERNAME\AppData\Local\Android\sdk\platform-tools to Environment Variables
Most of us face this problem for the first time, when we start react native project#1.
Few simple steps solved my problem:
I created a sample project using command:
react-native init ReactProject1
Solution
The fix is to help local-cli\runAndroid\adb.js to find adb.exe, the same way as local-cli\runAndroid\runAndroid.js:
find replace statement under projectname(whatever you have given)\node_modules\react-native\local-cli\runAndroid
Replace:
const devicesResult = child_process.execSync('adb devices');
By:
const devicesResult = child_process.execSync( (process.env.ANDROID_HOME ? process.env.ANDROID_HOME + '/platform-tools/' : '') + 'adb devices');
after doing above replacement, just run react-native run-android in your cmd, it will bundle apk and at first try to install js bundle locally in your device. (Got Success)
"npm start"
I just closed the terminal and open a new one. Went to project location by cd command. And then just simply type - "npm start". and then 'r' for reload. Everything just vanished. I think everybody should try this at once.
I tried many of the suggestions above/below, but ultimately, the issue I faced was a permissions one with watchman, which was installed using homebrew earlier. If you look at your terminal messages while trying to use the emulator, and encounter 'Permission denied' errors with regards to watchman along with this 'Could not get BatchedBridge" message on your emulator, do the following:
Go to your /Users/<username>/Library/LaunchAgents directory and change the permissions settings so your user can Read and Write. This is regardless of whether or not you actually have a com.github.facebook.watchman.plist file in there.
I found that I needed to also add in a
react-native upgrade
to get the application to run correctly.
I got the same issue but it was a stupid mistake from myself...
From Android studio, I was launching installDebug/installRelease gradle script from app projet instead of root projet.
I'm trying to do the react native 'hello world', and I'm using usb debugging on my android.
I ran react-native run-android, then react-native start.
I can view the js file in localhost, but get 'could not connect to development server' message on my phone.
I followed the instructions to run adb reverse tcp:8081 tcp:8081, then realized that command doesn't exist, so I ran adb forward tcp:8081 tcp:8081 instead.
Still no luck. Using react-native#0.22.0, ubuntu 14.04. My phone is nexus 5 on android 6.0.1.
How can I allow my phone to access my localhost?
By the way, it is working over wifi, but I'd like to get it working over usb.
Just another scenario, this error happened to me when I forgot to run react-native start command. I usually follow the steps here when I start new project. The steps in a nutshell are as follows (Android in my case):
Start Android Studio -> AVD Manager -> select your aVD and click Start from action
inside the directory where you want to create your new project, open your command line and run:
$ react-native init <Your new project name/it is also the registration name>
$ cd <the new directory you created>
$ react-native start //This is the step that I forgot
Open a new command prompt and run the following inside the same directory(you just created) to launch the app on your AVD.
$ react-native run-android
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
You'll find in the file index.android.js in the home directory of your project, the last line contians the App registry using the same name you used in the first command above
adb reverse tcp:8081 tcp:8081 Only works for android 5.0 + for running app on devices with android versions lesser than 5.0 hit following command after npm start is done in Terminal (in app directory folder).
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
now run the app, it will work. Only drawback is that every time you make a change you need to fire the command again and run the app again.
I found the solution :)
I am on ubuntu 16, so, I used command ip addr show which gave me my computer ip address.
I used this ip address and I was able to access localhost on my mobile.
Finally I added the ip address and port no to devsettings of android phone and My app was able to access development server
10 mins ago I had the same problem I guess, and the way I solved this was reading this
https://facebook.github.io/react-native/docs/running-on-device-android.html
and when I did that, I found that I didn't have android-tools-adb installed,
so looking around I found
'No command 'adb' found' error on Ubuntu
which gives me the answer
sudo apt-get install android-tools-adb
and after all this I set
export PATH=${PATH}:~/android-sdk-linux/tools
export PATH=${PATH}:~/android-sdk-linux/platform-tools
then everything works fine, now I can see my app in my Android device.
BTW the option I choose from react native docs was the one that says me
"Using adb reverse
Note that this option is available on devices running Android 5.0+ (API 21).
Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).
Run adb reverse tcp:8081 tcp:8081
You can use Reload JS and other development options with no extra configuration
I am having seen the same issue, and that's all because the android app don't have this permission:
<uses-permission android:name="android.permission.INTERNET" />
I had a similar problem. I would get this error when trying to get it to run on device. It was working fine on my simulators on my computer.
The problem was when I would do adb devices or react-native run-android I would get "ADB is Not Recognized as an internal or external command".
So my fix was to add the path to adb.exe's parent directory to my Environment Variables and then restart my command prompts. After I did that, adb devices would not throw the "unrecognized internal external blah" and it listed my device. I then ran react-native run-android and on startup no more red screen showing the completely useless error message Error calling AppRegistry.runApplication! :)
So I found ADB was located in my folder:
C:\Users\dell\AppData\Local\Android\sdk\platform-tools\adb.exe
I am on a Windows 10 system. dell is my user name of the computer.
So I went to System Environemnt Variables then found "Path" then clicked "Edit", then clicked "New" and added in "C:\Users\dell\AppData\Local\Android\sdk\platform-tools".