react-native-universal-keyboard-aware-scrollview 1.0.0

package/ios/reactnativeuniversalkeyboardawarescrollview.xcodeproj/xcshareddata/xcschemes/reactnativeuniversalkeyboardawarescrollview.xcscheme

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1130"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "reactnativeuniversalkeyboardawarescrollview.app"
+               BlueprintName = "reactnativeuniversalkeyboardawarescrollview"
+               ReferencedContainer = "container:reactnativeuniversalkeyboardawarescrollview.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "reactnativeuniversalkeyboardawarescrollviewTests.xctest"
+               BlueprintName = "reactnativeuniversalkeyboardawarescrollviewTests"
+               ReferencedContainer = "container:reactnativeuniversalkeyboardawarescrollview.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "reactnativeuniversalkeyboardawarescrollview.app"
+            BlueprintName = "reactnativeuniversalkeyboardawarescrollview"
+            ReferencedContainer = "container:reactnativeuniversalkeyboardawarescrollview.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "reactnativeuniversalkeyboardawarescrollview.app"
+            BlueprintName = "reactnativeuniversalkeyboardawarescrollview"
+            ReferencedContainer = "container:reactnativeuniversalkeyboardawarescrollview.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

package/ios/reactnativeuniversalkeyboardawarescrollview.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:reactnativeuniversalkeyboardawarescrollview.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "react-native-universal-keyboard-aware-scrollview",
+  "version": "1.0.0",
+  "description": "A universal keyboard-aware ScrollView for React Native that works correctly in normal screens, modals, and bottom sheets on both Android and iOS",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "android",
+    "ios",
+    "react-native.config.js",
+    "react-native-universal-keyboard-aware-scrollview.podspec",
+    "README.md"
+  ],
+  "scripts": {
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "keyboard",
+    "keyboard-aware",
+    "scrollview",
+    "modal",
+    "bottom-sheet",
+    "android",
+    "ios",
+    "expo",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AetherTechDev/react-native-universal-keyboard-aware-scrollview.git"
+  },
+  "author": "Vijay Kishan <vijay@aethertech.dev> (https://github.com/AetherTechDev)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/AetherTechDev/react-native-universal-keyboard-aware-scrollview/issues"
+  },
+  "homepage": "https://github.com/AetherTechDev/react-native-universal-keyboard-aware-scrollview#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": false
+    }
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

package/react-native-universal-keyboard-aware-scrollview.podspec

@@ -0,0 +1,32 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-universal-keyboard-aware-scrollview"
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.description  = <<-DESC
+                    A universal keyboard-aware ScrollView for React Native that works correctly 
+                    in normal screens, modals, and bottom sheets on both Android and iOS.
+                    Uses native keyboard listeners for reliable keyboard height detection.
+                   DESC
+  s.homepage     = package['homepage']
+  s.license      = package['license']
+  s.author       = package['author']
+  s.platforms    = { :ios => "12.0" }
+  s.source       = { :git => package['repository']['url'], :tag => "v#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  
+  # Use frameworks for Swift support
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_OPTIMIZATION_LEVEL' => '-Onone'
+  }
+
+  # React Native dependency
+  install_modules_dependencies(s) if defined?(install_modules_dependencies)
+  
+  s.dependency "React-Core"
+end

package/react-native.config.js

@@ -0,0 +1,18 @@
+/**
+ * React Native Config for native module linking
+ * This configuration enables automatic linking for React Native CLI projects
+ */
+module.exports = {
+    dependency: {
+        platforms: {
+            android: {
+                sourceDir: './android',
+                packageImportPath: 'import com.universalkeyboard.UniversalKeyboardPackage;',
+                packageInstance: 'new UniversalKeyboardPackage()',
+            },
+            ios: {
+                podspecPath: './react-native-universal-keyboard-aware-scrollview.podspec',
+            },
+        },
+    },
+};

package/src/NativeModule.ts

@@ -0,0 +1,61 @@
+import { NativeModules, NativeEventEmitter, Platform } from 'react-native';
+import type { UniversalKeyboardNativeModule, KeyboardEvent } from './types';
+
+const LINKING_ERROR =
+  `The package 'react-native-universal-keyboard-aware-scrollview' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go (use development build instead)\n';
+
+/**
+ * Native module instance
+ */
+const NativeModule: UniversalKeyboardNativeModule | undefined =
+  NativeModules.UniversalKeyboard;
+
+/**
+ * Proxy that throws a helpful error if the native module is not linked
+ */
+export const UniversalKeyboardModule: UniversalKeyboardNativeModule = NativeModule
+  ? NativeModule
+  : new Proxy({} as UniversalKeyboardNativeModule, {
+      get() {
+        throw new Error(LINKING_ERROR);
+      },
+    });
+
+/**
+ * Event emitter for keyboard events
+ */
+export const KeyboardEventEmitter = NativeModule
+  ? new NativeEventEmitter(NativeModule as any)
+  : null;
+
+/**
+ * Subscribe to keyboard events
+ * @param eventName - Name of the event to subscribe to
+ * @param callback - Callback function to execute when event fires
+ * @returns Cleanup function to unsubscribe
+ */
+export function subscribeToKeyboardEvent(
+  eventName: string,
+  callback: (event: KeyboardEvent) => void
+): () => void {
+  if (!KeyboardEventEmitter) {
+    console.warn(LINKING_ERROR);
+    return () => {};
+  }
+
+  const subscription = KeyboardEventEmitter.addListener(eventName, callback);
+
+  return () => {
+    subscription.remove();
+  };
+}
+
+/**
+ * Check if the native module is available
+ */
+export function isNativeModuleAvailable(): boolean {
+  return NativeModule != null;
+}

package/src/components/KeyboardAwareScrollView.tsx

@@ -0,0 +1,388 @@
+import React, {
+  useCallback,
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+  useState,
+  useEffect,
+} from 'react';
+import {
+  ScrollView,
+  ScrollViewProps,
+  View,
+  TextInput,
+  Platform,
+  Animated,
+  StyleSheet,
+  Dimensions,
+  findNodeHandle,
+  UIManager,
+  LayoutChangeEvent,
+} from 'react-native';
+import { useKeyboard } from '../hooks/useKeyboard';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+/**
+ * Props for KeyboardAwareScrollView
+ */
+export interface KeyboardAwareScrollViewProps extends ScrollViewProps {
+  /** Enable keyboard handling on Android (default: true) */
+  enableOnAndroid?: boolean;
+  /** Enable keyboard handling on iOS (default: true) */
+  enableOnIOS?: boolean;
+  /** Extra space to add above the keyboard (default: 20) */
+  extraScrollHeight?: number;
+  /** Extra space for focused element (default: 75) */
+  extraHeight?: number;
+  /** Whether to use animations (default: true) */
+  enableAnimation?: boolean;
+  /** Animation duration in ms (default: 250) */
+  animationDuration?: number;
+  /** Whether to auto-scroll when keyboard shows (default: true) */
+  enableAutoScrollToFocused?: boolean;
+  /** Whether to reset scroll position when keyboard hides (default: false) */
+  resetScrollToCoords?: { x: number; y: number } | null;
+  /** Whether to enable keyboard should persist taps (default: 'handled') */
+  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+  /** Callback when keyboard will show */
+  onKeyboardWillShow?: () => void;
+  /** Callback when keyboard will hide */
+  onKeyboardWillHide?: () => void;
+  /** Callback when keyboard did show */
+  onKeyboardDidShow?: () => void;
+  /** Callback when keyboard did hide */
+  onKeyboardDidHide?: () => void;
+  /** Whether to treat as being inside a modal (improves behavior in modals) */
+  insideModal?: boolean;
+  /** Content container style */
+  contentContainerStyle?: ScrollViewProps['contentContainerStyle'];
+  /** Inner container style (wraps content) */
+  innerContentContainerStyle?: ScrollViewProps['contentContainerStyle'];
+  /** Whether to show keyboard spacer view (alternative approach) */
+  enableKeyboardSpacer?: boolean;
+  /** Use content inset instead of padding (iOS only) */
+  useContentInset?: boolean;
+}
+
+/**
+ * Ref methods exposed by KeyboardAwareScrollView
+ */
+export interface KeyboardAwareScrollViewRef {
+  /** Scroll to a specific position */
+  scrollTo: (options: { x?: number; y?: number; animated?: boolean }) => void;
+  /** Scroll to end of content */
+  scrollToEnd: (options?: { animated?: boolean }) => void;
+  /** Scroll to make a specific input visible */
+  scrollToFocusedInput: (input: React.RefObject<TextInput>) => void;
+  /** Get the underlying ScrollView ref */
+  getScrollResponder: () => ScrollView | null;
+  /** Dismiss keyboard */
+  dismissKeyboard: () => Promise<void>;
+}
+
+/**
+ * KeyboardAwareScrollView - A ScrollView that automatically adjusts for the keyboard
+ *
+ * This component provides reliable keyboard avoidance that works in:
+ * - Normal React Native screens
+ * - React Native Modal components
+ * - BottomSheet components
+ * - Any overlay/presentation scenarios
+ *
+ * @example
+ * ```tsx
+ * <KeyboardAwareScrollView
+ *   extraScrollHeight={50}
+ *   enableOnAndroid={true}
+ * >
+ *   <TextInput placeholder="Name" />
+ *   <TextInput placeholder="Email" />
+ *   <TextInput placeholder="Message" multiline />
+ * </KeyboardAwareScrollView>
+ * ```
+ */
+export const KeyboardAwareScrollView = forwardRef<
+  KeyboardAwareScrollViewRef,
+  KeyboardAwareScrollViewProps
+>((props, ref) => {
+  const {
+    enableOnAndroid = true,
+    enableOnIOS = true,
+    extraScrollHeight = 20,
+    extraHeight = 75,
+    enableAnimation = true,
+    animationDuration = 250,
+    enableAutoScrollToFocused = true,
+    resetScrollToCoords = null,
+    keyboardShouldPersistTaps = 'handled',
+    onKeyboardWillShow,
+    onKeyboardWillHide,
+    onKeyboardDidShow,
+    onKeyboardDidHide,
+    insideModal = false,
+    contentContainerStyle,
+    innerContentContainerStyle,
+    enableKeyboardSpacer = true,
+    useContentInset = Platform.OS === 'ios',
+    children,
+    style,
+    ...scrollViewProps
+  } = props;
+
+  const scrollViewRef = useRef<ScrollView>(null);
+  const contentRef = useRef<View>(null);
+  const focusedInputRef = useRef<any>(null);
+  const scrollPositionRef = useRef({ x: 0, y: 0 });
+  const contentHeightRef = useRef(0);
+  const scrollViewHeightRef = useRef(0);
+
+  const [bottomPadding, setBottomPadding] = useState(0);
+  const animatedPadding = useRef(new Animated.Value(0)).current;
+
+  const {
+    keyboardHeight,
+    isKeyboardVisible,
+    dismissKeyboard,
+    safeAreaBottom,
+  } = useKeyboard({
+    enableOnAndroid,
+    enableOnIOS,
+    onKeyboardWillShow: () => {
+      onKeyboardWillShow?.();
+    },
+    onKeyboardWillHide: () => {
+      onKeyboardWillHide?.();
+    },
+    onKeyboardDidShow: () => {
+      onKeyboardDidShow?.();
+    },
+    onKeyboardDidHide: () => {
+      onKeyboardDidHide?.();
+      // Reset scroll position if specified
+      if (resetScrollToCoords) {
+        scrollViewRef.current?.scrollTo({
+          x: resetScrollToCoords.x,
+          y: resetScrollToCoords.y,
+          animated: enableAnimation,
+        });
+      }
+    },
+    onKeyboardHeightChange: (height) => {
+      handleKeyboardHeightChange(height);
+    },
+  });
+
+  // Handle keyboard height changes
+  const handleKeyboardHeightChange = useCallback(
+    (height: number) => {
+      const adjustedHeight = height > 0 ? height + extraScrollHeight : 0;
+
+      if (enableAnimation) {
+        Animated.timing(animatedPadding, {
+          toValue: adjustedHeight,
+          duration: animationDuration,
+          useNativeDriver: false,
+        }).start();
+      } else {
+        animatedPadding.setValue(adjustedHeight);
+      }
+
+      setBottomPadding(adjustedHeight);
+
+      // Auto-scroll to focused input
+      if (height > 0 && enableAutoScrollToFocused) {
+        setTimeout(() => {
+          scrollToFocusedInput();
+        }, 100);
+      }
+    },
+    [
+      extraScrollHeight,
+      enableAnimation,
+      animationDuration,
+      animatedPadding,
+      enableAutoScrollToFocused,
+    ]
+  );
+
+  // Find and scroll to currently focused input
+  const scrollToFocusedInput = useCallback(() => {
+    const currentlyFocused = TextInput.State.currentlyFocusedInput?.();
+
+    if (!currentlyFocused) return;
+
+    focusedInputRef.current = currentlyFocused;
+
+    // Measure focused input position
+    const scrollView = scrollViewRef.current;
+    if (!scrollView) return;
+
+    const scrollNode = findNodeHandle(scrollView);
+    const inputNode = findNodeHandle(currentlyFocused);
+
+    if (!scrollNode || !inputNode) return;
+
+    // Get positions relative to scroll view
+    UIManager.measureLayout(
+      inputNode,
+      scrollNode,
+      () => {
+        // Error callback - ignore
+      },
+      (x, y, width, height) => {
+        // Calculate scroll position
+        const inputBottom = y + height + extraHeight;
+        const visibleHeight =
+          scrollViewHeightRef.current - keyboardHeight - safeAreaBottom;
+
+        if (inputBottom > scrollPositionRef.current.y + visibleHeight) {
+          const newScrollY = inputBottom - visibleHeight;
+          scrollView.scrollTo({
+            x: 0,
+            y: Math.max(0, newScrollY),
+            animated: enableAnimation,
+          });
+        } else if (y < scrollPositionRef.current.y) {
+          scrollView.scrollTo({
+            x: 0,
+            y: Math.max(0, y - extraHeight),
+            animated: enableAnimation,
+          });
+        }
+      }
+    );
+  }, [keyboardHeight, extraHeight, safeAreaBottom, enableAnimation]);
+
+  // Track scroll position
+  const handleScroll = useCallback(
+    (event: any) => {
+      scrollPositionRef.current = event.nativeEvent.contentOffset;
+      props.onScroll?.(event);
+    },
+    [props.onScroll]
+  );
+
+  // Track content size
+  const handleContentSizeChange = useCallback(
+    (contentWidth: number, contentHeight: number) => {
+      contentHeightRef.current = contentHeight;
+      props.onContentSizeChange?.(contentWidth, contentHeight);
+    },
+    [props.onContentSizeChange]
+  );
+
+  // Track scroll view layout
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      scrollViewHeightRef.current = event.nativeEvent.layout.height;
+      props.onLayout?.(event);
+    },
+    [props.onLayout]
+  );
+
+  // Scroll to a specific input
+  const scrollToFocusedInputRef = useCallback(
+    (inputRef: React.RefObject<TextInput>) => {
+      if (!inputRef.current || !scrollViewRef.current) return;
+
+      const scrollNode = findNodeHandle(scrollViewRef.current);
+      const inputNode = findNodeHandle(inputRef.current);
+
+      if (!scrollNode || !inputNode) return;
+
+      UIManager.measureLayout(
+        inputNode,
+        scrollNode,
+        () => {},
+        (x, y, width, height) => {
+          scrollViewRef.current?.scrollTo({
+            x: 0,
+            y: Math.max(0, y - extraHeight),
+            animated: enableAnimation,
+          });
+        }
+      );
+    },
+    [extraHeight, enableAnimation]
+  );
+
+  // Expose ref methods
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollTo: (options) => {
+        scrollViewRef.current?.scrollTo(options);
+      },
+      scrollToEnd: (options) => {
+        scrollViewRef.current?.scrollToEnd(options);
+      },
+      scrollToFocusedInput: scrollToFocusedInputRef,
+      getScrollResponder: () => scrollViewRef.current,
+      dismissKeyboard,
+    }),
+    [scrollToFocusedInputRef, dismissKeyboard]
+  );
+
+  // Calculate content inset for iOS
+  const contentInset = useContentInset
+    ? { bottom: keyboardHeight > 0 ? keyboardHeight + extraScrollHeight : 0 }
+    : undefined;
+
+  const scrollIndicatorInsets = useContentInset
+    ? { bottom: keyboardHeight > 0 ? keyboardHeight + extraScrollHeight : 0 }
+    : undefined;
+
+  // Merge content container styles
+  const mergedContentContainerStyle = [
+    contentContainerStyle,
+    !useContentInset && enableKeyboardSpacer
+      ? { paddingBottom: bottomPadding }
+      : undefined,
+  ];
+
+  return (
+    <ScrollView
+      ref={scrollViewRef}
+      style={style}
+      contentContainerStyle={mergedContentContainerStyle}
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      keyboardDismissMode="interactive"
+      onScroll={handleScroll}
+      onContentSizeChange={handleContentSizeChange}
+      onLayout={handleLayout}
+      scrollEventThrottle={16}
+      contentInset={contentInset}
+      scrollIndicatorInsets={scrollIndicatorInsets}
+      automaticallyAdjustKeyboardInsets={false}
+      automaticallyAdjustContentInsets={false}
+      {...scrollViewProps}
+    >
+      <View ref={contentRef} style={innerContentContainerStyle}>
+        {children}
+      </View>
+
+      {/* Keyboard spacer - alternative approach for specific cases */}
+      {enableKeyboardSpacer && !useContentInset && (
+        <Animated.View
+          style={[
+            styles.keyboardSpacer,
+            {
+              height: animatedPadding,
+            },
+          ]}
+        />
+      )}
+    </ScrollView>
+  );
+});
+
+KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+
+const styles = StyleSheet.create({
+  keyboardSpacer: {
+    // Empty spacer view that expands when keyboard is shown
+  },
+});
+
+export default KeyboardAwareScrollView;

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { KeyboardAwareScrollView } from './KeyboardAwareScrollView';
+export type {
+  KeyboardAwareScrollViewProps,
+  KeyboardAwareScrollViewRef,
+} from './KeyboardAwareScrollView';

package/src/hooks/index.ts

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