Divider

A Divider component separates content within a layout. Built on top of heroui-native Separator.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Divider running in the Nayan UI example app

Usage

Source
Divider.tsx
import { View } from 'react-native';
import { NDivider, NText } from '@nayan-ui/native';


export default function DividerScreen() {
  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Horizontal (default)</NText>
      <NText>Above</NText>
      <NDivider />
      <NText>Below</NText>


      <NText className="text-lg font-bold">Vertical</NText>
      <View className="flex-row items-center gap-3 h-10">
        <NText>Left</NText>
        <NDivider orientation="vertical" />
        <NText>Right</NText>
      </View>


      <NText className="text-lg font-bold">Custom thickness</NText>
      <NDivider thickness={3} />
    </View>
  );
}

Attributes

2 props
NameTypeDefaultDetails
classNamestring' 'You can customise by passing tailwind classes.
orientationvertical | horizontalhorizontalYou can pass divider orientation.

Tags

Other components solving nearby problems.