Version: 3.0.0

Divider

Divider is used to visually separate content in a list or group.

Import#

import { Divider } from 'native-base';

Examples#

Basic#

The Divider displays a thin horizontal or vertical line.

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.

Composition#

You can use bg or backgroundColor to change the divider's color and width and height to change its width and height respectively.

Props#

Name Type Description Default
orientation "vertical" | "horizontal" The orientation of the divider. -

Divider implements Box

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of divider
We can easily extend the divider component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Divider: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

Accessibility#

  • Divider has role set to separator and aria-orientation to either horizontal or vertical.