/** * FormContainer Component * * A reusable container for forms with proper keyboard handling and responsive layout. * * Features: * - Pure React Native implementation (no Paper dependency) * - Universal keyboard handling (no platform-specific code) * - ScrollView with automatic content padding * - Safe area insets for bottom tab navigation overlap * - Responsive max width for large screens (tablets) * - Consistent vertical spacing between form elements * - Theme-aware surface colors * - Optimized performance with memoized styles * * Usage: * ```tsx * * * * * Submit * * * ``` * * Why This Component: * - Prevents keyboard from covering input fields (universal solution) * - Handles safe area (notch, bottom tabs) automatically * - Consistent form layout across all 100+ generated apps * - Responsive design for tablets (max 700px) and phones (full width) * - Automatic vertical spacing between form elements (no manual marginBottom) * - Reduces boilerplate in form screens * - Universal code - no platform checks, works on iOS, Android, Web * * Technical Details: * - Uses ScrollView with contentContainerStyle for keyboard handling * - Pure React Native View for surface (lightweight) * - Vertical spacing via Children.map() wrapping (universal compatibility) * - Safe area insets from react-native-safe-area-context * - Responsive values from useResponsive hook * * @module FormContainer */ import React from 'react'; import { StyleProp, ViewStyle } from 'react-native'; /** * Props for FormContainer component */ export interface FormContainerProps { /** Form content (inputs, buttons, etc.) */ children: React.ReactNode; /** Container style override (for outer View) */ containerStyle?: StyleProp; /** Content container style override (for ScrollView content) */ contentContainerStyle?: StyleProp; /** Show vertical scroll indicator */ showsVerticalScrollIndicator?: boolean; /** Optional test ID for E2E testing */ testID?: string; /** Show surface border (default: true) */ showBorder?: boolean; /** Accessibility label for the container */ accessibilityLabel?: string; /** Accessibility hint for the container */ accessibilityHint?: string; /** Whether the container is accessible */ accessible?: boolean; } /** * FormContainer - Universal form wrapper component * * Wraps forms with: * - Pure React Native surface * - Universal keyboard handling (no platform checks) * - ScrollView for content overflow * - Safe area insets (bottom tabs, notch) * - Responsive max width (tablets) * - Theme integration */ export declare const FormContainer: React.FC;