My React Native App Crash After Update Target Sdk Version 31

Issue

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

Solution

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

Answered By - Daniel