SafeAreaView does not detect if a phone have a dynamic island or not

[DuyNguyenPhuong]

Description

I want the SafeAreaView to apply dynamic padding depending on the actual device’s top inset. For example:

iPhone 16 Pro Max → larger status bar + Dynamic Island → needs more top/bottom safe area padding

Pixel 4 → no notch → should have smaller insets

Other Android devices → shapes vary (hole-punch, waterfall, etc.)

Right now my implementation is overly simplified:

const hasNotch = Platform.OS === 'ios'

return isTransparent ? content : (
  <SafeAreaView
    edges={['bottom', 'left', 'right']}
    style={{
      backgroundColor: Colors.blue,
      paddingBottom: hasNotch ? 20 : 0, // Only add padding if device has notch/Dynamic Island
    }}
  >
    {content}
  </SafeAreaView>
)

Expected behavior

SafeAreaView should automatically apply padding based on the real device safe area insets, not a hardcoded boolean. Ideally:

Use the actual safe area bottom inset

Add additional padding only when needed

Work correctly across iOS + Android + future devices

Steps to reproduce

const StatusBar = observer(() => {
  const isTransparent = TRANSPARENT_STATUS_BAR_SCENES.includes(rootStore.layoutStore.currentScene)
  const currentScene = rootStore.layoutStore.currentScene
  const insets = useSafeAreaInsets()

  // // Only add padding if device has notch/Dynamic Island (top inset > 20px)
  // // This works for both iOS (notch/Dynamic Island) and Android (notch)
  // const hasNotch = Platform.OS === 'ios'

  const content = (
    <RNStatusBar
      translucent={isTransparent}
      barStyle="dark-content"
      backgroundColor={isTransparent ? 'transparent' : Colors.red}
    />
  )

  // Don't wrap in SafeAreaView if currentScene is null (navigation not ready yet)
  // This prevents double SafeAreaView padding on first render
  if (currentScene === null) {
    return content
  }

  return isTransparent ? content : (
    <SafeAreaView 
      edges={['bottom', 'left', 'right']}
      style={{
        backgroundColor: Colors.blue,
        paddingBottom: insets.bottom, // Only add padding if device has notch/Dynamic Island
      }}
    >
      {content}
    </SafeAreaView>
  )
})

Snack or a link to a repository

https://github.com/Fundy-asia/user-app

Safe Area Context version

^5.6.2

React Native version

0.80.2

Platforms

Android

Architecture

None

Build type

None

Device

None

Device model

Pixel 4

Acknowledgements

Yes