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>;

Exports

• 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 props

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 props

ContentCard.Cover accepts OptimizedImageProps plus:

Prop	Type	Notes
uri	string	Required image URI.
badge	string | (() => ReactNode)	A string renders CoverBadge; a function returns custom badge content.
containerStyle	StyleProp<ViewStyle>	Style for the padded outer container.
testID	string	Applied to the container; -cover and -badge are used for generated children.

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 props

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 localization

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.