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

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

Installation

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.

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