SafeAreaView Props | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
SafeAreaView Props
To make your components respect the 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 hook of .
Info: SafeAreaView props can only be applied on 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
Playground
Fixed SafeArea
Playground
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.
Playground
Nativebase logo
MadeWithNativeBase