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

Divider

Jetpack Compose Divider components for creating visual separators.

Android

Included in Expo Go

GitHub

npm

Changelog

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

Three text sections separated by horizontal Material 3 dividers

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,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';

export default function HorizontalDividerExample() {
  const colors = useMaterialColors();

  return (
    <Host style={{ flex: 1 }}>
      <Column>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          First section
        </Text>
        <HorizontalDivider />
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          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,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import { StyleSheet } from 'react-native';

export default function CustomDividerExample() {
  const colors = useMaterialColors();

  return (
    <Host style={{ flex: 1 }}>
      <Column>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          Hairline divider (1 pixel)
        </Text>
        <HorizontalDivider thickness={StyleSheet.hairlineWidth} />
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          Thick colored divider
        </Text>
        <HorizontalDivider thickness={4} color="#E91E63" />
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          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,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import { height } from '@expo/ui/jetpack-compose/modifiers';

export default function VerticalDividerExample() {
  const colors = useMaterialColors();

  return (
    <Host matchContents>
      <Row
        verticalAlignment="center"
        horizontalArrangement={{ spacedBy: 16 }}
        modifiers={[height(48)]}>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          Left
        </Text>
        <VerticalDivider />
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          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.