Skip to main content

useSafeAreaInsetsStyle

The useSafeAreaInsetsStyle() hook can be used to create a safe-area-aware style object that can be passed directly to a View.

<View style={useSafeAreaInsetsStyle(["top"], "padding")} />

Parameters​

safeAreaEdges: ExtendedEdge[]​

The first parameter is a list of edges that need to be safe-area-aware. In order for the hook to return an object with values, at least one edge needs to be provided. Default is [].

const $insetsStyle = useSafeAreaInsetsStyle(["top", "left"])

console.log($insetsStyle) // { paddingTop: 47, paddingStart: 0 }

property: "padding" | "margin"​

The second parameter specifies the property prefix that will be used to compose the style object. Default is padding.

const $insetsPaddingStyle = useSafeAreaInsetsStyle(["bottom"], "padding")
const $insetsMarginStyle = useSafeAreaInsetsStyle(["bottom"], "margin")

console.log($insetsPaddingStyle) // { paddingBottom: 28 }
console.log($insetsMarginStyle) // { marginBottom: 28 }

Types​

ExtendedEdge​

A safe-area edge:

  • top
  • bottom
  • left
  • right
  • start
  • end

Note: "start" maps to the "left" value. "end" maps to "right.