PastJournalCard

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.

Basic Example

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

Extends CardProps from react-native-paper, excluding the elevation prop.

Primary Props

Prop	Type	Default	Description
children	ReactNode	undefined	Content to display within the card
style	StyleProp<ViewStyle>	undefined	Additional styles to apply to the card
contentStyle	StyleProp<ViewStyle>	undefined	Styles for the card's content container
testID	string	undefined	Test identifier for automated testing

Inherited Props

All Card component props except elevation:

• mode (default: "contained")
• onPress
• disabled
• accessibilityLabel
• accessibilityRole

Component Behavior

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

• 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

Theme Colors Used

• theme.colors.surface - Card background color

Related Components

• PastJournalCard.Title - Title text component
• PastJournalCard.Date - Date display component
• PastJournalCard.Answer - Answer text component
• TodayQuestionCard - Today's question display