Search code examples
javascriptiosreact-nativesafeareaview

The SafeAreaView causes weird gap on screen

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:

Weird gap in bottom of screen

Solution

  • 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