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 background properties.

`colorScheme`

The colorScheme property, will define divider color.

Type	Required	Default
string	No	gray

`orientation`

The orientation of divider, can be horizontal or vertical.

Type	Required	Default
'vertical' 'horizontal'	No	'horizontal'

`size`

Size of divider.

Type	Required
number	No

Avatar Image