React Native Detect Screen Notch

1) Use react-native-safe-area-context

Import {useSafeAreaInsets} from 'react-native-safe-area-context';
import { Box, Text } from 'native-base';

const CustomHeader = () => {
  const insets = useSafeAreaInsets();
  return (
    <Box
      paddingTop={insets.top}
      paddingX={4}
      paddingBottom={3}
      bg="primary.500"
    >
      <Text color="white" fontSize="xl" fontWeight="bold">
        My App Header
      </Text>
    </Box>
  );
};

This will dynamically add top padding equal to the device’s notch/safe-area inset. So even on Android devices like Pixel 4 or Samsung with punch-hole, the header won’t be overlapped.

2) DeviceInfo – (if no Expo)

If the device has a notch just for logic (not layout), you can use react-native-device-info and call DeviceInfo.hasNotch()

Also Read:

React Native Image Zoom Viewer