FlowRow

A Jetpack Compose FlowRow component for wrapping children horizontally.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

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.

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 } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

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

  return (
    <Host matchContents>
      <FlowRow
        horizontalArrangement={{ spacedBy: 8 }}
        verticalArrangement={{ spacedBy: 8 }}
        modifiers={[paddingAll(16)]}>
        {tags.map(tag => (
          <Text key={tag}>{tag}</Text>
        ))}
      </FlowRow>
    </Host>
  );
}

API

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

Component

`FlowRow`

Android

Type: React.Element<FlowRowProps>

FlowRowProps

`children`

Android

Optional • Type: React.ReactNode

`horizontalArrangement`

Android

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

`verticalArrangement`

Android

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited Props

PrimitiveBaseProps