Divider | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
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
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