My React Native App crashes after update target Sdk version and compileSdkVersion 31. It was working version 30. Google play forced us this update. The app crashes on Android 12 version devices. It works on android 10 or 11.
My package.json file:
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#notifee/react-native": "^0.12.2",
"#react-native-community/async-storage": "^1.9.0",
"#react-native-community/checkbox": "^0.5.7",
"#react-native-community/datetimepicker": "^3.0.3",
"#react-native-community/masked-view": "^0.1.9",
"#react-native-community/netinfo": "^9.3.6",
"#react-native-community/picker": "^1.5.1",
"#react-native-community/progress-bar-android": "^1.0.3",
"#react-native-community/progress-view": "^1.2.1",
"#react-native-community/push-notification-ios": "^1.4.1",
"#react-native-firebase/app": "^8.4.1",
"#react-native-firebase/messaging": "7.8.4",
"axios": "^0.21.1",
"date-fns": "^2.28.0",
"moment": "^2.24.0",
"react": "16.13.1",
"react-native": "^0.64.4",
"react-native-animated-pagination-dots": "^0.1.72",
"react-native-autoheight-webview": "^1.6.1",
"react-native-calendars": "^1.1263.0",
"react-native-countdown-circle-timer": "^2.3.7",
"react-native-directory-picker": "^0.0.2",
"react-native-document-picker": "^5.0.0",
"react-native-elements": "^2.1.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-gifted-chat": "^0.16.3",
"react-native-image-picker": "3.2.1",
"react-native-immersive-bars": "^1.0.1",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-month-year-picker": "^1.3.4",
"react-native-paper": "^4.9.2",
"react-native-pdf": "^6.2.2",
"react-native-push-notification": "^5.1.0",
"react-native-reanimated": "2.1.0",
"react-native-redash": "^14.2.3",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.5.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-swipe-list-view": "^3.2.3",
"react-native-vector-icons": "^9.0.0",
"react-native-video": "^4.4.5",
"react-native-webview": "^11.23.1",
"react-navigation": "^4.1.0",
"react-navigation-drawer": "^2.3.4",
"react-navigation-stack": "^2.0.16",
"react-navigation-tabs": "^2.5.6",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.12.0"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/runtime": "^7.11.2",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.2.2",
"eslint": "^7.6.0",
"jest": "^26.2.2",
"metro-react-native-babel-preset": "^0.61.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
build.gradle:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "30.0.2"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31
ndkVersion = "23.1.7779620"
androidXAnnotation = "1.1.0"
androidXBrowser = "1.0.0"
androidXCore = "1.0.2"
firebaseMessagingVersion = "21.1.0"
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:3.5.4")
classpath 'com.google.gms:google-services:4.3.3'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
jcenter()
maven { url 'https://www.jitpack.io' }
}
}
I had the same problem 2 days ago.
You have to do these changes:
file: android/build.gradle
Change these versions like these:
buildscript {
ext {
buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31
}
file: android/app/build.gradle
Add implementation 'androidx.work:work-runtime-ktx:2.7.0' dependency.
dependencies {
...
implementation 'androidx.work:work-runtime-ktx:2.7.0'
...
}
EDIT: As of late 2022, version 2.7.1 worked, a few other answers suggest using 2.6.0 too which you may try if they work with your system or not.
`implementation 'androidx.work:work-runtime-ktx:2.7.1'`
file: android/app/src/main/AndroidManifest.xml
Add android:exported="true" to the main activity.
<activity
android:name=".MainActivity"
android:exported="true"
...
>
Also you need to add android:exported="false" to each XML tag that has an intent-filter like services and others.
For example, this is my notification service that has an intent-filter as its child:
<receiver android:exported="false" android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="android.intent.action.QUICKBOOT_POWERON" />
<action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
</intent-filter>
</receiver>
EDIT: Besides this make sure you are using JDK 11
EDIT: Also if the problem persists delete .gradle folder inside the android folder.
Try add this line inside your dependencies in build.gradle
dependencies {
// ...
implementation 'androidx.work:work-runtime:2.7.1'
}
Maybe is that problem here:
Targeting S+ (version 31 and above) requires that one of FLAG_IMMUTABLE or FLAG_MUTABLE be specified
Can you also increase your buildToolsVersion to "31.0.0"
Please also make sure that it uses Java 11 and not Java 8.
Dude. Have you tried to update other libraries?
I had same issue and upgrading firebase library version was the solution.
This might be not helpful.
I hope you will fix it.
Related
I use react-native-google-fit package to get the steps data about the user. In my case this package works fine in some devices but in some others cant get any data or response from the google-fit API.
I cant understand what is the problem, as I know step recording api of the google-fit is not implemented in default as it is in IOS(health-kit). I implemented bugnsag to track the steps and the process stucks when I call google-fit API to get step samples. No error or exception thrown it just feels like hanging.
If anyone have some idea or solution about it I would be very happy to hear.
package.json
"dependencies": {
"#bugsnag/react-native": "^7.3.2",
"#react-native-community/art": "^1.2.0",
"#react-native-community/async-storage": "^1.8.1",
"#react-native-community/cli-platform-ios": "^4.10.1",
"#react-native-community/datetimepicker": "^3.0.1",
"#react-native-community/masked-view": "^0.1.7",
"#react-native-community/viewpager": "^4.1.0",
"#react-native-firebase/app": "^7.1.0",
"#react-native-firebase/messaging": "^7.1.0",
"#react-navigation/native": "^5.0.9",
"#react-navigation/stack": "^5.1.1",
"axios": "^0.19.2",
"dayjs": "^1.8.33",
"firebase": "^7.14.6",
"localized-strings": "^0.2.4",
"react": "16.9.0",
"react-native": "^0.61.5",
"react-native-device-info": "^5.5.7",
"react-native-document-picker": "^3.5.4",
"react-native-dots-pagination": "^0.1.9",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.6.0",
"react-native-get-random-values": "^1.3.1",
"react-native-gifted-chat": "^0.16.1",
"react-native-google-fit": "^0.13.0",
"react-native-highlight-words": "^1.0.1",
"react-native-image-picker": "^2.3.1",
"react-native-onesignal": "^3.9.0",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.3.0",
"react-native-vector-icons": "^6.6.0",
"react-native-video": "^4.4.5",
"react-native-webview": "^9.1.4",
"react-navigation": "^4.2.2",
"react-navigation-stack": "^2.2.3",
"react-navigation-tabs": "^2.8.13",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"rn-apple-healthkit": "^0.8.0"
},
android/build.gradle
buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:3.4.2")
classpath('com.google.gms:google-services:4.3.3')
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}
android/app/build.gradle
defaultConfig {
applicationId "com.xx"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 29
versionName "1.4.18"
multiDexEnabled true
}
dependencies {
implementation project(':react-native-webview')
implementation project(':react-native-vector-icons')
implementation project(':react-native-fs')
implementation 'com.google.firebase:firebase-analytics:17.2.2'
implementation "com.android.support:support-core-utils:28.0.0"
implementation "com.android.support:appcompat-v7:28.0.0"
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+"
android.xml permissions
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION"/>
function that calls google-fit-api
function getStepsForAndroid(startDate, endDate) {
const options = {
startDate: new Date(startDate).toISOString(), // required ISO8601Timestamp
endDate: new Date(endDate).toISOString() // required ISO8601Timestamp
};
return GoogleFit.getDailyStepCountSamples(options)
}
Well I solved the issue.. Still its very weird issue but, first of course its my fault to not check documentation again. Seconds its bad documentation and naming.. Like how you can write READ_WRITE and it can only mean WRITE?
scopes: [
Scopes.FITNESS_ACTIVITY_READ_WRITE,
Scopes.FITNESS_BODY_READ_WRITE,
],
Its very wrong documentation because just after these example it shows how to retrieve steps(as I just followed those). So instead of top I added two extra permissions and the problem is solved.
scopes: [
Scopes.FITNESS_ACTIVITY_READ,
Scopes.FITNESS_ACTIVITY_READ_WRITE,
Scopes.FITNESS_BODY_READ,
Scopes.FITNESS_BODY_READ_WRITE,
],
So this small issue cost me like few weeks which is actually still unlogical because it worked with only two permissions in half of the devices.. Also I google-fit API has problem because in this case this API could fail and we could catch the error and understand that its the problem of lack of permissions.
When i installed React Native WebView
After installation when i run react-native run-android showing error
Task :app:transformDexArchiveWithDexMergerForDebug FAILED
Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings
163 actionable tasks: 28 executed, 135 up-to-date
Package.json
"#react-native-community/async-storage": "^1.8.1",
"#react-native-community/masked-view": "^0.1.7",
"#react-navigation/native": "^5.1.3",
"native-base": "^2.13.12",
"npm-check-updates": "^4.1.0",
"react": "16.13.1",
"react-native": "0.62.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-media-controls": "^1.1.1",
"react-native-paper": "^3.6.0",
"react-native-reanimated": "^1.7.1",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0",
"react-native-track-player": "^1.2.2",
"react-native-video": "^5.1.0-alpha6",
"react-native-webview": "^9.0.2",
"react-navigation": "^4.3.5",
"react-navigation-drawer": "^2.4.9",
"react-navigation-stack": "^2.3.9",
"react-navigation-tabs": "^2.8.9",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-persist": "^6.0.0"
Perhaps your app has a method of 64K or more. You can add this in android/app/build.gradle
android{
defaultConfig{
.......
multiDexEnabled true
}
}
dependencies {
...
def multidex_version = "2.0.1"
implementation 'androidx.multidex:multidex:$multidex_version'
}
MainApplication.java
public class MainApplication extends MultiDexApplication implements ReactApplication {
Revert last added package OR assets files (Like: Sometime images corrupted & error while run react-native run-android)
Error while merging dex archives:The number of method references in a .dex file cannot exceed 64K.
The code worked properly before add react-native-firebase/admob. But after adding that library build fails. When i removing the react-navigation built. Why these two libraries cannot use same app?
Here is my app.json file and the build.gradle files.
"#react-native-community/masked-view": "^0.1.6",
"#react-native-firebase/admob": "^6.2.0",
"#react-native-firebase/app": "^6.2.0",
"react": "16.8.6",
"react-native": "0.60.0",
"react-native-gesture-handler": "^1.5.3",
"react-native-image-zoom-viewer": "^2.2.27",
"react-native-indicators": "^0.17.0",
"react-native-modal": "^11.5.3",
"react-native-reanimated": "^1.7.0",
"react-native-responsive-dimensions": "^3.0.0",
"react-native-safe-area-context": "^0.6.2",
"react-native-screens": "^2.0.0-alpha.29",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.16"
},
buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
supportLibVersion = "28.0.0"
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:3.4.1")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}```
Thank you very much and finally I have fixed the problem. I changed the code as
defaultConfig {
// ...
multiDexEnabled true }
I added multiDexEnabled true line to defaultconfig in android/app/build.gradle file
You have to use Multidex in android if the number of method references in a .dex file exceed 64K . To know how to use Multidex please see it doc
When I use React-native-fast-image with react-native, it throws an error
* What went wrong:
Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : Attribute application#appComponentFactory value=(androidx.core.app.CoreComponentFactory) from [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86
is also present at [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91 value=(android.support.v4.app.CoreComponentFactory).
Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:7:5-138 to override.
my package.json file is
{
"name": "FastImageDemmo",
"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",
"react-native-fast-image": "^7.0.2"
},
"devDependencies": {
"#babel/core": "^7.5.4",
"#babel/runtime": "^7.5.4",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
my app.gradle is
dependencies {
implementation project(':react-native-fast-image')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
implementation "com.facebook.react:react-native:+" // From node_modules
}
I have tried many solutions like adding following code in gradle.properties
android.useAndroidX=true
android.enableJetifier=true
but solution not working.
what should I do?
My issue has been resolved by :
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-fast-image": "^7.0.2",
My issue has been resolved by downgrading version on react-native-fast-image from 7.0.2 to 6.0.3
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