This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Divider

Jetpack Compose Divider components for creating visual separators.

Android

GitHub

npm

Changelog

Expo UI provides HorizontalDivider and VerticalDivider matching the official Jetpack Compose Divider API.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Horizontal divider

A thin horizontal line to visually separate content in lists and layouts.

HorizontalDividerExample.tsx

import { Host, HorizontalDivider, Column, Text } from '@expo/ui/jetpack-compose';

export default function HorizontalDividerExample() {
  return (
    <Host matchContents>
      <Column>
        <Text>First section</Text>
        <HorizontalDivider />
        <Text>Second section</Text>
      </Column>
    </Host>
  );
}

Custom thickness and color

Both HorizontalDivider and VerticalDivider accept thickness and color props. Use StyleSheet.hairlineWidth for a single-pixel line, or set a custom thickness and color.

CustomDividerExample.tsx

import { Host, HorizontalDivider, Column, Text } from '@expo/ui/jetpack-compose';
import { StyleSheet } from 'react-native';

export default function CustomDividerExample() {
  return (
    <Host matchContents>
      <Column>
        <Text>Hairline divider (1 pixel)</Text>
        <HorizontalDivider thickness={StyleSheet.hairlineWidth} />
        <Text>Thick colored divider</Text>
        <HorizontalDivider thickness={4} color="#E91E63" />
        <Text>Below</Text>
      </Column>
    </Host>
  );
}

Vertical divider

A vertical line to separate items side by side in a row layout.

VerticalDividerExample.tsx

import { Host, VerticalDivider, Row, Text } from '@expo/ui/jetpack-compose';
import { height } from '@expo/ui/jetpack-compose/modifiers';

export default function VerticalDividerExample() {
  return (
    <Host matchContents>
      <Row verticalAlignment="center" modifiers={[height(48)]}>
        <Text>Left</Text>
        <VerticalDivider />
        <Text>Right</Text>
      </Row>
    </Host>
  );
}

API

import { HorizontalDivider, VerticalDivider } from '@expo/ui/jetpack-compose';

Components

`HorizontalDivider`

Android

Type: React.Element<ComponentType<DividerCommonConfig>>

A horizontal divider line that groups content in lists and layouts, matching Compose's HorizontalDivider.

`VerticalDivider`

Android

Type: React.Element<ComponentType<DividerCommonConfig>>

A vertical divider line that groups content in layouts, matching Compose's VerticalDivider.

Types

`DividerCommonConfig`

Android

Property	Type	Description
color(optional)	`ColorValue`	Color of the divider line.
modifiers(optional)	`ModifierConfig[]`	Modifiers for the component.
thickness(optional)	`number`	Thickness of the divider line. Accepts dp values; use `StyleSheet.hairlineWidth` for a single-pixel line.