Handling SafeArea in ReactNative on iPhone X

Question

In my ReactNative app, I'm using "SafeAreaView" to restrict my content in the visible area. My app runs in landscape mode. Look at the image

My app has FlatList with 2 Items rendered. If you notice the FlatList (in green color), on the left it has some padding of 20 pixels and on the right, it has notch (though it has padding of 20 pixels to the border). Due to notch on right my FlatList don't seem to be centered.
Is there a way to handle the content size considering the notch area?

Answer 1

try wrapping your Flatlists with an inner View between the Flatlists and the SafeAreaView and add the padding the inner View e.g

<SafeAreaView style={{flex: 1}}>
  <View style={{flex: 1, padding: 24, justifyContent: 'center', alignItems: 'center'}}>
    {/* your flatlists here */}
  </View>
</SafeAreaView>

this should make it look more natural.

Answer 2

For iOS, you can use this package: https://www.npmjs.com/package/react-native-iphone-x-helper

getBottomSpace() and getStatusBarHeight()