Separtor Primitive
Creates a visual or semantic distinction between content.
Installation
Install the component via your command line.
npx expo install @rn-primitives/separatorCopy/paste the following code to ~/components/primitives/separator/index.tsx
import * as React from 'react';import { View } from 'react-native';import * as Slot from '~/components/primitives/slot';import type { SlottableViewProps, ViewRef } from '~/components/primitives/types';import type { SeparatorRootProps } from './types';
const Root = React.forwardRef<ViewRef, SlottableViewProps & SeparatorRootProps>( ({ asChild, decorative, orientation = 'horizontal', ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <Component role={decorative ? 'presentation' : 'separator'} aria-orientation={orientation} ref={ref} {...props} /> ); });
Root.displayName = 'RootSeparator';
export { Root };Copy/paste the following code to ~/components/primitives/separator/types.ts
interface SeparatorRootProps { orientation?: 'horizontal' | 'vertical'; decorative?: boolean;}
export type { SeparatorRootProps };Usage
import * as SeparatorPrimitive from '@rn-primitives/separator';
function Example() { return <SeparatorPrimitive.Root />}Props
Root
Extends View props
| Prop | Type | Note |
|---|---|---|
| orientation | ’horizontal’ | ‘vertical’ | Defaults to horizontal (optional) |
| decorative | boolean | (optional) |
| asChild | boolean | (optional) |