SafeAreaView rendering children under unsafe area

[RodSarhan]

Description

SafeAreaView from doesn't respect safe areas on iOS when used alongside an animated view with {translateY: 0} in the same screen.
Using a basic view and padding it with insets from useSafeAreaInsets seems to work normally.

This was originally reported here: kirillzyusko/react-native-keyboard-controller#809

Steps to reproduce

1. Mount a screen that has both SafeAreaView and an animated view with translateY = 0
2. SafeAreaView child renders under "Unsafe" area.

Snack or a link to a repository

https://snack.expo.dev/@rodsar/safeareaview-issue

Safe Area Context version

5.2.0

React Native version

0.76

Platforms

iOS

Architecture

None

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[jacobp100]

You're not importing SafeAreaView from this library - it's coming from react-native. Was that just a typo in the example, or is this an actual issue?

[RodSarhan]

Sorry for that, yeah it was a typo, i edited the example and got the same behavior

[jacobp100]

What happens if you change the <> fragment into <View style={{ flex:1 }}>?

[RodSarhan]

Yeah i just tried adding a parent view and got the same result

[jacobp100]

I can see the issue in the expo snack you provided. I suspect there's some dodgy interaction with reanimated that's breaking the layout and stopping the padding being applied to the SafeAreaView. I'm not 100% sure it's this side - as far as I'm aware we're doing everything correctly

I'll leave this issue open in case it is our side - but to set some expectations, I don't think it will get looked at. You're welcome to have an attempt at debugging it, we're good at merging PRs people send us

[kdwkr]

I just created issue on Reanimated repository.
software-mansion/react-native-reanimated#7220

[FredrikErikJohansson]

We have noticed something similar happening for our app without using a reanimated View directly. It seems to happen randomly and reinstalling the app fixes it.

We have a nested SafeAreaView where the top edge of the child doesn't get applied. Something like this:

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  className="flex-1">
  <SafeAreaView edges={['left', 'right', 'bottom']}>
    <SafeAreaView edges={['top']}>...</SafeAreaView> // Top doesn't get applied
    ...
  </SafeAreaView>
</KeyboardAvoidingView>

I'm have been able to replicate it once locally on a simulator (iPhone 15 Pro - iOS 17.2), and by replacing the inner SafeAreaView with paddings from useSafeAreaInsets fixes it.

I'm sorry for being a bit vague but the issue seems to have come out of thin air.

[priami93]

Try to remove <GestureHandlerRootView

[NorseGaud]

Same issue here. I had to switch to using useSafeAreaInsets. I'm not using an animated view though. I think this is just a general iOS issue.
You can see how I can make changes to the CSS and it starts working, but then reverts right back on reloading the app in thius video.

issuewithSafeAreaView.mov