Seperator

import { Separator } from "@/components/ui/seperator";
import { Text } from "@/components/ui/text";
import React from "react";
import { View } from "react-native";
export default function SeperatorDemo() {
return (
<View className='flex-1 justify-center items-center p-6 gap-12 bg-white'>
<View className='w-full max-w-xs '>
<View className='gap-1'>
  <Text className='text-xl text-black font-semibold leading-none'>Radix Primitives</Text>
  <Text className='text-sm native:text-base text-muted-foreground'>
    An open-source UI component library.
  </Text>
</View>
<Separator className='my-4' />
<View className='flex flex-row h-5 items-center gap-4 '>
  <Text className='text-black font-semibold'>Blog</Text>
  <Separator orientation='vertical' />
  <Text className='text-black font-semibold'>Docs</Text>
  <Separator orientation='vertical' />
  <Text className='text-black font-semibold'>Source</Text>
</View>
</View>
</View>
);
}

Installation

npx appykit@latest add seperator

Install the following dependencies:

npx expo install @rn-primitives/separator

Create a folder named ui under component folder in your project and add the following code in a file named seperator.tsx:

import * as SeparatorPrimitive from '@rn-primitives/separator';
import * as React from 'react';
import { cn } from '@/lib/utils';

function Separator({
className,
orientation = 'horizontal',
decorative = true,
...props
}: SeparatorPrimitive.RootProps & {
ref?: React.RefObject<SeparatorPrimitive.RootRef>;
}) {
return (
<SeparatorPrimitive.Root
decorative={decorative}
orientation={orientation}
className={cn(
'shrink-0 bg-border',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className
)}
{...props}
/>
);
}

export { Separator };

This component depends on the Text component. Please follow the installation guide here before using the Seperator.

Update the import paths to match your project setup.

Usage

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

<Separator className="my-4" />

Installation

Usage

On this page