A customizable divider component for creating visual separation between content sections.

Divider

The Divider component provides a simple way to create visual separation between content sections. It can be oriented horizontally or vertically with customizable styling options.

Features

Orientation Options: Horizontal or vertical layout
Customizable Color: Set custom divider colors
Adjustable Thickness: Control the divider's weight
Spacing Control: Add margin around the divider
Styling Control: Accepts additional Tailwind classes and style objects
Dark Mode Support: Uses theme-aware colors by default

Import

import Divider from '@/components/layout/Divider';

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the divider
`color`	`string`	Theme border color	Color of the divider
`thickness`	`number`	`1`	Thickness of the divider in points
`spacing`	`number`	`0`	Margin around the divider (vertical for horizontal dividers, horizontal for vertical dividers)
`className`	`string`	`''`	Additional Tailwind classes
`style`	`ViewStyle`	—	Additional style object

Usage Examples

Basic Horizontal Divider

<View className="p-4">
  <Text>Section above divider</Text>
  <Divider />
  <Text>Section below divider</Text>
</View>

Divider with Spacing

<View className="p-4">
  <Text>First paragraph content</Text>
  <Divider spacing={16} />
  <Text>Second paragraph content</Text>
</View>

Custom Styled Divider

<View className="p-4">
  <Text>Section header</Text>
  <Divider 
    color="#3b82f6" 
    thickness={2}
    spacing={8}
  />
  <Text>Section content</Text>
</View>

Vertical Divider

<View className="flex-row h-20">
  <View className="p-3">
    <Text>Left content</Text>
  </View>
  <Divider orientation="vertical" spacing={8} />
  <View className="p-3">
    <Text>Right content</Text>
  </View>
</View>

Form Section Example

function ProfileForm() {
  return (
    <View className="p-4">
      <Text className="text-xl font-bold">Profile Information</Text>
      <Divider spacing={16} />
      
      <View className="mb-4">
        <Input label="Full Name" />
        <Input label="Email" />
        <Input label="Phone" />
      </View>
      
      <Divider spacing={16} />
      <Text className="text-xl font-bold mt-4">Account Settings</Text>
      <Divider spacing={16} />
      
      <View className="mb-4">
        <View className="flex-row justify-between items-center py-4">
          <Text>Dark Mode</Text>
          <Switch value={false} />
        </View>
        
        <View className="flex-row justify-between items-center py-4">
          <Text>Notifications</Text>
          <Switch value={true} />
        </View>
      </View>
      
      <Divider spacing={16} />
      
      <Button title="Save Changes" className="mt-4" />
    </View>
  );
}

Card Component Example

function ContentCard({ title, children }) {
  return (
    <Card className="p-0 overflow-hidden">
      <View className="p-4 bg-light-secondary dark:bg-dark-secondary">
        <Text className="font-bold">{title}</Text>
      </View>
      
      <Divider />
      
      <View className="p-4">
        {children}
      </View>
    </Card>
  );
}
 
// Usage
<ContentCard title="Important Information">
  <Text>This is the card content that appears below the divider.</Text>
  <Text className="mt-2">Additional information can be added here.</Text>
</ContentCard>

List Example with Dividers

function ContactList({ contacts }) {
  return (
    <View>
      <Text className="text-xl font-bold mb-4">Contacts</Text>
      
      {contacts.map((contact, index) => (
        <React.Fragment key={contact.id}>
          <View className="py-3">
            <Text className="font-medium">{contact.name}</Text>
            <Text className="text-gray-500">{contact.email}</Text>
          </View>
          
          {index < contacts.length - 1 && (
            <Divider />
          )}
        </React.Fragment>
      ))}
    </View>
  );
}

Side-by-Side Layout Example

function SideBySide() {
  return (
    <View className="bg-white rounded-lg shadow">
      <View className="flex-row h-64">
        {/* Left side */}
        <View className="flex-1 p-4">
          <Text className="text-lg font-bold mb-2">Features</Text>
          <Text className="mb-2">• Responsive design</Text>
          <Text className="mb-2">• Dark mode support</Text>
          <Text className="mb-2">• Cross-platform compatibility</Text>
          <Text className="mb-2">• Performance optimized</Text>
        </View>
        
        {/* Divider */}
        <Divider 
          orientation="vertical" 
          color="#e0e0e0"
          thickness={1}
        />
        
        {/* Right side */}
        <View className="flex-1 p-4">
          <Text className="text-lg font-bold mb-2">Benefits</Text>
          <Text className="mb-2">• Improved user experience</Text>
          <Text className="mb-2">• Faster development time</Text>
          <Text className="mb-2">• Better code organization</Text>
          <Text className="mb-2">• Consistent UI across app</Text>
        </View>
      </View>
    </View>
  );
}

Best Practices

Use for Content Separation

Use dividers to create logical separation between different content sections:

<View className="p-4">
  <Text className="text-xl font-bold">Account</Text>
  <Divider spacing={12} />
  
  <View className="py-4">
    <Text className="font-medium">Personal Information</Text>
    {/* Personal information fields */}
  </View>
  
  <Divider />
  
  <View className="py-4">
    <Text className="font-medium">Security Settings</Text>
    {/* Security settings */}
  </View>
  
  <Divider />
  
  <View className="py-4">
    <Text className="font-medium">Privacy Preferences</Text>
    {/* Privacy preferences */}
  </View>
</View>

Consistent Styling

Maintain consistent divider styling throughout your application:

// Define standard divider styles
const DIVIDERS = {
  section: { spacing: 16, thickness: 1 },
  item: { spacing: 0, thickness: 1 },
  accent: { color: '#3b82f6', thickness: 2, spacing: 8 }
};
 
// Use them consistently
<Divider {...DIVIDERS.section} />
<Divider {...DIVIDERS.item} />
<Divider {...DIVIDERS.accent} />

Use with List Components

Use dividers to separate list items for better visual clarity:

function SettingsList({ settings }) {
  return (
    <View>
      {settings.map((setting, index) => (
        <React.Fragment key={setting.id}>
          <View className="py-3 flex-row justify-between items-center">
            <View>
              <Text className="font-medium">{setting.title}</Text>
              {setting.description && (
                <Text className="text-gray-500 text-sm">{setting.description}</Text>
              )}
            </View>
            {setting.control}
          </View>
          
          {/* Add divider between items, but not after the last one */}
          {index < settings.length - 1 && <Divider />}
        </React.Fragment>
      ))}
    </View>
  );
}

The Divider component uses React Native's View component with custom styling to create a horizontal or vertical line. The color defaults to the theme's border color from the useThemeColors hook, ensuring proper appearance in both light and dark modes.

For horizontal dividers, the component spans the full width of its container and has a height determined by the thickness prop. For vertical dividers, it spans the full height of its container with a width determined by the thickness prop.

The spacing prop adds appropriate margin based on the divider's orientation (vertical margin for horizontal dividers, horizontal margin for vertical dividers).

Notes

Horizontal dividers stretch to fill the width of their container
Vertical dividers need a container with a defined height to be visible
The default color adapts to the current theme (light/dark)
For more complex dividers with content (like "or" dividers), consider creating a custom component
Use the spacing prop to add margin around the divider rather than wrapping it in additional Views

Divider

Divider

Features

Import

Props

Usage Examples

Basic Horizontal Divider

Divider with Spacing

Custom Styled Divider

Vertical Divider

Form Section Example

Card Component Example

List Example with Dividers

Side-by-Side Layout Example

Best Practices

Use for Content Separation

Consistent Styling

Use with List Components

Implementation Details

Notes

On this page