Column

A Jetpack Compose Column component for placing children vertically.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

Expo UI Column matches the official Jetpack Compose Column API and places children vertically 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

Column places children vertically. Use verticalArrangement and horizontalAlignment to control spacing and alignment.

ColumnExample.tsx

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

export default function ColumnExample() {
  return (
    <Host matchContents>
      <Column
        verticalArrangement={{ spacedBy: 8 }}
        horizontalAlignment="center"
        modifiers={[fillMaxWidth(), paddingAll(16)]}>
        <Text>First</Text>
        <Text>Second</Text>
        <Text>Third</Text>
      </Column>
    </Host>
  );
}

API

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

Component

`Column`

Android

Type: React.Element<ColumnProps>

ColumnProps

`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