The SafeAreaView causes weird gap on screen

Question

I'm starting to get some weird gaps on my screens in my React Native application.

I have simplified a screen so you see the issue here:

<SafeAreaView style={{flex:1, backgroundColor: 'yellow'}}>
    <View style={{flex: 1, backgroundColor: 'green'}}>

    </View>
</SafeAreaView>

When I enter the background-mode and reopen the app (quickly swipe gesture on iPhone 12) the issue has disappeared. See example:

Answer 1

The issue might be with the conflicting SafeAreaView in the Navigation component. You can skip the bottom padding for the SafeArea like this,

import {SafeAreaView} from 'react-native-safe-area-context';

<SafeAreaView
  edges={['right', 'top', 'left']}
  style={{flex: 1, backgroundColor: 'yellow'}}>
    <View style={{flex: 1, backgroundColor: 'green'}}></View>
</SafeAreaView>

OR for functional component with Hooks

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const insets = useSafeAreaInsets();

 <View
   style={{
     paddingTop: Math.max(insets.top, 16),
     flex: 1,
     backgroundColor: 'yellow',
   }}>
   <View style={{flex: 1, backgroundColor: 'green'}}></View>
 </View>

for more details on react-native-safe-area-context APIs here