react-native run-android not starting bundler so i tried
react-native start it showing below error.
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
events.js:167
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::8081
at Server.setupListenHandle [as _listen2] (net.js:1286:14)
at listenInCluster (net.js:1334:12)
at Server.listen (net.js:1421:7)
at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:157:18
at new Promise (<anonymous>)
at Object.<anonymous> (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:156:12)
at Generator.next (<anonymous>)
at step (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:262)
at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:422
Emitted 'error' event at:
at Server.WebSocketServer._onServerError (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/ws/lib/WebSocketServer.js:82:50)
at Server.emit (events.js:187:15)
at emitErrorNT (net.js:1313:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
react-native info
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM)2 Duo CPU E7600 # 3.06GHz
Memory: 3.36 GB / 12.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.12.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 21.1.2, 23.0.1, 25.0.0, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
API Levels: 21, 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.2 => 0.57.2
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
package.json
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.2"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
I tried cleaning cache and reverse adb still am getting that issue
react-native run-android showing below error.
Android Home configuration
export ANDROID_HOME=/<Path>/android-sdk-macosx
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
How to resolve this issue.
I tried following steps it resolves my issue
Running packager on different port react-native start --port 8084 --reset-cache
Run react-native run-android --port 8084 in second Command Prompt window.
After error screen appear clicking Android Ctrl + M, iOS Command + D.
Click Dev Settings button at the bottom.
Click Debug server host & port for device button.
Type localhost:8084 and click OK button.
Again run react-native run-android --port 8084
Replace the code with this one. The path of the file is -
node_modules\metro-config\src\defaults\blacklist.js
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
I found this solution from Github.
Its because the port 8081 is in use..
Try
react-native start --port=8080
This will work out.
Same exact problem I am facing too. I just updated to 0.59.1 and this isn't working...
As a work around, I am running the metro builder in a separate tab, and then running react in a separate tab.
react-native start --reset-cache
in one terminal and left it open
react-native run-android
in another terminal
Same issue I've faced. The above solutions didn't worked for me.
The problem was from NodeJS version.
The installed version of NodeJS was 12.11.1 in which I got the above problems. Then I replaced with the stable version 10.16.3 LTS and It works.
Hope this solution may helpful.
It's worked for me
react-native start --port=8080
I just solved by watching the youtube below..
https://youtu.be/LPYez4cs5LY
I summary like below
make the directory
"android/app/src/main/assets/"
replace sharedBlacklist variable in node_modules/metro-config/src/defaults/blacklist.js like below
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
with :
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
execute command like below on the terminal
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
Note: Solution for iOS
Updating files in node_modules is not a solution. It might fix it in your machine but won't fix it for all. Every time you reinstall the modules, you need to patch it up again.
Problem
When I ran yarn android the metro bundler successfully runs in a separate terminal and app runs with no issue.
But for yarn ios, app builds and opens up in simulator but the metro-bundler could not start so app is not running.
Cause
What I found is, react-native uses
packages/myapp/ios/myapp.xcodeproj/project.pbxproj:178 file to organize the sequence of action for a build.
buildPhases = (
9BD325B29C2F37E3FB2D5CCB /* [CP] Check Pods Manifest.lock */,
FD10A7F022414F080027D42C /* Start Packager */,
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
422396959450562FD5166D49 /* [CP] Embed Pods Frameworks */,
3C714C11B606C47481E15B97 /* [CP] Copy Pods Resources */,
You can see that(FD10A7F022414F080027D42C /* Start Packager */,) metro bundler is expected to run in the beginning so that app could connect to it ASAP.
In my case, the packager could not find the metro package as my node_modules folder has changed location. So I needed to let it know the new location.
How I solved? (Monorepo)
I dug deep and found the solution in packages/myapp/ios/myapp.xcodeproj/project.pbxproj:395
FD10344022414F080027D42C /* Start Packager */ = {
...
...
shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../../../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../../../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n";
you might notice that I am using /../../../node_modules because I have a directory structure like
.
└── node_modules
└── packages
├── common
├── myapp
└── their_app
Its normally like this ../node_modules
what I basically doing is maintaining two mobile apps in a single repo. See https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417 for more info.
In my case I just stopped Metro and tried running my app again and it worked.
For Unable to load script from assets issue, you need to follow below steps:
1] Please check whether "assets" folder exists or not in 'android/app/src/main/'
a] If it exists then, you need to delete two files(i.e. index.android.bundle and index.android.bundle.meta)
b] If it doesn't exist, then create the assets directory in it.
2] Use below commands from your root project directory:
cd android
./gradlew clean
3] Go to the root directory and check:
a] If there is only one file(i.e. index.js), then run below command:
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
b] If there are two files(i.e index.android.js and index.ios.js), then below 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
4] Finally run below command:
react-native run-android
You can go to your Users folder and delete the ".expo" directory. It might be hidden as a system directory, so view all and then delete the .expo folder.
Run npm start again.
From the error what I understand it must run bundle command first before starting JS Server
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
Finally you can check if no any dependency is missing by following command
./gradlew assembleRelease -x bundleReleaseJsAndAssets
then you can run android and react native server
react-native run-android
react-native start --reset-cache
Good Luck !
Adding android:usesCleartextTraffic="true" to the application tag in AndroidManifest work for me
<application
...
android:usesCleartextTraffic="true"
...
I solved this by running "yarn start" on another terminal before starting "react-native run-android"
I have got the solution of the problem
go to your project and run 2 command shell
in first shell, run npm start
in the second shell, react-native run-android
then it will run
I suggest u delete this line import com.facebook.react.BuildConfig in Android / MainApplication
This is the Gradle issue.
update the distributionURL in app/gradle/wrapper/gradle-wrapper.properties
from
distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
to
distributionUrl=https\://services.gradle.org/distributions/gradle-6.6-all.zip
1.- Create directory:
android/app/src/main/assets
2.- edit file project:
node_module\metro-config\src\defaults\blacklist.js
or RN 0.64:
node_module\metro-config\src\defaults\exclusionList.js
Replace :
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
with :
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
or RN 0.64
var list = [/website\/node_modules\/.*/, /.*\/__tests__\/.*/];
with:
var list = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
3.- in folder project run 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
4.- react-native run-android
This work for me!
Hope everyone is doing great i have a issue in react native command i made the assets folder and after that running a command
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
but its giving me error again n again
Unable to resolve module `AccessibilityInfo` from `C:\AnkitaFolder\Vanilla1\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
I tried everything possible but its still not working once it worked and again its giving the same error.Version i am using are mentioned below..
NPM-VER- 6.3.0
"react": "16.4.1",
"react-native": "0.56.0"
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "5",
"jest": "23.4.2",
"react-test-renderer": "16.4.1"
},
Try to clean npm and all caches. If its not helping maybe your bundle props is wrong or files corrupted
rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-*
cd android && ./gradlew clean
Delete all node_modules
npm cache clean or npm cache clean --force
Or
On windows React 0.56 not working forhttps://github.com/facebook/react-native/issues/19953alsohttps://github.com/facebook/react-native/issues/20353
I want to generate the unsigned app-release.apk without the react-packager server.
I am running the following commands for that.
cd react-native-project-dir
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/
After the following command I get the error in command prompt like these:
cd android && gradlew assemblerelease
app:processReleaseManifestessReleaseManifest
:app:processReleaseResources
D:\ReactNativeProject\android\app\build\intermediates\res\merged\release\drawable-mdpi-v4\image_background_unique_2.jpg: error: Duplicate file.
D:\ReactNativeProject\android\app\build\intermediates\res\merged\release\drawable-mdpi\image_background_unique_2.jpg: Original is here. The version qualifier may be implied.
:app:processReleaseResources FAILED
FAILURE: Build failed with an exception.
What went wrong:
Execution failed for task ':app:processReleaseResources'.
com.android.ide.common.process.ProcessException: Failed to execute aapt
And I am not able to generate the app-release.apk and not understanding why the image_background_unique_2.jpg file is getting added two times in different folders.
The issue is that the new version of react-native bundles the assets under /app/build/intermediates/res/merged/release instead of app/src/main/res
To resolve it, this is what I did
rm -rf android/app/src/main/res/drawable-*
Now bundle assets using 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/build/intermediates/res/merged/release/
Note the updated --assets-dest in the above command. Assembling the APK worked ok after that!
react-native run-android --variant=release
I was trying to generate a signed APK following the steps from https://facebook.github.io/react-native/docs/signed-apk-android.html to generate a signed apk.
I had the same issue. Showed error: Duplicate file for some of my images when I ran ./gradlew assembleRelease. assembleRelease seems to cause some problems with drawable- folders. I deleted all the drawable- folders from /android/app/src/main/res/. Then I ran ./gradlew assembleRelease again. Finaly, it generated a signed APK at /android/app/build/outputs/apk/.
It seems that you bundled your app and installed it to your phone with assembleDebug. When you decided to go for assembleRelease then you should delete drawable- folders. They create problem somehow when you decide to produce an .apk file.
First delete all folders that are potentially causing this error by typing:
rm -rf ./android/app/build/intermediates/res/merged/release/drawable-*
Then change mdpi to mdpi-v4 in:
./node_modules/react-native/local-cli/bundle/assetPathUtils.js
function getAndroidAssetSuffix(scale) {
switch (scale) {
case 0.75: return 'ldpi';
case 1: return 'mdpi-v4';
case 1.5: return 'hdpi';
case 2: return 'xhdpi';
case 3: return 'xxhdpi';
case 4: return 'xxxhdpi';
}
}
Then bundle your offline includes:
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/build/intermediates/res/merged/release/
Finally build the release version of your app:
cd ./android && ./gradlew assembleRelease
Did you try a react native clean build ? Try resetting the cache and then bundle. Maybe it will resolve this issue.
I have managed to solve this problem by deleting the duplicates of the folder in react native /android/app/build/intermediates/res/merged/release/drawable-mdpi
this worked for me
Add the following code to file node_modules/react-native/react.gradle :
doLast {
def moveFunc = { resSuffix ->
File originalDir = file("${resourcesDir}/drawable-${resSuffix}")
if (originalDir.exists()) {
File destDir = file("${resourcesDir}/drawable-${resSuffix}-v4")
ant.move(file: originalDir, tofile: destDir)
}
}
moveFunc.curry("ldpi").call()
moveFunc.curry("mdpi").call()
moveFunc.curry("hdpi").call()
moveFunc.curry("xhdpi").call()
moveFunc.curry("xxhdpi").call()
moveFunc.curry("xxxhdpi").call()
}
inside def currentBundleTask = tasks.create(...
found this solution here https://github.com/facebook/react-native/issues/5787
you can do one things for debug to make react native bundle run below command
react-native bundle --assets-dest ./android/app/src/main/res/ --entry-file ./index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --dev true
For release:
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/build/intermediates/res/merged/release/
I am using react-native to bundle an Android APK.
I am able to run it properly in dev mode but have not been able to release a signed apk yet.
node version: `v5.10.0`
npm version: `3.8.3`
react-native version: `0.22.2`
Tried with babel-core versions
6.5.1
6.4.5
6.7.4
The error I am getting on running either of these commands
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/
react-native bundle --platform android --dev true --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
is
bundle: Created ReactPackager
uncaught error Error: SyntaxError: /Users/'username'/projects/personal/openchs/openchs-client/node_modules/react-native/Libraries/react-native/react-native.js:
Unexpected token (120:2)
// Note: this must be placed last to prevent eager
// evaluation of the getter-wrapped submodules above
...require('React'),
};
if (__DEV__) {
at Parser.pp.raise (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:1378:13)
at Parser.pp.unexpected (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:2817:8)
at Parser.pp.parseIdentifier (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:1227:10)
at Parser.pp.parsePropertyName (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:1070:135)
at Parser.pp.parseObj (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:986:12)
at Parser.pp.parseExprAtom (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:718:19)
at Parser.parseExprAtom (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:4305:22)
at Parser.pp.parseExprSubscripts (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:504:19)
at Parser.pp.parseMaybeUnary (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:484:19)
at Parser.pp.parseExprOps (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:415:19)
See logs /var/folders/zj/sk4075x566l8jdl1gwzjl79h0000gn/T/react-packager.log
at SocketClient._handleMessage (SocketClient.js:144:23)
at BunserBuf.<anonymous> (SocketClient.js:53:42)
at emitOne (events.js:90:13)
at BunserBuf.emit (events.js:182:7)
at BunserBuf.process (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/bser/index.js:289:10)
at /Users/mihir/projects/personal/openchs/openchs-client/node_modules/bser/index.js:244:12
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
More of my code is here - https://github.com/OpenCHS/openchs-client
Anyone that finds this and is looking for the answer, it can be found here: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
you will need to install babel-preset-react-native-stage-0 package and include it in your .babelrc presets array