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' }
    }
}

Answer 1

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

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.

Answer 3

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

Answer 4

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.

Answer 5

Can you also increase your buildToolsVersion to "31.0.0"

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