My React Native App Crash After Update Target Sdk Version 31

Question

My React Native App crashes after updating the target Sdk version and compileSdkVersion 31. It was working version 30. Google Play forced us to 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' }
    }
}

Strophe

Hamza did you find the solution? – Inspiratory

yes. adding implementation 'androidx.work:work-runtime:2.7.1' to build.gradle was solution for me – Strophe

What was the error in the logs? – Failing

Answer 1

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

Allwein

Answer 2

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.

Branks

Thankyou for explaining and I tried your solution and now my app works fine. – Earthenware

> Installed Build Tools revision 31.0.0 is corrupted. Remove and install again using the SDK Manager. – Lello

How do we know which JDK version we're using? – Limited

Answer 3

Can you also increase your buildToolsVersion to "31.0.0"

Please also make sure that it uses Java 11 and not Java 8.

Rambo

it was not work – Strophe

Can you post what error it shows – Rambo

no error is displayed. the app crashes directly – Strophe

Please check the logs in Android studio logcat. It will definitely show you the crash error. https://mcmap.net/q/276702/-how-to-debug-android-build-that-crashes-instantly – Rambo

Answer 4

The only one solution that worked for me was to remove/comment out Flipper.
Here is how to do that:
https://github.com/facebook/flipper/issues/1326#issuecomment-653470251

Spenser

I think this solution is more like a workaround rather than a fix. I don't use Flipper at all, that's why this solution worked for me. – Spenser

Answer 5

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.

Tomfool

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Pause