Why the same code behaves differently in same OS but different devices?

Expo SDK
1

Please provide the following:

  1. SDK Version:
    36.0.0
  2. Platforms(Android/iOS/web/all):
    Android

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.

Why does this happen?
How to fix this?

2

Hi

Does this work for you?

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>
  );
}
3

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”.

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.