Divider | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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).
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. 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. 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