Higher-Order Component (HOC)

/**
 * Enhance any scrollable component with keyboard awareness
 * Direct usage: wraps component immediately
 * @param WrappedComponent - The component to enhance with keyboard awareness
 * @returns Enhanced component with keyboard-aware behavior
 */
function listenToKeyboardEvents<P>(
  WrappedComponent: React.ComponentType<P>
): React.ComponentType<P & KeyboardAwareProps>;

/**
 * Configuration-based usage: returns a function to wrap components
 * @param options - Configuration options for keyboard awareness
 * @returns Function that wraps components with configured keyboard awareness
 */
function listenToKeyboardEvents<P>(
  options: KeyboardAwareHOCOptions
): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P & KeyboardAwareProps>;

interface KeyboardAwareHOCOptions {
  enableOnAndroid?: boolean;
  contentContainerStyle?: any;
  enableAutomaticScroll?: boolean;
  extraHeight?: number;
  extraScrollHeight?: number;
  enableResetScrollToCoords?: boolean;
  keyboardOpeningTime?: number;
  viewIsInsideTabBar?: boolean;
  refPropName?: string;
  extractNativeRef?: (ref: any) => any;
}

import { ScrollView, FlatList, View } from 'react-native';
import { listenToKeyboardEvents } from 'react-native-keyboard-aware-scroll-view';

// Direct usage - wrap component immediately
const KeyboardAwareCustomScrollView = listenToKeyboardEvents(ScrollView);

// Configuration-based usage - configure first, then wrap
const enhanceWithKeyboard = listenToKeyboardEvents({
  enableOnAndroid: true,
  enableAutomaticScroll: true,
  extraHeight: 100,
  keyboardOpeningTime: 300,
});

const KeyboardAwareCustomFlatList = enhanceWithKeyboard(FlatList);

/**
 * Direct component wrapping with default keyboard awareness settings
 * @param WrappedComponent - The scrollable component to enhance
 * @returns Enhanced component with keyboard-aware behavior
 */
function listenToKeyboardEvents<P>(
  WrappedComponent: React.ComponentType<P>
): React.ComponentType<P & KeyboardAwareProps>;

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

// Create keyboard-aware ScrollView
const KeyboardAwareScrollView = listenToKeyboardEvents(ScrollView);

export function CustomForm() {
  return (
    <KeyboardAwareScrollView
      style={{ flex: 1 }}
      enableOnAndroid={true}
      extraHeight={75}
    >
      <View style={{ padding: 20 }}>
        <TextInput placeholder="Name" style={{ marginBottom: 15 }} />
        <TextInput placeholder="Email" style={{ marginBottom: 15 }} />
        <TextInput placeholder="Message" multiline numberOfLines={4} />
      </View>
    </KeyboardAwareScrollView>
  );
}

/**
 * Configuration-based component wrapping with custom settings
 * @param options - Configuration options for keyboard awareness behavior
 * @returns Function that wraps components with the specified configuration
 */
function listenToKeyboardEvents<P>(
  options: KeyboardAwareHOCOptions
): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P & KeyboardAwareProps>;

import React from 'react';
import { ScrollView, FlatList, SectionList } from 'react-native';
import { listenToKeyboardEvents } from 'react-native-keyboard-aware-scroll-view';

// Create configured HOC
const createKeyboardAwareComponent = listenToKeyboardEvents({
  enableOnAndroid: true,
  enableAutomaticScroll: true,
  extraHeight: 100,
  extraScrollHeight: 50,
  keyboardOpeningTime: 300,
  enableResetScrollToCoords: true,
  viewIsInsideTabBar: false,
});

// Apply to multiple components
const CustomKeyboardAwareScrollView = createKeyboardAwareComponent(ScrollView);
const CustomKeyboardAwareFlatList = createKeyboardAwareComponent(FlatList);
const CustomKeyboardAwareSectionList = createKeyboardAwareComponent(SectionList);

export function ConfiguredComponents() {
  const data = [{ id: '1', text: 'Item 1' }, { id: '2', text: 'Item 2' }];

  return (
    <>
      <CustomKeyboardAwareScrollView>
        {/* ScrollView content */}
      </CustomKeyboardAwareScrollView>
      
      <CustomKeyboardAwareFlatList
        data={data}
        renderItem={({ item }) => <YourItemComponent item={item} />}
        keyExtractor={item => item.id}
      />
    </>
  );
}

import React from 'react';
import { View, ScrollView } from 'react-native';
import { listenToKeyboardEvents } from 'react-native-keyboard-aware-scroll-view';

// Custom scrollable component
interface CustomScrollableProps {
  children: React.ReactNode;
  backgroundColor?: string;
}

const CustomScrollableComponent: React.FC<CustomScrollableProps> = ({ 
  children, 
  backgroundColor = 'white',
  ...props 
}) => (
  <ScrollView 
    style={{ backgroundColor }} 
    contentContainerStyle={{ padding: 20 }}
    {...props}
  >
    {children}
  </ScrollView>
);

// Enhance with keyboard awareness
const KeyboardAwareCustomScrollable = listenToKeyboardEvents(CustomScrollableComponent);

export function EnhancedCustomComponent() {
  return (
    <KeyboardAwareCustomScrollable
      backgroundColor="#f5f5f5"
      enableOnAndroid={true}
      extraHeight={100}
    >
      <YourFormContent />
    </KeyboardAwareCustomScrollable>
  );
}

import React from 'react';
import { listenToKeyboardEvents } from 'react-native-keyboard-aware-scroll-view';
import { Animated } from 'react-native';

// For Animated.ScrollView which needs special ref handling
const KeyboardAwareAnimatedScrollView = listenToKeyboardEvents({
  enableOnAndroid: true,
  extraHeight: 75,
  // Custom ref extraction for Animated components
  extractNativeRef: (ref) => {
    // Handle animated ref extraction
    if (ref && ref.getNode) {
      return ref.getNode();
    }
    return ref;
  }
})(Animated.ScrollView);

// For components using innerRef instead of ref
const KeyboardAwareStyledScrollView = listenToKeyboardEvents({
  enableOnAndroid: true,
  refPropName: 'innerRef', // Use innerRef instead of ref
  extraHeight: 75,
})(YourStyledScrollViewComponent);

export function AdvancedRefHandling() {
  return (
    <>
      <KeyboardAwareAnimatedScrollView>
        <YourAnimatedContent />
      </KeyboardAwareAnimatedScrollView>
      
      <KeyboardAwareStyledScrollView>
        <YourStyledContent />
      </KeyboardAwareStyledScrollView>
    </>
  );
}

interface KeyboardAwareHOCOptions {
  /** Enable keyboard awareness on Android */
  enableOnAndroid?: boolean;
  /** Style for content container (Android) */
  contentContainerStyle?: any;
  /** Enable automatic scrolling to focused inputs */
  enableAutomaticScroll?: boolean;
  /** Extra height when focusing TextInputs */
  extraHeight?: number;
  /** Extra offset above keyboard */
  extraScrollHeight?: number;
  /** Enable automatic reset to coordinates */
  enableResetScrollToCoords?: boolean;
  /** Delay before scrolling to new position */
  keyboardOpeningTime?: number;
  /** Account for TabBar height */
  viewIsInsideTabBar?: boolean;
  /** Ref prop name for the wrapped component */
  refPropName?: string;
  /** Function to extract native ref from wrapped ref */
  extractNativeRef?: (ref: any) => any;
}

const defaultOptions: KeyboardAwareHOCOptions = {
  enableOnAndroid: false,
  contentContainerStyle: undefined,
  enableAutomaticScroll: true,
  extraHeight: 75,
  extraScrollHeight: 0,
  enableResetScrollToCoords: true,
  keyboardOpeningTime: 250,
  viewIsInsideTabBar: false,
  refPropName: 'ref',
  extractNativeRef: (ref) => ref?.getNode?.() || ref
};

import { listenToKeyboardEvents } from 'react-native-keyboard-aware-scroll-view';
import { KeyboardAvoidingView, ScrollView } from 'react-native';

// Enhanced KeyboardAvoidingView
const KeyboardAwareAvoidingView = listenToKeyboardEvents({
  enableOnAndroid: true,
  extraHeight: 50,
})(KeyboardAvoidingView);

// Custom library component
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const KeyboardAwareGestureScrollView = listenToKeyboardEvents({
  enableOnAndroid: true,
  enableAutomaticScroll: true,
})(YourGestureHandlerScrollView);

import { Platform } from 'react-native';
import { listenToKeyboardEvents } from 'react-native-keyboard-aware-scroll-view';

const platformConfig = Platform.select({
  ios: {
    enableOnAndroid: false, // Not needed on iOS
    extraHeight: 75,
    keyboardOpeningTime: 250,
  },
  android: {
    enableOnAndroid: true,
    extraHeight: 100, // Android may need more height
    keyboardOpeningTime: 300,
  },
});

const PlatformKeyboardAwareScrollView = listenToKeyboardEvents(platformConfig)(ScrollView);