Separator
Visually or semantically separates content.
Installation
bash npx @moe/cli add separator Install the following dependency:
npx expo install @rn-primitives/separatorCopy/paste the following code to @/components/ui/separator.tsx
import * as SeparatorPrimitive from "@rn-primitives/separator";
import * as React from "react";
import { cn } from "@/lib/utils";
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref,
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className,
)}
{...props}
/>
),
);
Separator.displayName = SeparatorPrimitive.Root.displayName;
export { Separator };Usage
import { Separator } from "@moe/registry/ui/separator";
import { View } from "react-native";
import { Text } from "@moe/registry/ui/text";
export function SeparatorDemo() {
return (
<View className="w-full max-w-sm">
<Text>Above</Text>
<Separator className="my-4" />
<Text>Below</Text>
</View>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator |