Version: 3.0.6

SafeAreaView Props

To make your components respect the SafeAreaView of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction.

  • safeArea: Apply safe padding to all edges.
  • safeAreaX: Apply safe padding to x direction.
  • safeAreaY: Apply safe padding to y direction.
  • safeAreaTop: Apply safe padding to top.
  • safeAreaBottom: Apply safe padding to bottom.
  • safeAreaLeft: Apply safe padding to left.
  • safeAreaRight: Apply safe padding to right.

Internally, NativeBase uses useSafeAreaInsets hook of react-native-safe-area-context.

info

SafeAreaView props can only be applied on Box as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it.

Examples#

Flexible SafeArea#

Fixed SafeArea#

Using Hook#

If you want to add the SafeAreaView props to other components, you can use the hook. Since, SafeAreaView props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding.