Answer.Input

The Answer.Input component provides a theme-aware text input specifically designed for journal entries and questionnaire responses. It offers optimized styling and placeholder text handling for healthcare data collection.

Basic Example

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

const BasicAnswerInput = () => (
  <Answer.Input placeholder="Enter your response" />
);

export default BasicAnswerInput;

Props

Extends TextInputProps from react-native-paper.

Primary Props

Prop	Type	Default	Description
style	StyleProp<TextStyle>	undefined	Additional styles to apply to the input field
placeholderTextColor	string	theme.colors.onSurfaceDisabled	Color for placeholder text (automatically themed)

Inherited Props

All TextInput component props from react-native-paper are supported:

• value
• onChangeText
• placeholder
• multiline
• numberOfLines
• autoFocus
• keyboardType
• autoCapitalize
• maxLength
• editable

Component Behavior

Theme Integration

• Placeholder Color: Automatically uses theme.colors.onSurfaceDisabled for consistent muted text
• Text Color: Inherits from theme system for optimal contrast
• Background: Adapts to current theme (light/dark mode)

Styling

Default Styles

const styles = StyleSheet.create({
  input: {
    flex: 1,
  },
});

Theme Colors Used

• theme.colors.onSurfaceDisabled - Placeholder text color

Related Components

• Answer - Parent container component
• Answer.Header - Header navigation component
• Answer.Question - Question display component
• Answer.Actions - Bottom action container