Box

Expo UI Box matches the official Jetpack Compose Box API and stacks children on top of each other with configurable content alignment.

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Box stacks children on top of each other. Use contentAlignment to position them within the box.

import { Host, Box, Text } from '@expo/ui/jetpack-compose';
import { size, background } from '@expo/ui/jetpack-compose/modifiers';

export default function BoxExample() {
  return (
    <Host matchContents>
      <Box contentAlignment="center" modifiers={[size(200, 200), background('#E0E0E0')]}>
        <Text>Centered in Box</Text>
      </Box>
    </Host>
  );
}

API

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

Component