@umituz/react-native-divider

Visual separators for React Native with horizontal, vertical, and text dividers.

Installation

npm install @umituz/react-native-divider

Peer Dependencies

• react >= 18.2.0
• react-native >= 0.74.0
• @umituz/react-native-design-system *

Features

• ✅ Horizontal dividers (section separators)
• ✅ Vertical dividers (inline separators)
• ✅ Text dividers (with label: OR, AND, etc.)
• ✅ Multiple line styles (solid, dashed, dotted)
• ✅ Multiple spacing options (none, small, medium, large)
• ✅ Custom colors and thickness

Usage

Horizontal Divider (Default)

import { Divider } from '@umituz/react-native-divider';

<Divider />

Between Form Sections

<View>
  <FormSection title="Personal Info" />
  <Divider spacing="large" />
  <FormSection title="Contact Info" />
</View>

Vertical Divider (Inline)

<View style={{ flexDirection: 'row' }}>
  <Button>Cancel</Button>
  <Divider orientation="vertical" spacing="small" />
  <Button>Save</Button>
</View>

Text Divider (OR Separator)

<View>
  <LoginForm />
  <Divider text="OR" />
  <SocialLoginButtons />
</View>

Custom Styling

<Divider
  lineStyle="dashed"
  color="#FF0000"
  thickness={2}
  spacing="large"
/>

Components

• Divider - Main divider component

Types

• DividerOrientation - 'horizontal' | 'vertical'
• DividerStyle - 'solid' | 'dashed' | 'dotted'
• DividerSpacing - 'none' | 'small' | 'medium' | 'large'
• DividerConfig - Complete divider configuration

Utilities

• DividerUtils - Utility functions for divider calculations
• SPACING_CONFIGS - Pre-defined spacing configurations
• DIVIDER_CONSTANTS - Divider constants

License

MIT