How to modify the padding in SafeAreaView?

Question

I am trying to position element in the left-upper corner of the screen (there is some margin around). Because of the notch on the iPhone X I am using SafeAreaView. Unfortunately the SafeAreaView padding is enormous, it goes way out of the status bar / notch area. Because of that the element which should visually be in the corner it's now much lower than on other devices.

I looked into StatusBar.currentHeight, but that is supported only for Android. Another option was to use https://github.com/react-native-community/react-native-safe-area-view which has a forceInset parameter. Unfortunately, setting it as { top: xx } makes it work like a normal View with a top padding for all devices (the ones without notch as well).

How can I have a SafeAreaView but with a modified top padding?

Answer 1

I had a similar problem months ago, so I wrote an util to give me the correct height of top/bottom SafeArea to add as padding to a normal react-native View, and then play with them by adding/removing more padding. Here is the code:

import { Dimensions, Platform } from 'react-native'

export function isIphoneX () {
  const iphoneXLength = 812
  const iphoneXSMaxLength = 896
  const windowDimensions = Dimensions.get('window')
  return (
    Platform.OS === 'ios' &&
    !Platform.isPad &&
    !Platform.isTVOS &&
    (windowDimensions.width === iphoneXLength ||
      windowDimensions.height === iphoneXLength ||
      windowDimensions.width === iphoneXSMaxLength ||
      windowDimensions.height === iphoneXSMaxLength)
  )
}

const DimensionsStyle = {
  safeAreaTopHeight: Platform.OS === 'ios' ? (isIphoneX() ? 44 : 20) : 0,
  safeAreaBottomHeight: Platform.OS === 'ios' && isIphoneX() ? 35 : 0,
  tabBarHeight: Platform.OS === 'ios' ? 17 : 20,
  bottomAreaHeight: Platform.OS === 'ios' && isIphoneX() ? 34 : 0
}

export default DimensionsStyle

This code works because we know that iPhone X and iPhone XS have a 812p height, and iPhone XSMax and XR have 896p height.

Then you can simply import this util into your view and use it like this:

import Dimension from '../../../utils/DimensionUtils' // path of the util
//
// rest of the code
//
const styles = StyleSheet.create({
  container: {
    paddingTop: Dimension.safeAreaTopHeight // here you can edit the height of the safeare :))
  }
})