Divider

A divider is a thin, lightweight separator that groups content in lists and page layouts

Line Divider

Dotted Divider

Dashed Divider

import { Divider, Text, VStack } from '@/components';
import React from 'react';
import { StyleSheet } from 'react-native';

const Example = () => {
  return (
    <VStack g={3}>
      <Text>Orange</Text>
      <Divider />
      <Text>Pineapple</Text>
      <Divider />
      <Text>Cherry</Text>
      <Divider />
      <Text>Banana</Text>
    </VStack>
  );
};

export default Example;

Props

Extends [SpacingShorthandProps<Theme> & BorderProps<Theme> & LayoutProps<Theme> & ViewProps]

variant

Type: 'line' | 'dotted' | 'dashed'