react-native-safe-area-context icon indicating copy to clipboard operation
react-native-safe-area-context copied to clipboard

SafeAreaView content overlaps status bar & edge-to-edge not working on Android 15+

Open Prajwaltechversant opened this issue 5 months ago • 4 comments

Description

Environment react-native-safe-area-context: ^5.4.1

React Native: 0.79.2

Platform: Android

Android Version: 15 (API 34 and above)

Device: Pixel / Emulator / Android 15 device

Hermes: enabled

Architecture: New Architecture enabled 🐛 Bug Description On Android 15 and above, content inside SafeAreaView is overlapped by the status bar, especially near the top of the screen. Some parts of the UI become partially or completely hidden, making the app appear broken or misaligned.

Also, edge-to-edge rendering doesn't work as expected — content doesn't stretch to system edges while properly avoiding UI obstruction.

This issue is not present on Android 14 and below.

✅ Expected Behavior Content inside SafeAreaView should remain visible and unobstructed by the status bar or system bars

On Android 15 and above, layout should support the platform’s new edge-to-edge feature, rendering content behind system bars while ensuring readability and safe interactions

❌ Actual Behavior Content is overlapped by the status bar on Android 15+

App does not respect edge-to-edge system layout, and views are clipped or misaligned

Wrapping in SafeAreaProvider and using SafeAreaView does not fix the issue

🔁 Steps to Reproduce Create a new React Native app (v0.79.2)

Install and set up react-native-safe-area-context

Wrap the app with SafeAreaProvider

Use SafeAreaView as the main layout

Run the app on Android 15 or newer

Observe the issue: content is cut off under the status bar, and edge-to-edge layout is broken

Steps to reproduce

Set up a new React Native 0.79.2 app

Wrap your app with <SafeAreaProvider>

Use either of the following:

<SafeAreaView style={{flex: 1}} edges={['top']}>

or useSafeAreaInsets().top to apply padding

Run the app on an Android 15+ device or emulator

Observe content overlapping the status bar, and no edge-to-edge support

Snack or a link to a repository

https://github.com/Prajwaltechversant/edgetoedge

Safe Area Context version

5.4.1

React Native version

0.79.2

Platforms

Android

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Android emulator

Device model

Pixel 9

Acknowledgements

Yes

Prajwaltechversant avatar May 26 '25 09:05 Prajwaltechversant