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

Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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 a Boolean is passed, then the component takes a flexible inset and adjusts its children according to 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 your App SafeArea safe, just wrap your app with a Box and pass safeArea props to it.
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.
Nativebase logo