KeyboardAwareScrollView Component

/**
 * A ScrollView component that automatically scrolls to keep focused TextInput fields visible
 * when the keyboard appears. Extends ScrollView with keyboard-aware behavior.
 */
export class KeyboardAwareScrollView extends React.Component<
  KeyboardAwareScrollViewProps,
  KeyboardAwareState
> {
  getScrollResponder(): any;
  scrollToPosition(x: number, y: number, animated?: boolean): void;
  scrollToEnd(animated?: boolean): void;
  scrollForExtraHeightOnAndroid(extraHeight: number): void;
  scrollToFocusedInput(
    reactNode: any,
    extraHeight?: number,
    keyboardOpeningTime?: number
  ): void;
  scrollIntoView(
    element: React.ReactElement,
    options?: ScrollIntoViewOptions
  ): Promise<void>;
  update(): void;
}

interface KeyboardAwareScrollViewProps extends KeyboardAwareProps, ScrollViewProps {}

import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

// Basic usage
export function BasicForm() {
  return (
    <KeyboardAwareScrollView style={styles.container}>
      <View style={styles.form}>
        <TextInput placeholder="First Name" style={styles.input} />
        <TextInput placeholder="Last Name" style={styles.input} />
        <TextInput placeholder="Email" style={styles.input} />
        <TextInput placeholder="Phone" style={styles.input} />
      </View>
    </KeyboardAwareScrollView>
  );
}

// Advanced configuration
export function AdvancedForm() {
  return (
    <KeyboardAwareScrollView
      style={styles.container}
      enableOnAndroid={true}
      enableAutomaticScroll={true}
      extraHeight={100}
      extraScrollHeight={50}
      keyboardOpeningTime={250}
      resetScrollToCoords={{ x: 0, y: 0 }}
      enableResetScrollToCoords={true}
      viewIsInsideTabBar={false}
      onKeyboardWillShow={(frames) => console.log('Keyboard will show', frames)}
      onKeyboardWillHide={(frames) => console.log('Keyboard will hide', frames)}
    >
      <View style={styles.form}>
        <TextInput placeholder="Username" style={styles.input} />
        <TextInput placeholder="Password" secureTextEntry style={styles.input} />
        <TextInput 
          placeholder="Comments" 
          multiline 
          numberOfLines={4} 
          style={[styles.input, styles.multiline]} 
        />
      </View>
    </KeyboardAwareScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  form: { padding: 20 },
  input: { 
    borderWidth: 1, 
    borderColor: '#ccc', 
    padding: 10, 
    marginBottom: 15,
    borderRadius: 5 
  },
  multiline: { height: 100 }
});

/**
 * Get the underlying ScrollView's scroll responder
 * @returns The scroll responder instance
 */
getScrollResponder(): any;

/**
 * Scroll to specific position with or without animation
 * @param x - The x coordinate to scroll to
 * @param y - The y coordinate to scroll to
 * @param animated - Whether to animate the scroll (default: true)
 */
scrollToPosition(x: number, y: number, animated?: boolean): void;

import React, { useRef } from 'react';
import { Button } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

export function ScrollableForm() {
  const scrollViewRef = useRef<KeyboardAwareScrollView>(null);

  const scrollToTop = () => {
    scrollViewRef.current?.scrollToPosition(0, 0, true);
  };

  const scrollToBottom = () => {
    scrollViewRef.current?.scrollToPosition(0, 1000, true);
  };

  return (
    <>
      <KeyboardAwareScrollView ref={scrollViewRef}>
        {/* Form content */}
      </KeyboardAwareScrollView>
      <Button title="Scroll to Top" onPress={scrollToTop} />
      <Button title="Scroll to Bottom" onPress={scrollToBottom} />
    </>
  );
}

/**
 * Scroll to end with or without animation
 * @param animated - Whether to animate the scroll (default: true)
 */
scrollToEnd(animated?: boolean): void;

/**
 * Android-specific scroll method with extra height offset (Android only)
 * @param extraHeight - Additional height to add to the scroll offset
 */
scrollForExtraHeightOnAndroid(extraHeight: number): void;

/**
 * Scroll to a specific focused input field
 * @param reactNode - The React node handle of the input to scroll to
 * @param extraHeight - Additional height offset (optional)
 * @param keyboardOpeningTime - Custom keyboard opening delay (optional)
 */
scrollToFocusedInput(
  reactNode: any,
  extraHeight?: number,
  keyboardOpeningTime?: number
): void;

import React, { useRef } from 'react';
import { TextInput, findNodeHandle } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

export function ManualScrollForm() {
  const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
  const textInputRef = useRef<TextInput>(null);

  const handleFocus = () => {
    const node = findNodeHandle(textInputRef.current);
    if (node && scrollViewRef.current) {
      scrollViewRef.current.scrollToFocusedInput(node, 100, 250);
    }
  };

  return (
    <KeyboardAwareScrollView ref={scrollViewRef}>
      <TextInput
        ref={textInputRef}
        placeholder="Focus me"
        onFocus={handleFocus}
      />
    </KeyboardAwareScrollView>
  );
}

/**
 * Scrolls an element into view with customizable positioning
 * @param element - The React element to scroll into view
 * @param options - Configuration options for scroll positioning
 * @returns Promise that resolves when scrolling is complete
 */
scrollIntoView(
  element: React.ReactElement,
  options?: ScrollIntoViewOptions
): Promise<void>;

interface ScrollIntoViewOptions {
  getScrollPosition?: (
    parentLayout: ElementLayout,
    childLayout: ElementLayout,
    contentOffset: ContentOffset
  ) => ScrollPosition;
}

/**
 * Manually trigger scroll to currently focused input
 * Useful for updating scroll position after layout changes
 */
update(): void;

interface KeyboardAwareScrollViewProps extends KeyboardAwareProps, ScrollViewProps {
  // Inherits all ScrollView props (style, contentContainerStyle, etc.)
  // Plus all KeyboardAwareProps (see main documentation)
}