Compositions
Event Card
Event photo with a date tile, time and place, who's going and a ticket button.
This week
Oct12Night Owls liveSat · 8:00 PMBrooklyn Steel, New York
124 going
Get tickets
Oct16Design Systems SummitWed · 9:30 AMPier 27, San Francisco
2 going
RSVPEvent Card is designed for a vertical feed: each card takes the full width of the list, one event per row. There is no width to set.
Installation
npx axiom add event-cardpnpm dlx axiom add event-cardyarn dlx axiom add event-cardbun x axiom add event-cardAlso copies: card, avatar, icon, button, title, text and their dependencies. The file lands in components/compositions/event-card.tsx. It brings no tokens of its own.
The detail icons come from your icon registry. Add the ones you use to icons.tsx, for example with expo-symbols:
time: symbol("clock", "schedule"),
location: symbol("mappin.and.ellipse", "location_on"),Usage
import { EventCard } from "@/components/compositions/event-card";
<EventCard
title="Night Owls live"
image={{ uri: event.photo }}
date={new Date(event.startsAt)}
details={[
{ icon: "time", label: "Sat · 8:00 PM" },
{ icon: "location", label: "Brooklyn Steel, New York" },
]}
attendees={event.friendsGoing}
attendeeCount={event.goingCount}
onAction={() => router.push(`/events/${event.id}/tickets`)}
onPress={() => router.push(`/events/${event.id}`)}
/>;The date tile formats date in the device’s locale: “OCT” and “12” on the photo, and the full date, “Sunday, October 12”, for screen readers. The details are yours to format.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Name of the event, up to two lines. |
image | ImageSourcePropType | — | The photo, in 16:9 at the top of the card. |
date | Date | — | Shown as a month and day tile on the photo. |
details | EventDetail[] | — | { icon?, label }: time, place. One muted line each, under the title. |
attendees | EventAttendee[] | — | { name, avatar? }. The first three show as overlapping Avatars. |
attendeeCount | number | attendees.length | The total in “124 going”, often larger than the avatars shown. |
attendeeLabel | string | "going" | The word after the count. |
actionLabel | string | "Get tickets" | Label of the action button. |
onAction | () => void | — | Shows the small button, next to the attendees. Without it, there is no button. |
onPress | () => void | — | Makes the whole card pressable, to open the event. The button keeps its own press. |
style | StyleProp<ViewStyle> | — | Extra styles for the card container, for example a margin. |
Built with
- Card: the elevated surface, its media, header and footer.
- Title: the event name and the day of the date tile.
- Text: the month, the details and the count.
- Icon: the detail icons, from your registry.
- Avatar:
Avatar.Group, the people going. - Button: the small action.
Used in
No block uses Event Card yet.