4

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

Simon Degn
  • 901
  • 1
  • 12
  • 40

1 Answers1

4

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

imKrishh
  • 762
  • 1
  • 6
  • 11
  • 1
    Hey ImKrishh and thank you for a fine reply :-) I think you are right about the conflicting navigation and safeaareaviews. I tried your first suggestion and everything works like a charm with react-native-safe-area-context and no bottom edges. I accepted your reply as an answer for my issue and you've earned the bounty ;-) – Simon Degn May 26 '21 at 22:24