Skip to content
Docs
Components
Divider

Divider

Simple divider component.

Import

import { Divider } from "react-native-ficus-ui";

Usage

Horizontal

EDITABLE EXAMPLE
<Box>
  <Text>Test text</Text>
  <Divider my="md" />
  <Text>Test text</Text>
</Box>

Vertical

EDITABLE EXAMPLE
<Box h={40} flexDirection="row">
  <Divider orientation="vertical" />
  <Box m="md">
    <Text>Test text</Text>
  </Box>
</Box>

Custom color

EDITABLE EXAMPLE
<Box>
  <Text>Test text</Text>
  <Divider colorScheme="blue" my="md" />
  <Text>Test text</Text>
</Box>

Custom size

EDITABLE EXAMPLE
<Box>
  <Text>Test text</Text>
  <Divider size={10} my="md" />
  <Text>Test text</Text>

  <Box mt="xl" h={40} flexDirection="row">
    <Divider size={10} orientation="vertical" />
    <Box m="md">
      <Text>Test text</Text>
    </Box>
  </Box>
</Box>

Props

Extends all Box props, except colorScheme properties.

orientation

The orientation of the divider, can be horizontal or vertical.

TypeRequiredDefault
enum('vertical', 'horizontal')No