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 ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/journal API reference.

Compound ComponentsCopy Anchor Link

• 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 BehaviorCopy Anchor Link

Card DesignCopy Anchor Link

• 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 IntegrationCopy Anchor Link

• 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

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.surface - Card background color

Related ComponentsCopy Anchor Link

• 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