Expand Card

A card that grows from a compact row into a full detail view. The picture swells from a thumbnail to a banner, the title slides down beneath it, the details fade in, and the chevron turns over, all driven by one value so the parts stay in step. Pressing the header toggles it, and the details stay interactive when open. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add expand-card

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/expand-card.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { Text, View } from "react-native";
import { ExpandCard } from "@/components/ui/expand-card";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <ExpandCard
      title="Harbor Loft"
      subtitle="Halifax, Nova Scotia"
      expanded={open}
      onExpandedChange={setOpen}
      hero={<View style={{ flex: 1, alignSelf: "stretch", backgroundColor: "#4f9bd9" }} />}
    >
      <Text>Top floor, harbour view.</Text>
    </ExpandCard>
  );
}

Props