ios Safe Area is Not Working in the model

[Ibrahim113502]

Description

Description

When rendering a <SafeAreaView> inside a native React Native <Modal>, safe area insets are not applied on iOS devices (e.g., notch or home indicator areas are ignored).

The same SafeAreaView works correctly when used in the main app tree.

Expected Behavior

SafeAreaView should respect safe area insets on iOS even when rendered inside a <Modal>.

Actual Behavior

Insets are always 0 inside <Modal> on iOS. The content touches the notch and bottom safe areas.

Steps to reproduce

1. Wrap app with <SafeAreaProvider> at the root.
2. Create a <Modal> with a <SafeAreaView> inside.
3. Render it on an iPhone with a notch.
4. Observe that there’s no padding at the top or bottom.

Snack or a link to a repository

nope

Safe Area Context version

5.6.2

React Native version

0.81.5

Platforms

iOS

Build type

Debug mode

Device

iOS simulator

Device model

iphone 16 pro max

Acknowledgements

Yes

[SimpleCreations]

In case it's not clear from the description, I think OP wanted to report that SafeAreaView doesn't work inside modals (Modal, FullWindowOverlay) on iOS 26. I've run into this issue too.

[zabojad]

It's quite a major issue...

[0xEzis]

SafeAreaView is acting inconsistently on iOS for me, it's not working roughly half the time. I’ve tried setting the edges manually and using the default values, but I’m seeing the same behavior on both the simulator and a real device. Since the old SafeAreaView from react-native is getting deprecated, any help or quick fix would be super useful !

[janicduplessis]

Does it work if you add a provider inside the modal, like:

<Modal>
  <SafeAreaProvider>
    <SafeAreaView>
      …
    </SafeAreaView>
  </SafeAreaProvider>
</Modal>

[SimpleCreations]

@janicduplessis Adding the provider as you suggested fixes the issue for me 👏

[janicduplessis]

Nice, this is probably something that should be documented.

[0xEzis]

On my side, I’m seeing issues even outside of modals.

I’m using expo-router and have SafeAreaProvider in my root _layout.tsx, but the safe area is still inconsistent across screens that use SafeAreaView. This is a major problem for me because it makes some buttons unreachable throughout the app. I’m honestly considering switching back to the deprecated SafeArea for now.

EDIT : I also tried adding a SafeAreaProvider inside each _layout.tsx that uses SafeAreaView, at the route level. It seems to fix the safe area issue, but now I’m getting a layout flicker on the first load. The original safe area problem also only happened on the first app launch, so it might be related.

[ahmeterenodaci]

I’m experiencing the same issue. When pushing a modal in expo-router, SafeAreaView from react-native-safe-area-context fails to apply insets on the first mount. It only starts working correctly from the second time onwards.

But, when I use the SafeAreaView from react-native it works well.

[janroures]

Hi, any updates on this? Is anyone looking at it? Happy to contribute if needed. SafeAreaView breaks in modals