DEV Community

Pearl Zeng-Yoders
Pearl Zeng-Yoders

Posted on • Edited on

Change target API level to 30 for React Native 0.62.2

TL;DR

Two simple steps solved this issue for me.

Step 1:
In 'android/build.gradle' file, update the ext block in the buildscript block to the following:

    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        ndkVersion = "20.1.5948944"
    }
Enter fullscreen mode Exit fullscreen mode

Step 2:
Update the "react-native-community/netinfo" package to the latest version (v5.9.10 at the time of writing) by running npm update @react-native-community/netinfo.

Optional Next Step:
Build the app and run it to make sure all packages used are running as expected in case some libraries lack support for SDK 29+.

[Update]
Later we noticed app crashing on Android 11, after digging, it's a special crashing case with Android 11 and targetSdkVersion 30. And these two steps fixed it for us:
(1) Update okhttp version to the latest

// android/app/build.gradle

dependencies {
    // ...other dependencies
    implementation("com.squareup.okhttp3:okhttp:4.9.2")
    implementation("com.squareup.okhttp3:okhttp-urlconnection:4.9.2")
}
Enter fullscreen mode Exit fullscreen mode

(2) Update Sentry to v2+ in package.json and npm i (see explanation here.)

// package.json

"dependencies": {
    // ...other dependencies
    "@sentry/react-native": "^2.0.0"
}
Enter fullscreen mode Exit fullscreen mode

Details

Google play store is giving this message when I uploaded our .apk file:
error screenshot

Your app currently targets API level 29 and must target at least API level 30 to ensure it is built on the latest APIs optimized for security and performance. Change your app's target API level to at least 30.
Enter fullscreen mode Exit fullscreen mode

Here's a detailed explanation of the requirement and I found this Github thread particularly helpful on understanding the issue.

The main takeaway was that, newer React Native versions have SDK target updated to 30. If we don't want to update React Native, directly updating SDK target in the build file is a solution, however, we need to be cautious on library compatibility.

By checking the React Native Upgrade Helper, I found that the earliest version with SDK targeting 30 is v0.65.0 and spent some time trying to update the React Native version in our project. I ran into quite a few issues and after solving a few, I got caught up on one that has implicit error messages. In order to hit this project deadline, I had to give up updating React Native this time around. I can share issues and solutions in a future post when I get to updating it.

Therefore, for the workaround for this project, I pulled out the ext block in the buildscript block from 0.65.0's 'android/build.gradle' file and used it in our 'build.gradle' file.

After that, the build failed with this error resource android:attr/lStar not found. I referred to this post and updated the "react-native-community/netinfo" package, then our project was able to build as expected.

Potential trouble shoot
I was messing around with the gradle files while trying to upgrade React Native and had some gradle inconsistency issues. If you have faced similar issues, here're a couple ways for cleaning the restarting the build in Android Studio:

  1. File -> Invalidate Caches/Restart
  2. Build -> Clean Project; Build -> Rebuild Project

Top comments (0)