TodayQuestionCard

The TodayQuestionCard component displays daily questions and prompts in an interactive card format with gradient background support. It's designed for engaging daily health check-ins, questionnaires, and journal prompts with visual appeal and clear call-to-action elements.

Basic Example

import { TodayQuestionCard } from "@ovok/native";
import * as React from "react";
import { IconButton } from "react-native-paper";

const BasicTodayQuestionCard = () => (
  <TodayQuestionCard>
    <TodayQuestionCard.Gradient colors={["#1a1a21", "#1a1a21", "#1a1a21"]}>
      <TodayQuestionCard.Title>Daily Check-in</TodayQuestionCard.Title>
      <TodayQuestionCard.Question>
        How are you feeling?
      </TodayQuestionCard.Question>
      <TodayQuestionCard.Actions>
        <IconButton icon="refresh" />
        <IconButton icon="arrow-right" />
      </TodayQuestionCard.Actions>
    </TodayQuestionCard.Gradient>
  </TodayQuestionCard>
);

export default BasicTodayQuestionCard;

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

Inherited Props

All Card component props except elevation:

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

Compound Components

• TodayQuestionCard.Gradient - Linear gradient container using expo-linear-gradient
• TodayQuestionCard.Content - Padded content container with theme spacing
• TodayQuestionCard.Title - Primary-colored title text
• TodayQuestionCard.Question - Question text with emphasis styling
• TodayQuestionCard.Actions - Right-aligned action buttons container

Component Behavior

Card Design

• Mode: Uses "contained" mode for Material Design 3 elevation
• Background: Automatically applies theme.colors.surface background
• Gradient Support: Designed to work with gradient backgrounds for visual appeal

Theme Integration

• Surface Color: Uses theme surface color as base
• Component Colors: Child components use appropriate theme colors
• Responsive Design: Adapts to different screen sizes and orientations

Styling

Theme Colors Used

• theme.colors.surface - Card background color

Related Components

• TodayQuestionCard.Gradient - Gradient background component
• TodayQuestionCard.Content - Content container component
• TodayQuestionCard.Title - Title text component
• TodayQuestionCard.Question - Question text component
• TodayQuestionCard.Actions - Actions container component
• PastJournalCard - Historical entries display