nativecn

Separator

A hairline divider, horizontal or vertical, decorative by default.

Componentdisplay

Style

Light

Dark

Your app is ready.

Inter body text, Inter headings.

smmdlgxl

you@example.com

Continue

Default Preset a0: Vega, neutral, neutral accent, default radius, Inter.Change Preset

Installation

$npx nativecn-cli@latest add separator

Also installs: theme.

Usage

Separator demo

Horizontal and vertical Separators.

import { View } from "react-native";

import { Separator } from "@/components/separator";
import { Text } from "@/components/text";
import { createStyles } from "@/theme";

export default function SeparatorDemo() {
  const styles = useStyles();
  return (
    <View style={styles.stack}>
      <Text variant="h4">nativecn</Text>
      <Text variant="small" color="mutedForeground">
        Components for Expo apps.
      </Text>
      <Separator />
      <View style={styles.row}>
        <Text variant="small">Docs</Text>
        <Separator orientation="vertical" />
        <Text variant="small">Blocks</Text>
        <Separator orientation="vertical" />
        <Text variant="small">Themes</Text>
      </View>
    </View>
  );
}

const useStyles = createStyles((t) => ({
  stack: { gap: t.spacing[3] },
  row: { flexDirection: "row", alignItems: "center", gap: t.spacing[3] },
}));

Separator demo

Horizontal and vertical Separators.

import { View } from "react-native";

import { Separator } from "@/components/separator";
import { Text } from "@/components/text";
import { createStyles } from "@/theme";

export default function SeparatorDemo() {
  const styles = useStyles();
  return (
    <View style={styles.stack}>
      <Text variant="h4">nativecn</Text>
      <Text variant="small" color="mutedForeground">
        Components for Expo apps.
      </Text>
      <Separator />
      <View style={styles.row}>
        <Text variant="small">Docs</Text>
        <Separator orientation="vertical" />
        <Text variant="small">Blocks</Text>
        <Separator orientation="vertical" />
        <Text variant="small">Themes</Text>
      </View>
    </View>
  );
}

const useStyles = createStyles((t) => ({
  stack: { gap: t.spacing[3] },
  row: { flexDirection: "row", alignItems: "center", gap: t.spacing[3] },
}));

Props

Prop	Type and description
`orientation`	"horizontal" (default) \| "vertical"
`decorative`	boolean (default true): hidden from screen readers; false exposes it with role separator
`style`	merged last

Accessibility

Decorative by default: hidden from screen readers.
decorative={false} exposes it with role separator.

Notes

A vertical Separator stretches to its row's height, so put it in a row with alignItems center. Between virtualized ListItems, pass it as FlashList's ItemSeparatorComponent.

Source

The Vega Style's code, exactly as add copies it into your app.

{components}/separator.tsx

import type { Ref } from "react";
import { StyleSheet, View, type ViewProps } from "react-native";

import { createStyles } from "@/theme";

export type SeparatorOrientation = "horizontal" | "vertical";

export type SeparatorProps = Omit<ViewProps, "children"> & {
  /** Default `horizontal`. A vertical Separator stretches to its row's height. */
  orientation?: SeparatorOrientation;
  /**
   * Purely visual (default `true`): hidden from screen readers. Set `false` when the line
   * separates content in a way that matters, so it is exposed with role `separator`.
   */
  decorative?: boolean;
  ref?: Ref<View>;
};

// The `borderWidth.hairline` Token: the thinnest line the screen can draw.
const hairline = StyleSheet.hairlineWidth;

const useStyles = createStyles((t) => ({
  root: { backgroundColor: t.colors.border, flexShrink: 0 },
  horizontal: { height: hairline, alignSelf: "stretch" },
  vertical: { width: hairline, alignSelf: "stretch" },
}));

/**
 * A hairline that divides content, horizontally or vertically, in the `border` Colour Role.
 * Decorative by default. `style` is merged last.
 */
export function Separator({
  orientation = "horizontal",
  decorative = true,
  style,
  ...props
}: SeparatorProps) {
  const styles = useStyles();
  return (
    <View
      role={decorative ? undefined : "separator"}
      aria-hidden={decorative}
      accessible={!decorative}
      importantForAccessibility={decorative ? "no-hide-descendants" : undefined}
      style={[styles.root, styles[orientation], style]}
      {...props}
    />
  );
}

{components}/separator.tsx

import type { Ref } from "react";
import { StyleSheet, View, type ViewProps } from "react-native";

import { createStyles } from "@/theme";

export type SeparatorOrientation = "horizontal" | "vertical";

export type SeparatorProps = Omit<ViewProps, "children"> & {
  /** Default `horizontal`. A vertical Separator stretches to its row's height. */
  orientation?: SeparatorOrientation;
  /**
   * Purely visual (default `true`): hidden from screen readers. Set `false` when the line
   * separates content in a way that matters, so it is exposed with role `separator`.
   */
  decorative?: boolean;
  ref?: Ref<View>;
};

// The `borderWidth.hairline` Token: the thinnest line the screen can draw.
const hairline = StyleSheet.hairlineWidth;

const useStyles = createStyles((t) => ({
  root: { backgroundColor: t.colors.border, flexShrink: 0 },
  horizontal: { height: hairline, alignSelf: "stretch" },
  vertical: { width: hairline, alignSelf: "stretch" },
}));

/**
 * A hairline that divides content, horizontally or vertically, in the `border` Colour Role.
 * Decorative by default. `style` is merged last.
 */
export function Separator({
  orientation = "horizontal",
  decorative = true,
  style,
  ...props
}: SeparatorProps) {
  const styles = useStyles();
  return (
    <View
      role={decorative ? undefined : "separator"}
      aria-hidden={decorative}
      accessible={!decorative}
      importantForAccessibility={decorative ? "no-hide-descendants" : undefined}
      style={[styles.root, styles[orientation], style]}
      {...props}
    />
  );
}