I have an App which I am testing on real devices. The issue is with the SafeAreaView. If I set the height of the screenHeight - statusBarHeight it works right on the Samsung Galaxy S9+ but it shows a bottom ‘ice’ padding in the Samsung Galaxy S10+.
If I take it off, it shows correctly on Samsung Galaxy S10+ but not in the S9+, showing a screen color padding.
import React from 'react';
import { Text, View } from 'react-native';
import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context';
const HomeScreen = props => {
const insets = useSafeArea();
return (
<View
style={{
flex: 1,
backgroundColor: "lightblue",
paddingTop: insets.top,
paddingBottom: insets.bottom,
}}>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</Text>
</View>
);
};
export default function App() {
return (
<SafeAreaProvider>
<HomeScreen />
</SafeAreaProvider>
);
}
FWIW, the code by @wodin is what we use and works across devices. The code you mentioned is a (very) old way to try to accomplish this. For Android, this is because SafeAreaView only works for iOS out of the box and the StatusBar.currentHeight does NOT necessarily reflect the “screenInsets”.
Using react-native-safe-area-context does correctly use the “screenInsets”.