Component

Divider

Simple horizontal or vertical separator.

React Native

Divider

Simple visual separator.

Section one

Section two

import { View } from 'react-native';
import { Divider, Text, useTheme } from '@sohantalukder/rn-kit';

export function SettingsGroup() {
  const { gutters } = useTheme();

  return (
    <View style={gutters.gap_12}>
      <Text>Profile</Text>
      <Divider />
      <Text>Notifications</Text>
      <Divider />
      <Text>Security</Text>
    </View>
  );
}

Live component

horizontalverticalcustom color

Use to separate related groups, not every row.
Prefer spacing when hierarchy is already clear.

Usage

import { Divider } from '@sohantalukder/rn-kit';

import { View } from 'react-native';
import { Divider, Text, useTheme } from '@sohantalukder/rn-kit';

export function SettingsGroup() {
  const { gutters } = useTheme();

  return (
    <View style={gutters.gap_12}>
      <Text>Profile</Text>
      <Divider />
      <Text>Notifications</Text>
      <Divider />
      <Text>Security</Text>
    </View>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

widthnumber | string-Sets the rendered width of the component.

heightnumber | string-Sets the rendered height of the component.

colorColorValuethemeOverrides the component color while preserving layout and behavior.

styleStyleProp<ViewStyle>-Additional style object merged into the root element.

Theme

Divider reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

horizontal
vertical
custom color

Best Practices

Use to separate related groups, not every row.
Prefer spacing when hierarchy is already clear.