Answer

The Answer component provides a keyboard-aware scrollable container for journal entry forms. It combines KeyboardAwareScrollView with KeyboardToolbar to create an optimal mobile input experience for healthcare questionnaires and journal entries.

Basic ExampleCopy Anchor Link

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

const BasicAnswer = () => {
  const [answerText, setAnswerText] = React.useState("");

  return (
    <Answer>
      <Answer.Question>What is your name?</Answer.Question>
      <Answer.Input
        value={answerText}
        onChangeText={setAnswerText}
        placeholder="Your answer"
        autoFocus
        multiline
      />
      <Answer.Actions>
        <Button mode="contained">Save</Button>
      </Answer.Actions>
    </Answer>
  );
};

export default BasicAnswer;

PropsCopy Anchor Link

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

Compound ComponentsCopy Anchor Link

• Answer.Header - Top section for navigation and form actions
• Answer.Question - Styled text component for question display
• Answer.Input - Theme-aware text input for user responses
• Answer.Actions - Bottom container for submission buttons

Component BehaviorCopy Anchor Link

Keyboard ManagementCopy Anchor Link

• Automatic Scrolling: Ensures input fields remain visible when keyboard appears
• Keyboard Toolbar: Provides native iOS-style toolbar above keyboard
• Scroll Performance: Optimized for smooth scrolling during text input

Layout SystemCopy Anchor Link

• Flexible Height: Expands to fill available screen space
• Content Padding: Default padding of theme.spacing(6) with customizable override
• Component Spacing: Consistent theme.spacing(5) gap between child elements

Theme IntegrationCopy Anchor Link

• Spacing Values: Uses theme multipliers for consistent layout
• Color Inheritance: Child components inherit theme colors automatically
• Responsive Design: Adapts to different screen sizes and orientations

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• Inherits from child components (no direct color usage)