Separtor Primitive
Creates a visual or semantic distinction between content.
Installation
Section titled “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 Slot from '~/components/primitives/slot';import * as React from 'react';import { View } from 'react-native';import type { RootProps, RootRef } from './types';
const Root = React.forwardRef<RootRef, RootProps>( ({ 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
import type { SlottableViewProps, ViewRef } from '~/components/primitives/types';
type RootProps = SlottableViewProps & { orientation?: 'horizontal' | 'vertical'; decorative?: boolean;};
type RootRef = ViewRef;
export type { RootProps, RootRef };import * as SeparatorPrimitive from '@rn-primitives/separator';
function Example() { return <SeparatorPrimitive.Root />}Extends View props
| Prop | Type | Note |
|---|---|---|
| orientation | ’horizontal’ | ‘vertical’ | Defaults to horizontal (optional) |
| decorative | boolean | (optional) |
| asChild | boolean | (optional) |