# Answer

Canonical page: https://docs.ovok.com/native-sdk/guide/components/journal/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 [#basic-example]

```typescript
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 [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/journal` API reference](/native-sdk/reference/journal).

## Compound Components [#compound-components]

- [**`Answer.Header`**](/native-sdk/guide/components/journal/answer-header/) - Top section for navigation and form actions
- [**`Answer.Question`**](/native-sdk/guide/components/journal/answer-question/) - Styled text component for question display
- [**`Answer.Input`**](/native-sdk/guide/components/journal/answer-input/) - Theme-aware text input for user responses
- [**`Answer.Actions`**](/native-sdk/guide/components/journal/answer-actions/) - Bottom container for submission buttons

## Component Behavior [#component-behavior]

### Keyboard Management [#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 [#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 [#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 [#styling]

### Theme Colors Used [#theme-colors-used]

- Inherits from child components (no direct color usage)