Separator

Visual divider for separating content sections.

Above the separator

Below the separator

import { Separator } from "@/components/ui/separator";

export function MyScreen() {
  return (
    <View>
      <Text>Above</Text>
      <Separator />
      <Text>Below</Text>
    </View>
  );
}

Installation

npx @aniui/cli add separator

Usage

app/index.tsx

import { Separator } from "@/components/ui/separator";

export function MyScreen() {
  return (
    <View>
      <Text>Above</Text>
      <Separator />
      <Text>Below</Text>
    </View>
  );
}

Orientation

Horizontal

Vertical

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

Props

PropTypeDefault

orientation

"horizontal" | "vertical"

"horizontal"

className

string

—

Also accepts all View props from React Native.

Source

components/ui/separator.tsx

import React from "react";
import { View } from "react-native";
import { cn } from "@/lib/utils";

export interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  orientation?: "horizontal" | "vertical";
}
export function Separator({ orientation = "horizontal", className, ...props }: SeparatorProps) {
  return (
    <View
      className={cn(
        "bg-border",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className
      )}
      {...props}
    />
  );
}