My React Native App Crash After Update Target Sdk Version 31

Issue

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

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

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published