Divider | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
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 and 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. Checkout the default theme of 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