ContentCard

ContentCard is a small compound wrapper around React Native Paper's Card. It is content-agnostic: the app supplies the title, image URI, badge, and press behavior.

import { ContentCard } from "@ovok/native";

<ContentCard onPress={() => openContent(id)}>
  <ContentCard.Cover uri={imageUri} badge="Featured" />
  <ContentCard.Content>
    <ContentCard.Title>{title}</ContentCard.Title>
  </ContentCard.Content>
</ContentCard>;

ExportsCopy Anchor Link

• ContentCard: the root Paper Card; it uses mode="contained" and the app theme's surface color.
• ContentCard.Cover: padded image container using OptimizedImage with a 16:9 cover default.
• ContentCard.CoverBadge: a themed, absolutely positioned badge.
• ContentCard.Content: React Native Paper Card.Content, exported unchanged.
• ContentCard.Title: Paper Text with a titleLarge default and two-line truncation.

Root propsCopy Anchor Link

The root accepts Omit<CardProps, "elevation"> and optional children. style, contentStyle, testID, onPress, accessibility props, and other supported Paper card props are passed to the card. The SDK does not add a navigation action or content model.

Cover propsCopy Anchor Link

ContentCard.Cover accepts OptimizedImageProps plus:

The cover sets fit="cover", width="100%", and aspectRatio={16 / 9} before spreading image props, so supported image props can override those defaults. containerStyle is consumed by ContentCard.Cover for the outer padded view and is not forwarded to OptimizedImage; use style for the rendered image itself.

Badge and title propsCopy Anchor Link

ContentCard.CoverBadge requires either label or children and accepts size (small, medium, or large), style, textStyle, and testID. The badge is positioned from the top-left of the cover.

ContentCard.Title requires children and accepts Paper TextProps, style, and testID. It defaults to variant="titleLarge", sets numberOfLines={2}, and uses the SDK bold font.

Theme and localizationCopy Anchor Link

The component reads colors, spacing, and radii from useAppTheme. It has no built-in content-card translation keys. Localize titles and badge labels in the calling app. ContentCard.Content is a raw Paper primitive, so its supported props come from the installed React Native Paper version.