react-native-universal-keyboard-aware-scrollview 1.0.2 → 1.0.3

package/src/hooks/index.ts

@@ -1,2 +1,6 @@
 export { useKeyboard } from './useKeyboard';
-export type { UseKeyboardOptions, UseKeyboardReturn } from './useKeyboard';
+export type {
+  UseKeyboardOptions,
+  UseKeyboardReturn,
+  KeyboardEventData,
+} from './useKeyboard';

package/src/hooks/useKeyboard.ts

@@ -1,365 +1,125 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
-import { Platform, Keyboard, LayoutAnimation, UIManager, Dimensions } from 'react-native';
-import {
-  UniversalKeyboardModule,
-  KeyboardEventEmitter,
-  isNativeModuleAvailable,
-} from '../NativeModule';
-import type { KeyboardEvent } from '../types';
+import { Platform, Keyboard, Dimensions, EmitterSubscription } from 'react-native';
 
-// Enable LayoutAnimation on Android
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
+/**
+ * Keyboard event data
+ */
+export interface KeyboardEventData {
+  height: number;
+  duration: number;
 }
 
 /**
  * Options for useKeyboard hook
  */
 export interface UseKeyboardOptions {
-  /** Enable keyboard handling on Android (default: true) */
+  /** Enable on Android (default: true) */
   enableOnAndroid?: boolean;
-  /** Enable keyboard handling on iOS (default: true) */
+  /** Enable on iOS (default: true) */
   enableOnIOS?: boolean;
-  /** Whether to use native module events (default: true on both platforms) */
-  useNativeEvents?: boolean;
-  /** Whether to animate height changes (default: true) */
-  animated?: boolean;
-  /** Callback when keyboard will show (iOS only) */
-  onKeyboardWillShow?: (event: KeyboardEvent) => void;
-  /** Callback when keyboard will hide (iOS only) */
-  onKeyboardWillHide?: (event: KeyboardEvent) => void;
-  /** Callback when keyboard did show */
-  onKeyboardDidShow?: (event: KeyboardEvent) => void;
-  /** Callback when keyboard did hide */
-  onKeyboardDidHide?: (event: KeyboardEvent) => void;
-  /** Callback when keyboard height changes */
-  onKeyboardHeightChange?: (height: number) => void;
-}
-
-interface KeyboardState {
-  keyboardHeight: number;
-  isKeyboardVisible: boolean;
-  isAnimating: boolean;
-  screenHeight: number;
-  animationDuration: number;
-  safeAreaBottom: number;
+  /** Callback when keyboard shows */
+  onKeyboardShow?: (data: KeyboardEventData) => void;
+  /** Callback when keyboard hides */
+  onKeyboardHide?: () => void;
 }
 
 /**
  * Return type for useKeyboard hook
  */
 export interface UseKeyboardReturn {
-  /** Current keyboard height in points/dp */
+  /** Current keyboard height */
   keyboardHeight: number;
-  /** Whether the keyboard is currently visible */
+  /** Is keyboard visible */
   isKeyboardVisible: boolean;
-  /** Whether the keyboard is currently animating */
-  isAnimating: boolean;
-  /** Dismiss the keyboard programmatically */
-  dismissKeyboard: () => Promise<void>;
-  /** Screen height in points/dp */
+  /** Screen height */
   screenHeight: number;
-  /** Animation duration in ms when keyboard shows/hides */
-  animationDuration: number;
-  /** Safe area bottom inset (iOS only) */
-  safeAreaBottom: number;
+  /** Dismiss keyboard */
+  dismissKeyboard: () => void;
 }
 
 /**
- * useKeyboard - A hook for tracking keyboard state and height
+ * useKeyboard - A simple hook to track keyboard state
  *
- * This hook provides reliable keyboard detection that works in:
- * - Normal React Native screens
- * - React Native Modal components
- * - BottomSheet components
- * - Any overlay/presentation scenarios
- * - Multiline TextInput (textarea) fields
+ * @example
+ * ```tsx
+ * const { keyboardHeight, isKeyboardVisible, dismissKeyboard } = useKeyboard();
+ * ```
  */
 export function useKeyboard(options: UseKeyboardOptions = {}): UseKeyboardReturn {
   const {
     enableOnAndroid = true,
     enableOnIOS = true,
-    useNativeEvents = true,
-    animated = true,
-    onKeyboardWillShow,
-    onKeyboardWillHide,
-    onKeyboardDidShow,
-    onKeyboardDidHide,
-    onKeyboardHeightChange,
+    onKeyboardShow,
+    onKeyboardHide,
   } = options;
 
-  const { height: initialScreenHeight } = Dimensions.get('window');
-
-  const [keyboardState, setKeyboardState] = useState<KeyboardState>({
-    keyboardHeight: 0,
-    isKeyboardVisible: false,
-    isAnimating: false,
-    screenHeight: initialScreenHeight,
-    animationDuration: 0,
-    safeAreaBottom: 0,
-  });
+  const screenHeight = Dimensions.get('window').height;
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+  const prevHeight = useRef(0);
 
   const isEnabled =
     (Platform.OS === 'android' && enableOnAndroid) ||
     (Platform.OS === 'ios' && enableOnIOS);
 
-  const nativeModuleActive = useRef(false);
-  const lastHeightRef = useRef(0);
-
-  // Handle keyboard height change with debounce to prevent flicker
-  const handleKeyboardHeightChange = useCallback(
-    (event: KeyboardEvent) => {
+  const handleShow = useCallback(
+    (event: any) => {
       if (!isEnabled) return;
 
-      const height = event.height ?? 0;
-      const duration = event.duration ?? 250;
-
-      // Prevent duplicate updates
-      if (height === lastHeightRef.current) return;
-      lastHeightRef.current = height;
+      const height = event.endCoordinates?.height || 0;
+      const duration = (event.duration || 0.25) * 1000;
 
-      if (animated && duration > 0 && Platform.OS === 'ios') {
-        LayoutAnimation.configureNext({
-          duration: duration,
-          update: {
-            type: LayoutAnimation.Types.keyboard,
-            property: LayoutAnimation.Properties.opacity,
-          },
-        });
+      if (height !== prevHeight.current) {
+        prevHeight.current = height;
+        setKeyboardHeight(height);
+        setIsKeyboardVisible(true);
+        onKeyboardShow?.({ height, duration });
       }
-
-      setKeyboardState((prev: KeyboardState) => ({
-        ...prev,
-        keyboardHeight: height,
-        isKeyboardVisible: height > 0,
-        screenHeight: event.screenHeight ?? prev.screenHeight,
-        animationDuration: duration,
-        safeAreaBottom: event.safeAreaBottom ?? prev.safeAreaBottom,
-        isAnimating: false,
-      }));
-
-      onKeyboardHeightChange?.(height);
-    },
-    [isEnabled, animated, onKeyboardHeightChange]
-  );
-
-  // Handle keyboard will show
-  const handleKeyboardWillShow = useCallback(
-    (event: KeyboardEvent) => {
-      if (!isEnabled) return;
-
-      setKeyboardState((prev: KeyboardState) => ({
-        ...prev,
-        isAnimating: true,
-      }));
-
-      onKeyboardWillShow?.(event);
     },
-    [isEnabled, onKeyboardWillShow]
+    [isEnabled, onKeyboardShow]
   );
 
-  // Handle keyboard will hide
-  const handleKeyboardWillHide = useCallback(
-    (event: KeyboardEvent) => {
-      if (!isEnabled) return;
-
-      setKeyboardState((prev: KeyboardState) => ({
-        ...prev,
-        isAnimating: true,
-      }));
-
-      onKeyboardWillHide?.(event);
-    },
-    [isEnabled, onKeyboardWillHide]
-  );
-
-  // Handle keyboard did show
-  const handleKeyboardDidShow = useCallback(
-    (event: KeyboardEvent) => {
-      if (!isEnabled) return;
-
-      const height = event.height ?? 0;
-      lastHeightRef.current = height;
-
-      setKeyboardState((prev: KeyboardState) => ({
-        ...prev,
-        keyboardHeight: height,
-        isKeyboardVisible: true,
-        isAnimating: false,
-        screenHeight: event.screenHeight ?? prev.screenHeight,
-        safeAreaBottom: event.safeAreaBottom ?? prev.safeAreaBottom,
-      }));
-
-      onKeyboardDidShow?.(event);
-    },
-    [isEnabled, onKeyboardDidShow]
-  );
-
-  // Handle keyboard did hide
-  const handleKeyboardDidHide = useCallback(
-    (event: KeyboardEvent) => {
-      if (!isEnabled) return;
-
-      lastHeightRef.current = 0;
-
-      setKeyboardState((prev: KeyboardState) => ({
-        ...prev,
-        keyboardHeight: 0,
-        isKeyboardVisible: false,
-        isAnimating: false,
-      }));
-
-      onKeyboardDidHide?.(event);
-    },
-    [isEnabled, onKeyboardDidHide]
-  );
+  const handleHide = useCallback(() => {
+    if (!isEnabled) return;
 
-  // Dismiss keyboard
-  const dismissKeyboard = useCallback(async () => {
-    if (isNativeModuleAvailable()) {
-      try {
-        await UniversalKeyboardModule.dismissKeyboard();
-      } catch {
-        // Fall back to RN Keyboard API
-        Keyboard.dismiss();
-      }
-    } else {
-      Keyboard.dismiss();
+    if (prevHeight.current !== 0) {
+      prevHeight.current = 0;
+      setKeyboardHeight(0);
+      setIsKeyboardVisible(false);
+      onKeyboardHide?.();
     }
+  }, [isEnabled, onKeyboardHide]);
+
+  const dismissKeyboard = useCallback(() => {
+    Keyboard.dismiss();
   }, []);
 
-  // Set up event listeners
   useEffect(() => {
     if (!isEnabled) return;
 
-    const subscriptions: (() => void)[] = [];
-
-    // Use native module events if available and enabled
-    if (useNativeEvents && isNativeModuleAvailable() && KeyboardEventEmitter) {
-      // Start listening on native side
-      UniversalKeyboardModule.startListening()
-        .then(() => {
-          nativeModuleActive.current = true;
-        })
-        .catch((error: Error) => {
-          console.warn('[useKeyboard] Failed to start native listener:', error);
-        });
-
-      // Subscribe to native events
-      const heightSub = KeyboardEventEmitter.addListener(
-        'keyboardHeightChanged',
-        handleKeyboardHeightChange
-      );
-      subscriptions.push(() => heightSub.remove());
-
-      const didShowSub = KeyboardEventEmitter.addListener(
-        'keyboardDidShow',
-        handleKeyboardDidShow
-      );
-      subscriptions.push(() => didShowSub.remove());
-
-      const didHideSub = KeyboardEventEmitter.addListener(
-        'keyboardDidHide',
-        handleKeyboardDidHide
-      );
-      subscriptions.push(() => didHideSub.remove());
+    const subs: EmitterSubscription[] = [];
 
-      // iOS only events
-      if (Platform.OS === 'ios') {
-        const willShowSub = KeyboardEventEmitter.addListener(
-          'keyboardWillShow',
-          handleKeyboardWillShow
-        );
-        subscriptions.push(() => willShowSub.remove());
-
-        const willHideSub = KeyboardEventEmitter.addListener(
-          'keyboardWillHide',
-          handleKeyboardWillHide
-        );
-        subscriptions.push(() => willHideSub.remove());
-      }
+    if (Platform.OS === 'ios') {
+      subs.push(Keyboard.addListener('keyboardWillShow', handleShow));
+      subs.push(Keyboard.addListener('keyboardWillHide', handleHide));
+      subs.push(Keyboard.addListener('keyboardDidShow', handleShow));
+      subs.push(Keyboard.addListener('keyboardDidHide', handleHide));
     } else {
-      // Fall back to React Native Keyboard API
-      const mapRNKeyboardEvent = (e: any): KeyboardEvent => ({
-        height: e.endCoordinates?.height ?? 0,
-        isVisible: true,
-        duration: e.duration ? e.duration * 1000 : 250,
-        screenHeight: e.endCoordinates?.screenY ?? initialScreenHeight,
-        timestamp: Date.now(),
-        endCoordinates: e.endCoordinates,
-        startCoordinates: e.startCoordinates,
-      });
-
-      const showSub = Keyboard.addListener('keyboardDidShow', (e: any) =>
-        handleKeyboardDidShow(mapRNKeyboardEvent(e))
-      );
-      subscriptions.push(() => showSub.remove());
-      
-      const hideSub = Keyboard.addListener('keyboardDidHide', () =>
-        handleKeyboardDidHide({
-          height: 0,
-          isVisible: false,
-          timestamp: Date.now(),
-        })
-      );
-      subscriptions.push(() => hideSub.remove());
-
-      if (Platform.OS === 'ios') {
-        const willShowSub = Keyboard.addListener('keyboardWillShow', (e: any) =>
-          handleKeyboardWillShow(mapRNKeyboardEvent(e))
-        );
-        subscriptions.push(() => willShowSub.remove());
-        
-        const willHideSub = Keyboard.addListener('keyboardWillHide', () =>
-          handleKeyboardWillHide({
-            height: 0,
-            isVisible: false,
-            timestamp: Date.now(),
-          })
-        );
-        subscriptions.push(() => willHideSub.remove());
-      }
+      subs.push(Keyboard.addListener('keyboardDidShow', handleShow));
+      subs.push(Keyboard.addListener('keyboardDidHide', handleHide));
     }
 
-    // Cleanup
-    return () => {
-      subscriptions.forEach((unsub) => unsub());
-
-      if (nativeModuleActive.current) {
-        UniversalKeyboardModule.stopListening().catch(() => {});
-        nativeModuleActive.current = false;
-      }
-    };
-  }, [
-    isEnabled,
-    useNativeEvents,
-    initialScreenHeight,
-    handleKeyboardHeightChange,
-    handleKeyboardWillShow,
-    handleKeyboardWillHide,
-    handleKeyboardDidShow,
-    handleKeyboardDidHide,
-  ]);
-
-  // Update screen height on dimension change
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', ({ window }) => {
-      setKeyboardState((prev: KeyboardState) => ({
-        ...prev,
-        screenHeight: window.height,
-      }));
-    });
-
     return () => {
-      subscription?.remove();
+      subs.forEach((s) => s.remove());
     };
-  }, []);
+  }, [isEnabled, handleShow, handleHide]);
 
   return {
-    ...keyboardState,
+    keyboardHeight,
+    isKeyboardVisible,
+    screenHeight,
     dismissKeyboard,
   };
 }
+
+export default useKeyboard;

package/src/index.ts

@@ -1,27 +1,24 @@
 /**
  * react-native-universal-keyboard-aware-scrollview
  *
- * A universal keyboard-aware ScrollView for React Native that works correctly
- * in normal screens, modals, and bottom sheets on both Android and iOS.
- *
- * @packageDocumentation
+ * A universal keyboard-aware ScrollView that works in normal screens,
+ * modals, and with multiline TextInputs.
  */
 
-// Native module and event types
-export { UniversalKeyboardModule } from './NativeModule';
+// Main component
+export { KeyboardAwareScrollView } from './components/KeyboardAwareScrollView';
 export type {
-  KeyboardEvent,
-  KeyboardEventName,
-  KeyboardCoordinates,
-} from './types';
+  KeyboardAwareScrollViewProps,
+  KeyboardAwareScrollViewRef,
+} from './components/KeyboardAwareScrollView';
 
 // Hook
 export { useKeyboard } from './hooks/useKeyboard';
-export type { UseKeyboardOptions, UseKeyboardReturn } from './hooks/useKeyboard';
-
-// Components
-export { KeyboardAwareScrollView } from './components/KeyboardAwareScrollView';
-export type { KeyboardAwareScrollViewProps } from './components/KeyboardAwareScrollView';
+export type {
+  UseKeyboardOptions,
+  UseKeyboardReturn,
+  KeyboardEventData,
+} from './hooks/useKeyboard';
 
-// Utilities
+// Utility
 export { KeyboardController } from './utils/KeyboardController';

package/src/types.ts

@@ -1,87 +1,50 @@
 /**
- * Type definitions for the Universal Keyboard module
+ * Type definitions for keyboard events
  */
 
-/**
- * Coordinates describing the keyboard frame
- */
-export interface KeyboardCoordinates {
-  /** X position of the keyboard on screen */
-  screenX: number;
-  /** Y position of the keyboard on screen */
-  screenY: number;
-  /** Width of the keyboard */
-  width: number;
-  /** Height of the keyboard */
-  height: number;
-}
-
-/**
- * Event data emitted for keyboard state changes
- */
 export interface KeyboardEvent {
-  /** Current keyboard height in points/dp */
+  /** Keyboard height in points/dp */
   height: number;
-  /** Whether the keyboard is currently visible */
+  /** Whether keyboard is visible */
   isVisible: boolean;
-  /** Animation duration in milliseconds (iOS only) */
+  /** Animation duration in milliseconds */
   duration?: number;
-  /** Animation easing curve (iOS only) */
+  /** Animation easing */
   easing?: string;
-  /** Screen height in points/dp */
+  /** Screen height */
   screenHeight?: number;
-  /** Screen width in points/dp (iOS only) */
+  /** Screen width */
   screenWidth?: number;
-  /** Safe area bottom inset (iOS only, for notch devices) */
+  /** Safe area bottom inset */
   safeAreaBottom?: number;
-  /** End coordinates of the keyboard frame (iOS only) */
-  endCoordinates?: KeyboardCoordinates;
-  /** Start coordinates of the keyboard frame (iOS only) */
-  startCoordinates?: KeyboardCoordinates;
-  /** Timestamp of the event */
+  /** End coordinates of keyboard */
+  endCoordinates?: {
+    screenX: number;
+    screenY: number;
+    width: number;
+    height: number;
+  };
+  /** Start coordinates of keyboard */
+  startCoordinates?: {
+    screenX: number;
+    screenY: number;
+    width: number;
+    height: number;
+  };
+  /** Event timestamp */
   timestamp: number;
 }
 
-/**
- * Names of keyboard events emitted by the native module
- */
 export type KeyboardEventName =
   | 'keyboardDidShow'
   | 'keyboardDidHide'
-  | 'keyboardHeightChanged'
   | 'keyboardWillShow'
-  | 'keyboardWillHide';
-
-/**
- * Native module interface
- */
-export interface UniversalKeyboardNativeModule {
-  /** Start listening for keyboard events */
-  startListening(): Promise<boolean>;
-  /** Stop listening for keyboard events */
-  stopListening(): Promise<boolean>;
-  /** Get the current keyboard height */
-  getKeyboardHeight(): Promise<number>;
-  /** Check if the keyboard is currently visible */
-  isKeyboardVisible(): Promise<boolean>;
-  /** Dismiss the keyboard */
-  dismissKeyboard(): Promise<boolean>;
-  /** Add listener (required by RN EventEmitter) */
-  addListener(eventName: string): void;
-  /** Remove listeners (required by RN EventEmitter) */
-  removeListeners(count: number): void;
-}
+  | 'keyboardWillHide'
+  | 'keyboardHeightChanged';
 
-/**
- * Options for keyboard behavior
- */
-export interface KeyboardOptions {
-  /** Enable keyboard handling on Android */
-  enableOnAndroid?: boolean;
-  /** Enable keyboard handling on iOS */
-  enableOnIOS?: boolean;
-  /** Extra space to add above the keyboard */
-  extraOffset?: number;
-  /** Behavior when keyboard appears: 'padding', 'position', or 'height' */
-  behavior?: 'padding' | 'position' | 'height';
+export interface KeyboardCoordinates {
+  screenX: number;
+  screenY: number;
+  width: number;
+  height: number;
 }