Divider | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Divider
Divider can visually separate content in a given list or group.
Show Code
Playground
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: "horizontal" | "vertical"
thickness
The thickness of the divider.
Type: SpaceType
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