# PastJournalCard

Canonical page: https://docs.ovok.com/native-sdk/guide/components/journal/past-journal-card

The `PastJournalCard` component displays completed journal entries and questionnaire responses in a Material Design card format. It provides a structured layout for showing historical health data, patient responses, and journal content.

`PastJournalCard.Content` is the raw `react-native-paper` `Card.Content` export;
it is not an SDK wrapper with a separate prop contract.

## Basic Example [#basic-example]

```typescript
import { PastJournalCard } from "@ovok/native";
import * as React from "react";

const BasicPastJournalCard = () => (
  <PastJournalCard>
    <PastJournalCard.Content>
      <PastJournalCard.Date>Date</PastJournalCard.Date>
      <PastJournalCard.Title>Title</PastJournalCard.Title>
      <PastJournalCard.Answer>Answer</PastJournalCard.Answer>
    </PastJournalCard.Content>
  </PastJournalCard>
);

export default BasicPastJournalCard;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/journal` API reference](/native-sdk/reference/journal).

## Component Behavior [#component-behavior]

### Card Design [#card-design]

- **Mode**: Uses `"contained"` mode for Material Design 3 elevation
- **Background**: Automatically applies `theme.colors.surface` background
- **Elevation**: Fixed card elevation for consistent appearance

### Theme Integration [#theme-integration]

- **Surface Color**: Uses theme surface color for proper contrast
- **Content Styling**: Child components inherit theme colors
- **Dark Mode**: Automatically adapts to dark/light theme changes

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.surface` - Card background color

## Related Components [#related-components]

- [**`PastJournalCard.Title`**](/native-sdk/guide/components/journal/past-journal-card-title/) - Title text component
- [**`PastJournalCard.Date`**](/native-sdk/guide/components/journal/past-journal-card-date/) - Date display component
- [**`PastJournalCard.Answer`**](/native-sdk/guide/components/journal/past-journal-card-answer/) - Answer text component
- [**`TodayQuestionCard`**](/native-sdk/guide/components/journal/today-question-card/) - Today's question display