Row

A Jetpack Compose Row component for placing children horizontally.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

Expo UI Row matches the official Jetpack Compose Row API and places children horizontally with configurable arrangement and alignment.

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

Row places children horizontally. Use horizontalArrangement and verticalAlignment to control spacing and alignment.

RowExample.tsx

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

export default function RowExample() {
  return (
    <Host matchContents>
      <Row
        horizontalArrangement="spaceEvenly"
        verticalAlignment="center"
        modifiers={[fillMaxWidth(), height(60)]}>
        <Text>Item 1</Text>
        <Text>Item 2</Text>
        <Text>Item 3</Text>
      </Row>
    </Host>
  );
}

API

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

Component

`Row`

Android

Type: React.Element<RowProps>

RowProps

`children`

Android

Optional • Type: React.ReactNode

`horizontalAlignment`

Android

Optional • Type: HorizontalAlignment

Horizontal alignment of children.

`horizontalArrangement`

Android

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

`verticalAlignment`

Android

Optional • Type: VerticalAlignment

Vertical alignment of children.

`verticalArrangement`

Android

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited Props

PrimitiveBaseProps