Handling Android 15's edge-to-edge enforcement on React Native

[alanleedev]

tl;dr: Android 15 will now enforce edge-to-edge when you opt-in to targetSdk 35. For properly handling such scenario, we are recommending community library react-native-safe-area-context.

What is changing with Android 15?

Android 15 has a very noticeable change with how the app content is rendered on screen. When the app's targetSdk is set to 35, the OS will enforce edge-to-edge when running on Android 15. This means that the content area will be expanded to render using the full screen and even under the status bar and the navigation bar area. Apps are expected to make UI adjustments to make sure important content does not overlap with system bars even if the app had not previously supported edge-to-edge.

See Android documentation for more details;

• https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge
• https://developer.android.com/develop/ui/views/layout/edge-to-edge

Note: Some props no longer work in this case as Android is deprecating APIs related to forced edge-to-edge. For example, system bars will be transparent and you won't be able to set the color of the status bar.

Regarding the <SafeAreaView> component

SafeAreaView component was added for iOS to support the feature of the same name since iOS 11. This allows content to be expanded to fill the available screen area without overlapping with system UI like the status bar or being cut-off due to rounded edges of the device. Android also has been supporting edge-to-edge in recent versions of the OS but there was no official support for this in the React Native core.

While SafeAreaView has worked in some cases, it is very limited in its usage due to it not offering any options to control its behavior. It only offers automatic padding to prevent content overlap or cut-off. Also did I mention it is iOS only?

Due to these reasons, we are moving away from using SafeAreaView and will be deprecating it in the future.

Recommendations

react-native-safe-area-context

react-native-safe-area-context has been a popular community library with feature rich capabilities. We are recommending it to handle (forced) edge-to-edge on Android 15. It can be used to support general edge-to-edge in other Android versions and iOS as well. It provides SafeAreaView replacement with more options and additional hooks to get system inset values which offer more flexibility in its usage.

Also code examples in reactnative.dev website have been updated to use react-native-safe-area-context for version 0.76. Special thanks to @Simek for updating all the code examples.

react-native-edge-to-edge

Edge-to-edge isn't just about displaying content in a safe area. There are other gaps to fill if you want to fully embrace edge-to-edge. react-native-edge-to-edge is a new library backed by Expo that has recently released version 1. It is trying to tackle gaps in general edge-to-edge support and also provides some recommendations in other areas where you may need to consider.

[krizzu]

I think it's also worth noting that there's an opt-out mechanism (as for now, it is now know when it'll be removed) as this article describes it. This gives more time to adapt an app to edge-to-edge.

[vytautasvargonas]

just so you know react-native-safe-area-context returns 0 as bottom inset for Android 15. and enabling edge to edge / using react-native-edge-to-edge / setting android navigation bar as transparent breaks the Android keyboard avoiding of windowSoftInputMode="adjustResize"

[kirillzyusko]

@vytautasvargonas you can use KeyboardAvoidingView on Android to restore keyboard avoiding. But a slightly better approach would be the usage of react-native-keyboard-controller - it'll handle keyboard with animated transitions (which will significantly improve UX of the app).

[vytautasvargonas]

curious if anyone made it work with edge to edge enabled?

[kirillzyusko]

curious if anyone made it work with edge to edge enabled?

@vytautasvargonas What's exactly? KeyboardAvoidingView or react-native-keyboard-controller? react-native-keyboard-controller works in edge-to-edge mode only (but optionally you can apply paddings to avoid overlap with system elements).

[zoontek]

using react-native-edge-to-edge / setting android navigation bar as transparent breaks the Android keyboard avoiding of windowSoftInputMode="adjustResize"

That's indeed the Android behavior, it's explained in the README. Using KeyboardAvoidingView with behavior="padding" or react-native-keyboard-controller works.