Separator

Installation

Separator ships with the library — install it once, then import:

import { Separator } from "@delacour/react-native-ui/separator";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add separator

Usage

app/index.tsx

import { Separator } from "@/components/ui/separator";
import { Text } from "@/components/ui/text";
import { View } from "react-native";

export default function Example() {
  return (
    <View className="flex-1 justify-center gap-4 p-4">
      <Text.Paragraph>Account</Text.Paragraph>
      <Separator />
      <Text.Paragraph>Privacy</Text.Paragraph>
    </View>
  );
}

Orientations

<Separator />
<Separator orientation="vertical" />

Weight and colour

A filled box rather than a border, so thickness, colour and radius are ordinary utilities.

<Separator className="h-0.5" />
<Separator className="h-1 rounded-full bg-destructive" />

Stretching to a parent

The long axis is self-stretch, so a vertical rule takes its parent row's height with no height of its own.

<View className="flex-row items-stretch">
  <View className="flex-1 p-4">
    <Text.Caption>Components</Text.Caption>
  </View>
  <Separator orientation="vertical" />
  <View className="flex-1 p-4">
    <Text.Caption>Packages</Text.Caption>
  </View>
</View>

Inside a ListGroup

<ListGroup>
  <ListGroup.Item>Automatic inset divider below</ListGroup.Item>
  <ListGroup.Item>Hand-placed full-bleed rule below</ListGroup.Item>
  <Separator />
  <ListGroup.Item>Last row</ListGroup.Item>
</ListGroup>

A hand-placed separator suppresses the automatic divider at that gap, which is how a full-bleed rule gets in among inset ones.

API Reference

SeparatorProps

Extends React Native's ViewProps.

Prop

Type

On this page