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 Example

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;

Props

Extends KeyboardAwareScrollViewProps from react-native-keyboard-controller.

Primary Props

Prop	Type	Default	Description
contentContainerStyle	StyleProp<ViewStyle>	undefined	Additional styles for the scroll view content container
children	ReactNode	undefined	Child components to render within the scrollable area

Inherited Props

All props from KeyboardAwareScrollView are supported, including:

• showsVerticalScrollIndicator
• keyboardDismissMode
• bounces
• scrollEventThrottle

Compound Components

• 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 Behavior

Keyboard Management

• 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 System

• 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 Integration

• 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

Styling

Theme Colors Used

• Inherits from child components (no direct color usage)