Achieving Android 15 Edge to Edge compatibility for your React Native App.

Android 15 is around the corner and Google has introduced a new requirement for apps where their app has to be Edge-to-edge compatible and it will be enabled by default for all the apps if the device runs on API Level 35. 

The latest version as of October 12, 2024 is Android 14 with API Level 34 which does not require your app to be Edge-to-edge compatible.

In this post, I will explain how to make your React Native application Edge-to-edge compatible with help of a new library made by Zoontek called react-native-edge-to-edge, where I will explain step by step process of converting your app Android 14 powered app to a Android 15 compatible app with an existing project of mine.
Let's get into it.

Prerequisites & Installation

This post assumes that you have already setup a react native project above 0.73+ and your target SDK is 34.

Install the following library in your React Native project from your terminal.

npm i react-native-edge-to-edge

Android Configuration

Now enter your android folder and go to styles.xml in values folder.

Make the following change.

// <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">

// Remove above line and add below line

<style name="AppTheme" parent="Theme.EdgeToEdge">

This will convert your app from a normal android app to a edge to edge compatible app.

React Native Code Implementation

Now lets take you have a Component/Screen called Home and then you want to make that Edge-to-edge, do the following.

This component from react-native-edge-to-edge replaces the native StatusBar from React Native library.

import {View} from 'react-native';
import { SystemBars } from 'react-native-edge-to-edge';

const Home = () => {
  return (
    <View>
      <SystemBars style="light" hidden={false} />
    </View>
  );
};

export default Home;

You can change the style prop from light to dark based on your screen's UI layout.

These are the requirements needed for making your Android side of your React Native app Edge-to-edge compatible.

To simplify this process further, I have made a Youtube Video explaining how I converted my own production app from an Android 14 to Edge-to-edge compatible by explaining each and every concept I did to accomplish it.

I will explain how this resembles iOS and how well your app's UI and UX will improve because of the decision made by Google.

Here is the video demo:

About Myself

👋 Hey, I am Gautham, Lead Full Stack React Native developer with 4+ years of experience in making SAAS Applications with React & React Native.

Do follow me here in medium for more posts about SAAS development & React Native in general and if you want to contact me, you can do so in Twitter (X) and here is my profile: https://x.com/gautham_vijay_
Thanks for reading my post, I am grateful for it.
I will meet you in the next post.

Dev.to Comeback

I am posting in dev.to after an year.

This post is continuation to my post on Android 13 Notifications which got 25k+ views and I still get likes every day on it.

Here is the link to that post: https://dev.to/gautham495/asking-notification-permission-in-android-13-for-a-react-native-application-35n2

So thanks for the support. I will continue writing here and in medium in the weekends, when I get free time.

References & Links

Android Docs: https://developer.android.com/about/versions/15/behavior-changes-15
The Library Used here : https://github.com/zoontek/react-native-edge-to-edge