Divider | NativeBase | Universal Components for React and React Native

Search
K
Hire us
If you are starting a new project, please try gluestack-ui for better performance and new design.
Divider
Divider is used to visually separate content in a list or group.
Import
Copy
import { Divider } from 'native-base';
Examples
Basic
The Divider displays a thin horizontal or vertical line.
Playground
Divider Orientation
Pass the orientation prop and set it to either horizontal or vertical.
Note: If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height.
Playground
Composition
You can use bg or backgroundColor to change the divider's color and width and height to change its width and height respectively.
Playground
Props
orientation
The orientation of the divider.
Type: "vertical" | "horizontal"
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the divider.
Info: We can easily extend the divider component theme using extendTheme function as described in the documentation .
Accessibility
Divider has role set to separator and aria-orientation to either horizontal or vertical.
Nativebase logo
MadeWithNativeBase