Card

A Jetpack Compose Card component for displaying content in a styled container.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

Expo UI Card matches the official Jetpack Compose Card API and displays content inside a styled surface container with optional elevation and outline.

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

Basic card

BasicCardExample.tsx

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

export default function BasicCardExample() {
  return (
    <Host matchContents>
      <Card>
        <Text modifiers={[paddingAll(16)]}>This is a basic card with default styling.</Text>
      </Card>
    </Host>
  );
}

Card variants

Use the variant prop to switch between 'default', 'elevated', and 'outlined' styles.

CardVariantsExample.tsx

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

export default function CardVariantsExample() {
  return (
    <Host matchContents>
      <Column verticalArrangement={{ spacedBy: 12 }}>
        <Card variant="default">
          <Text modifiers={[paddingAll(16)]}>Default card</Text>
        </Card>
        <Card variant="elevated">
          <Text modifiers={[paddingAll(16)]}>Elevated card</Text>
        </Card>
        <Card variant="outlined">
          <Text modifiers={[paddingAll(16)]}>Outlined card</Text>
        </Card>
      </Column>
    </Host>
  );
}

API

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

Component

`Card`

Android

Type: React.Element<CardProps>

A card component that provides a surface for content.

CardProps

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the card.

`color`

Android

Optional • Type: ColorValue

The background color of the card.

`elementColors`

Android

Optional • Type: CardElementColors

Colors for card's core elements.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`variant`

Android

Optional • Literal type: string • Default: 'default'

The variant of the card.

'default' - A filled card with no outline.
'elevated' - A filled card with elevation/shadow.
'outlined' - A card with an outline border.

Acceptable values are: 'default' | 'elevated' | 'outlined'

Types

`CardElementColors`

Android

Colors for card's core elements.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-