When i run react-native run-android android building stuck in :app:mergeDebugResources and does not report any error.
Here is my package.json file :
{
"name": "listeo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.48.2"
},
"devDependencies": {
"babel-jest": "21.0.2",
"babel-preset-react-native": "3.0.2",
"jest": "21.0.2",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
Android build tools version is : 23.0.1
I tested it with android build tools 25 and 26 but didn't fixed.
How can i solve this problem?
try to remove the node_modules folder, then run npm install, also dont forget to check and update the required components on your SDK Manager, after that you can react-native run-android
try with run cd android && ./gradlew clean && cd.. && react-native run-android
also keep build tool as it's default also be patient some times takes time
Related
I am using Android Studio Emulator and configured react-native-web support as per this doc as well. But Whenever I run npm run android it gets the below error:
"Could not get BatchedBridge, make sure your bundle is packaged correctly"
I tried many solutions out there like:
Delete node_modules and re install
Clear cache in react-native start --reset-cache
Run react-native start before run-android
check .npmrc
But no solution yet. There is no error in metro terminal as well.
Below is my package.json
{
"name": "shipdemo",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start --reset-cache",
"test": "jest",
"lint": "eslint .",
"web": "webpack serve -d source-map --mode development --config \"./web/webpack.config.js\" --inline --color --hot",
"build:web": "webpack --mode production --config \"./web/webpack.config.js\" --hot"
},
"dependencies": {
"react": "17.0.1",
"react-dom": "^17.0.2",
"react-native": "0.64.2",
"react-native-web": "^0.16.5"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-react-native-web": "^0.16.5",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1",
"url-loader": "^4.1.1",
"webpack": "^5.39.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"jest": {
"preset": "react-native-web"
}
}
UPDATE:
After enabling Pause on Caught Exception, I got below in the dev tools.
At the same time, Now I got an error in metro as well
I have the fix but the reason behind it, posting this answer for increasing the visibility of the solution which is equivalent to this commit.
So I removed .babelrc file and moved the module resolver settings to the webpack config, updated babel.config.js so now the web related settings will not disturb the App-related babel settings.
I have updated the mentioned article as well.
.babelrc:
<Deleted>
babel.config.js:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
web/webpack.config.js:
...
...
...
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: ['module:metro-react-native-babel-preset'],
// Re-write paths to import only the modules needed by the app
plugins: [
'react-native-web',
[
'module-resolver',
{
alias: {
'^react-native$': 'react-native-web',
},
},
],
],
...
...
...
restart your Metro Bundler
yarn start --reset-cache
I can try to add react-native-router-flux in the react-native project but getting an error while run project please blew screenshot.enter link description here
{
"name": "AsseProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"babel-preset-flow": "^6.23.0",
"babel-preset-react-native": "^4.0.1",
"react": "16.9.0",
"react-addons-pure-render-mixin": "^15.6.2",
"react-native": "^0.61.5"
},
"devDependencies": {
"#babel/core": "7.8.4",
"#babel/runtime": "7.8.4",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.4",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
In your scenario I think you have not install the native dependencies in order to work with router flux.
SOLUTION
Install native dependencies used by React Native Router - Link
Since the v4.2.0-beta.x is based on React Navigation v4.x you need to install react-navigation v4.x native dependencies before install router flux.
Install navigation using this
npm install react-navigation
After that run this code and install other dependencies
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
Finally you can install router flux using this command
npm install --save react-native-router-flux
Clean your project and run the project using react-native run-android / react-native run-ios
NOTE : If you are using react-navigation V5.x you will not be able to use router flux. Therefore make sure you have installed react-navigation v4.x
Anyone facing the problem on the latest realm (2.25.0) with react native (0.59.0)?
There's no problem with when I link the realm to react-native. However, when I ran the 'react-native run-android' on a real device (currently I'm testing on two devices, Oneplus 5 - Android Pie & Oppo F1s - Android Lollipop), the bundling successful, but the apps never get started. I unlinked the realm from react-native, it returns me 'Missing Realm Constructor...' (which is in my expectation).
It does works on emulator without any problem, it only runs into a problem on real devices.
Below is my package.json
{
"name": "testing",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.0",
"realm": "^2.25.0"
},
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/runtime": "^7.3.4",
"babel-jest": "^24.5.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.0",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
Steps to reproduce:
react-native init testing
npm install --save realm
react-native link realm
react-native run-android
Does anyone have an idea on this issue?
Appreciate for your help.
try this:
go to build.gradle then
android {
...
defaultConfig {
...
and add this
ndk {
abiFilters 'armeabi-v7a', 'x86'
}
to default config. it must look like this :
defaultConfig {
...
ndk {
abiFilters 'armeabi-v7a', 'x86'
}
}
I am trying to add Wix navigation library to my project according to https://wix.github.io/react-native-navigation/#/docs/Installing but when i run the npm install --save react-native-navigation command in terminal and then i open my android project in android studio, i don't see any library module for navigation in my project. But the name of react-native-navigation will appear in package.json file.
here is my package.json file:
{
"name": "PleaseAnswer",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.57.8",
"react-native-navigation": "^2.5.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
Android:
if you're using V2 version than react-native link won't automatically link your package to android. I would recommend you to follow docs https://wix.github.io/react-native-navigation/#/docs/Installing
iOS: I recommend you to use cocoapods for iOS configuration Add pod 'ReactNativeNavigation', :path => '../node_modules/react-native-navigation' in your podfile and run pod install
I'm trying to run a react native app on my AVD using this command :
react-native run-android
but getting the following error:
bundling failed: Error: Plugin 0 specified in "C:\\Users\\ASUS\\test\\node_modules\\babel-preset-react-native\\index.js" provided an invalid property of "default" (While processing preset: "C:\\Users\\ASUS\\test\\node_modules\\babel-preset-react-native\\index.js")
at Plugin.init (C:\Users\ASUS\test\node_modules\babel-core\lib\transformation\plugin.js:131:13)
at Function.normalisePlugin (C:\Users\ASUS\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:152:12)
at C:\Users\ASUS\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:184:30
at Array.map (<anonymous>)
at Function.normalisePlugins (C:\Users\ASUS\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (C:\Users\ASUS\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at C:\Users\ASUS\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
at C:\Users\ASUS\test\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
at Array.map (<anonymous>)
.babelrc :
{
"presets": [
"react-native"
"#babel/preset-flow"
]
}
package.json :
{
"name": "test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.4.1",
"react-native": "^0.55.4"
},
"devDependencies": {
"babel-jest": "23.4.0",
"babel-preset-react-native": "5.0.2",
"jest": "23.4.1",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
I'm using Windows , node.js v 8.11.3 & react native v 0.55.4
I've already tried everything recommended on internet(specially github) but still no luck. Really appreciate it if some one can help.
This is bug in babel-preset-react-native
Set the version:
yarn remove babel-preset-react-native
yarn add babel-preset-react-native#2.1.0
Its some incompatible versioning problems in React native.Try this it will work
1.Change versions of following in package.json
In dependencies :-
"react": "16.3.1"
"react-native": "0.55.4"
In devDependencies :-
"babel-preset-react-native": "2.1.0"
2. Delete node_modules and run npm install --save
Then run application by react-native run-android
It will run fine ...
Should use the jest to latest version, it can works
"babel-jest": "23.3.0",
"babel-preset-react-native": "5.0.2",
"jest": "23.3.0",
Well it may be late , but i will help other as below package.json is working till date 20.aug.2018
Below package.json most of dependencies like axios, Redux, Native base, react-native-router-flux ..etc used in react native projects, so version i mentioned below compatible to each other.
Cheers.
{
"name": "Example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"resolutions": {
"*/#babel/cli": "7.0.0-beta.54",
"*/#babel/core": "7.0.0-beta.54",
"*/#babel/code-frame": "7.0.0-beta.54"
},
"dependencies": {
"axios": "^0.18.0",
"eslint": "^5.2.0",
"native-base": "2.6.1",
"prop-types": "^15.6.2",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-router-flux": "^4.0.1",
"react-native-timeline-listview": "^0.2.3",
"react-navigation": "^2.11.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "4.0.0",
"jest": "23.5.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
I had this issue, I needed to downgrade babel-preset-react-native version.
If you use yarn
yarn remove babel-preset-react-native
yarn add babel-preset-react-native#4.0.0
or use npm commands
npm uninstall babel-preset-react-native
npm install babel-preset-react-native#4.0.0