DEV Community

Cover image for [New] React Native & Android SDK 15: A Developer's Guide
Muhammad Hasbi
Muhammad Hasbi

Posted on • Edited on

[New] React Native & Android SDK 15: A Developer's Guide

#reactnative #android #programming

Google Announcement

Google recently announced new requirements for apps targeting Android 15." This immediately establishes the "why." In this guide, we'll walk you through exactly how to get your React Native app compliant.
Let's jump into the steps.

Prerequisites

Before you start, note that targeting Android 15 requires the following configuration and tools.

1. Update Android SDK Versions

In your android/build.gradle file, update the SDK versions:

compileSdkVersion = 35
targetSdkVersion = 35
Enter fullscreen mode Exit fullscreen mode

You can find the official requirements on the Android 15 setup page.

2. Required Development Tools

Ensure your development environment is up to date:

  • Java version 17
  • Node.js version 23.7.0 (Avoid typescript issue)

Don't forget to also upgrade your Android Emulator SDK to 35 to test your changes.

Upgrade Process

To update your project to a React Native version that supports Android SDK 35, the official React Native Upgrade Helper is your best tool. It provides a detailed diff of the changes between versions.

To update existing React Native Version that approved by Android SDK 15, please follow this

➡️ View the React Native 0.72.1 to 0.78.0 Upgrade Diff

Follow the changes suggested by the upgrade helper. Below are some common manual fixes you might need to apply afterward.

Post-Upgrade Fixes

After running the upgrade, you may encounter a few specific issues. Here’s how to solve them.

1. Main Component Name Correction

The upgrade process might reset your main component name. Check the following file: android/app/src/main/java/com/your-app-name/MainActivity.kt.

You'll need to update this line to use your app's actual name. You can find the correct name in your app.json file under the name or displayName key.

# android/app/src/main/java/com/your-app-name/MainActivity.kt

override fun getMainComponentName(): String = "RnDiffApp"
Enter fullscreen mode Exit fullscreen mode
2. iOS Firebase Configuration (If Applicable)

If you're using Firebase and building for iOS, you may need to update your ios/Podfile to handle static frameworks. Inside your target block, add the following lines (adjust them based on your specific Firebase integration):

#ios/Podfile

target 'Development' do
  config = use_native_modules!

  flags = get_default_flags()

  use_frameworks! :linkage => :static
  $RNFirebaseAsStaticFramework = true

  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true

//...other script
Enter fullscreen mode Exit fullscreen mode
3. Fixing Status Bar and Navigation UI (Edge-to-Edge)

A common issue after this upgrade is a broken UI around the status bar and bottom navigation. This happens because Android 15 enforces an "edge-to-edge" display, where your app draws behind the system bars.

To fix this, you need to implement proper safe area handling.

Step 1: Install Helper Packages 
# use npm
npm install react-native-edge-to-edge react-native-safe-area-context

# use yarn
yarn add react-native-edge-to-edge react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode
Step 2: Update Android Theme

In android/app/src/main/res/values/styles.xml, change the AppTheme parent to Theme.EdgeToEdge.

android/app/src/main/res/values/styles.xml

<resources>
    <style name="AppTheme" parent="Theme.EdgeToEdge">
        </style>
</resources>
Enter fullscreen mode Exit fullscreen mode
Step 3: Modify MainActivity

Next, to enable edge-to-edge display in your main Android activity, modify the onCreate function in android/app/src/main/java/com/YourAppName/MainActivity.kt and add WindowCompat.setDecorFitsSystemWindows

Setting it to false essentially means: "Hey Android, do not automatically fit my app's layout around the system bars. Let my app draw underneath them instead."

import androidx.core.view.WindowCompat

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
    WindowCompat.setDecorFitsSystemWindows(window, false)
  }
Enter fullscreen mode Exit fullscreen mode
Step 4: Wrap Your Screens

Finally, wrap your screens with SafeAreaView from react-native-safe-area-context to prevent your UI from being hidden by system elements like the notch or home indicator.

import { SafeAreaView } from 'react-native-safe-area-context';

function MyScreen() {
  return (
    <SafeAreaView edges={['bottom']} style={{ flex: 1 }}> // Add edges={['bottom']} to add spesific edges
      {/* ... your screen content ... */}
    </SafeAreaView>
  );
}
Enter fullscreen mode Exit fullscreen mode

Or apply padding manually where needed using the useSafeAreaInsets hook:

import { useSafeAreaInsets } from 'react-native-safe-area-context';

function MyComponent() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ 
      flex: 1, 
      paddingTop: insets.top, 
      paddingBottom: insets.bottom 
    }}>
      {/* ... your component content ... */}
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Your React Native application should now be configured to target Android 15 and handle modern UI requirements like edge-to-edge display.

Key Benefits of Targeting SDK 35:
Updating both versions is essential, but targeting SDK 35 is where you'll see the most impactful changes.

  • Enhanced Security and Privacy (A Major Focus) Theft Detection Lock
  • Modern User Interface and Experience (UX)
  • Significant Performance and Battery Improvements

Hopefully, this guide helps you save some time. If you have any questions or recommendations, please let me know in the comments. Thanks, and happy coding!

Top comments (0)