FlowRow

A Jetpack Compose FlowRow component for wrapping children horizontally.

Android

Included in Expo Go

GitHub

npm

Changelog

Recommended version:

~57.0.11

Expo UI FlowRow matches the official Jetpack Compose FlowRow API and arranges children in a horizontal flow that wraps to the next line when it runs out of space.

Six assist chip tags wrapping across multiple lines

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

FlowRow arranges children in a horizontal flow that wraps to the next line when it runs out of space.

FlowRowExample.tsx

import {
  Host,
  FlowRow,
  Text,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import {
  border,
  padding,
  paddingAll,
} from '@expo/ui/jetpack-compose/modifiers';

export default function FlowRowExample() {
  const colors = useMaterialColors();
  const tags = [
    'React Native',
    'Expo',
    'Android',
    'Jetpack Compose',
    'Material 3',
    'Kotlin',
  ];

  return (
    <Host style={{ flex: 1 }}>
      <FlowRow
        horizontalArrangement={{ spacedBy: 8 }}
        verticalArrangement={{ spacedBy: 8 }}
        modifiers={[paddingAll(16)]}>
        {tags.map(tag => (
          <Text
            key={tag}
            style={{ fontSize: 28 }}
            color={colors.onBackground}
            modifiers={[
              border(1, colors.outline),
              padding(12, 6, 12, 6),
            ]}>
            {tag}
          </Text>
        ))}
      </FlowRow>
    </Host>
  );
}

API

import { FlowRow } from '@expo/ui/jetpack-compose';

Component

`FlowRow`

Type: React.Element<FlowRowProps>

FlowRowProps

`children`

Optional • Type: ReactNode

`horizontalArrangement`

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

`verticalArrangement`

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited props

PrimitiveBaseProps