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

package/README.md

@@ -2,57 +2,43 @@
 
 [![npm version](https://img.shields.io/npm/v/react-native-universal-keyboard-aware-scrollview.svg)](https://www.npmjs.com/package/react-native-universal-keyboard-aware-scrollview)
 [![license](https://img.shields.io/npm/l/react-native-universal-keyboard-aware-scrollview.svg)](https://github.com/AetherTechDev/react-native-universal-keyboard-aware-scrollview/blob/main/LICENSE)
-[![platform](https://img.shields.io/badge/platform-iOS%20%7C%20Android-lightgrey.svg)](https://reactnative.dev/)
 
 A **universal keyboard-aware ScrollView** for React Native that **works correctly** in:
 - ✅ Normal screens
 - ✅ React Native Modal
-- ✅ BottomSheet components
+- ✅ BottomSheet components  
+- ✅ Multiline TextInput (textarea)
 - ✅ Any overlay or dialog scenario
 
-This package uses **native keyboard listeners** on both Android and iOS for reliable keyboard detection, solving the common issues that plague other keyboard-aware libraries.
+## 🔥 Platform Support
 
-## 🎯 Why This Package?
-
-Existing keyboard-aware solutions often fail in these scenarios:
-
-| Issue | Other Libraries | This Package |
-|-------|----------------|--------------|
-| Keyboard overlaps input in Modal | ❌ | ✅ |
-| Glitchy animations on Android | ❌ | ✅ |
-| Incorrect height inside BottomSheet | ❌ | ✅ |
-| Race conditions with keyboard events | ❌ | ✅ |
-| Inconsistent behavior iOS vs Android | ❌ | ✅ |
-
-### How We Solve These Issues
-
-1. **Native Keyboard Detection**: Instead of relying solely on React Native's JavaScript keyboard events, we use platform-native APIs:
-   - **iOS**: `UIKeyboardWillChangeFrameNotification` for accurate keyboard frame tracking
-   - **Android**: `ViewTreeObserver.OnGlobalLayoutListener` with visible window frame measurement
-
-2. **Modal-Aware Architecture**: Our native implementations measure keyboard height relative to the actual visible window, not the root activity/view controller. This means keyboard detection works correctly even when views are presented modally.
-
-3. **Unified Event System**: Events are emitted from native → JavaScript through a consistent interface, eliminating timing issues and race conditions.
+| Platform | Supported |
+|----------|-----------|
+| React Native CLI | ✅ |
+| Expo (Development Build) | ✅ |
+| Expo Go | ❌ (requires native code) |
 
 ## 📦 Installation
 
 ```bash
-# Using npm
 npm install react-native-universal-keyboard-aware-scrollview
-
-# Using yarn
-yarn add react-native-universal-keyboard-aware-scrollview
 ```
 
 ### iOS Setup
-
 ```bash
 cd ios && pod install
 ```
 
 ### Android Setup
+No additional setup required - auto-linking handles everything.
 
-No additional setup required. The native module is automatically linked.
+### Expo (Development Build)
+```bash
+npx expo prebuild
+npx expo run:ios  # or run:android
+```
+
+> **Note:** This package uses native modules, so it won't work in Expo Go. Use a development build instead.
 
 ## 🚀 Quick Start
 
@@ -60,59 +46,57 @@ No additional setup required. The native module is automatically linked.
 
 ```tsx
 import React from 'react';
-import { TextInput, View, StyleSheet } from 'react-native';
+import { TextInput, StyleSheet, SafeAreaView } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-universal-keyboard-aware-scrollview';
 
-function MyForm() {
+export default function App() {
   return (
-    <KeyboardAwareScrollView style={styles.container}>
-      <TextInput placeholder="Name" style={styles.input} />
-      <TextInput placeholder="Email" style={styles.input} />
-      <TextInput placeholder="Phone" style={styles.input} />
-      <TextInput 
-        placeholder="Message" 
-        style={[styles.input, styles.multiline]} 
-        multiline 
-      />
-    </KeyboardAwareScrollView>
+    <SafeAreaView style={styles.container}>
+      <KeyboardAwareScrollView style={styles.scroll}>
+        <TextInput placeholder="Name" style={styles.input} />
+        <TextInput placeholder="Email" style={styles.input} />
+        <TextInput placeholder="Phone" style={styles.input} />
+        <TextInput 
+          placeholder="Message" 
+          style={[styles.input, styles.multiline]} 
+          multiline 
+          numberOfLines={5}
+        />
+      </KeyboardAwareScrollView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+  container: { flex: 1 },
+  scroll: { flex: 1, padding: 16 },
   input: {
     borderWidth: 1,
     borderColor: '#ccc',
     borderRadius: 8,
     padding: 12,
     marginBottom: 16,
-    marginHorizontal: 16,
-  },
-  multiline: {
-    height: 100,
-    textAlignVertical: 'top',
   },
+  multiline: { height: 120, textAlignVertical: 'top' },
 });
 ```
 
-### Usage Inside Modal
+### Usage Inside Modal (The Key Feature!)
 
 ```tsx
 import React, { useState } from 'react';
-import { Modal, TextInput, View, Button, StyleSheet } from 'react-native';
+import { Modal, TextInput, View, Button, StyleSheet, SafeAreaView } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-universal-keyboard-aware-scrollview';
 
-function ModalForm() {
+export default function ModalExample() {
   const [visible, setVisible] = useState(false);
 
   return (
     <>
-      <Button title="Open Form" onPress={() => setVisible(true)} />
+      <Button title="Open Modal" onPress={() => setVisible(true)} />
       
       <Modal visible={visible} animationType="slide">
-        <View style={styles.modalContainer}>
+        <SafeAreaView style={styles.container}>
           <KeyboardAwareScrollView 
             insideModal={true}
             extraScrollHeight={20}
@@ -122,123 +106,111 @@ function ModalForm() {
             <TextInput 
               placeholder="Message" 
               style={[styles.input, styles.multiline]} 
-              multiline 
+              multiline
+              numberOfLines={4}
             />
           </KeyboardAwareScrollView>
-          
           <Button title="Close" onPress={() => setVisible(false)} />
-        </View>
+        </SafeAreaView>
       </Modal>
     </>
   );
 }
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    padding: 12,
+    margin: 16,
+  },
+  multiline: { height: 100, textAlignVertical: 'top' },
+});
 ```
 
-### Using the Hook Directly
+### Multiline TextInput (Textarea) Support
+
+The component automatically detects multiline TextInputs and provides extra scroll space:
+
+```tsx
+<KeyboardAwareScrollView
+  extraHeightForMultiline={100}  // Extra space for multiline inputs
+>
+  <TextInput 
+    placeholder="Write your message..." 
+    multiline
+    numberOfLines={6}
+    style={{ height: 150, textAlignVertical: 'top' }}
+  />
+</KeyboardAwareScrollView>
+```
+
+### Using the Hook
 
 ```tsx
-import React from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
 import { useKeyboard } from 'react-native-universal-keyboard-aware-scrollview';
 
-function CustomKeyboardHandling() {
+function MyComponent() {
   const { 
     keyboardHeight, 
     isKeyboardVisible, 
     dismissKeyboard 
-  } = useKeyboard({
-    onKeyboardDidShow: (event) => {
-      console.log('Keyboard shown with height:', event.height);
-    },
-    onKeyboardDidHide: () => {
-      console.log('Keyboard hidden');
-    },
-  });
+  } = useKeyboard();
 
   return (
-    <View style={[styles.container, { paddingBottom: keyboardHeight }]}>
-      <TextInput placeholder="Type here..." style={styles.input} />
+    <View style={{ paddingBottom: keyboardHeight }}>
+      <TextInput placeholder="Type here..." />
       {isKeyboardVisible && (
-        <Button title="Dismiss Keyboard" onPress={dismissKeyboard} />
+        <Button title="Dismiss" onPress={dismissKeyboard} />
       )}
     </View>
   );
 }
 ```
 
-## 📖 API Reference
-
-### `KeyboardAwareScrollView`
-
-A ScrollView that automatically adjusts for the keyboard.
+## 📖 API
 
-#### Props
+### `KeyboardAwareScrollView` Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `enableOnAndroid` | `boolean` | `true` | Enable keyboard handling on Android |
-| `enableOnIOS` | `boolean` | `true` | Enable keyboard handling on iOS |
-| `extraScrollHeight` | `number` | `20` | Extra scroll space above keyboard |
-| `extraHeight` | `number` | `75` | Extra space for focused element |
+| `enableOnAndroid` | `boolean` | `true` | Enable on Android |
+| `enableOnIOS` | `boolean` | `true` | Enable on iOS |
+| `extraScrollHeight` | `number` | `20` | Extra scroll above keyboard |
+| `extraHeight` | `number` | `75` | Extra space for focused input |
+| `extraHeightForMultiline` | `number` | `100` | Extra space for multiline inputs |
+| `insideModal` | `boolean` | `false` | **Set to true when inside a Modal** |
 | `enableAnimation` | `boolean` | `true` | Animate height changes |
-| `animationDuration` | `number` | `250` | Animation duration in ms |
-| `enableAutoScrollToFocused` | `boolean` | `true` | Auto-scroll when keyboard shows |
-| `resetScrollToCoords` | `{x, y} \| null` | `null` | Reset scroll position on keyboard hide |
-| `keyboardShouldPersistTaps` | `string` | `'handled'` | Keyboard dismiss behavior |
-| `insideModal` | `boolean` | `false` | Optimize for modal usage |
-| `enableKeyboardSpacer` | `boolean` | `true` | Use spacer view approach |
-| `useContentInset` | `boolean` | `true` (iOS) | Use content inset vs padding |
+| `keyboardShouldPersistTaps` | `string` | `'handled'` | Tap behavior |
+| `enableAutoScrollToFocused` | `boolean` | `true` | Auto-scroll to focused input |
 
-#### Ref Methods
+### `useKeyboard` Hook
 
 ```tsx
-const scrollViewRef = useRef<KeyboardAwareScrollViewRef>(null);
-
-// Available methods:
-scrollViewRef.current?.scrollTo({ x: 0, y: 100, animated: true });
-scrollViewRef.current?.scrollToEnd({ animated: true });
-scrollViewRef.current?.scrollToFocusedInput(inputRef);
-scrollViewRef.current?.getScrollResponder();
-scrollViewRef.current?.dismissKeyboard();
+const {
+  keyboardHeight,      // Current keyboard height (number)
+  isKeyboardVisible,   // Is keyboard showing (boolean)
+  dismissKeyboard,     // Function to dismiss keyboard
+  screenHeight,        // Screen height
+  safeAreaBottom,      // Safe area inset (iOS)
+} = useKeyboard(options);
 ```
 
-### `useKeyboard` Hook
-
-A hook for tracking keyboard state.
-
 #### Options
 
 ```tsx
-const keyboard = useKeyboard({
-  enableOnAndroid: true,       // Enable on Android
-  enableOnIOS: true,           // Enable on iOS
-  useNativeEvents: true,       // Use native module events
-  animated: true,              // Animate height changes
-  onKeyboardWillShow: (e) => {},  // iOS only
-  onKeyboardWillHide: (e) => {},  // iOS only
-  onKeyboardDidShow: (e) => {},
-  onKeyboardDidHide: (e) => {},
-  onKeyboardHeightChange: (h) => {},
+useKeyboard({
+  enableOnAndroid: true,
+  enableOnIOS: true,
+  onKeyboardDidShow: (event) => {},
+  onKeyboardDidHide: (event) => {},
+  onKeyboardHeightChange: (height) => {},
 });
 ```
 
-#### Return Value
-
-```tsx
-interface UseKeyboardReturn {
-  keyboardHeight: number;     // Current keyboard height
-  isKeyboardVisible: boolean; // Is keyboard visible
-  isAnimating: boolean;       // Is keyboard animating
-  dismissKeyboard: () => Promise<void>;
-  screenHeight: number;       // Screen height
-  animationDuration: number;  // Animation duration
-  safeAreaBottom: number;     // Safe area inset (iOS)
-}
-```
-
-### `KeyboardController`
-
-Static utility class for keyboard control.
+### `KeyboardController` Utility
 
 ```tsx
 import { KeyboardController } from 'react-native-universal-keyboard-aware-scrollview';
@@ -246,142 +218,62 @@ import { KeyboardController } from 'react-native-universal-keyboard-aware-scroll
 // Dismiss keyboard
 await KeyboardController.dismiss();
 
-// Get keyboard height
+// Get current height
 const height = await KeyboardController.getHeight();
 
-// Check visibility
-const isVisible = await KeyboardController.isVisible();
-
-// Check if native module is available
-const hasNative = KeyboardController.isNativeModuleAvailable();
+// Check if visible
+const visible = await KeyboardController.isVisible();
 ```
 
-## 🔧 Expo Support
-
-This package works with Expo, but **requires a development build** (not Expo Go).
-
-### Expo Bare Workflow
-
-Works out of the box. Install and use normally.
-
-### Expo Managed Workflow
-
-1. Install the package:
-   ```bash
-   npx expo install react-native-universal-keyboard-aware-scrollview
-   ```
-
-2. Create a development build:
-   ```bash
-   npx expo prebuild
-   npx expo run:ios  # or run:android
-   ```
-
-3. Use in your app as normal.
-
-> **Note**: This package contains native code, so it cannot run in Expo Go. You must use a development build or EAS Build.
-
-## 🏗 Architecture
-
-### Native Implementation Details
-
-#### Android (Kotlin)
+## 🎯 Why This Package?
 
-```
-┌─────────────────────────────────────┐
-│          UniversalKeyboardModule     │
-├─────────────────────────────────────┤
-│  ViewTreeObserver                    │
-│  OnGlobalLayoutListener              │
-│  ↓                                   │
-│  getWindowVisibleDisplayFrame()      │
-│  ↓                                   │
-│  Calculate keyboard height           │
-│  ↓                                   │
-│  Emit via DeviceEventEmitter         │
-└─────────────────────────────────────┘
-```
+| Problem | Other Libraries | This Package |
+|---------|----------------|--------------|
+| Keyboard overlaps input in Modal | ❌ | ✅ |
+| Multiline TextInput not working | ❌ | ✅ |
+| Android resize glitches | ❌ | ✅ |
+| Inconsistent heights | ❌ | ✅ |
+| Race conditions | ❌ | ✅ |
 
-The Android implementation uses `ViewTreeObserver.OnGlobalLayoutListener` to detect layout changes. When the keyboard appears, the visible display frame shrinks. We calculate the keyboard height by comparing the visible frame with the full screen height.
+### Technical Implementation
 
-This approach works in modals because we attach the listener to the content view, which is always affected by keyboard appearance regardless of the view hierarchy.
+**iOS:** Uses `UIKeyboardWillChangeFrameNotification` for accurate keyboard frame detection.
 
-#### iOS (Objective-C)
+**Android:** Uses `ViewTreeObserver.OnGlobalLayoutListener` to measure visible window frame.
 
-```
-┌─────────────────────────────────────┐
-│          UniversalKeyboard           │
-├─────────────────────────────────────┤
-│  NSNotificationCenter                │
-│  UIKeyboardWillChangeFrameNotification│
-│  ↓                                   │
-│  Extract keyboard frame from userInfo│
-│  ↓                                   │
-│  Calculate height from screen bottom │
-│  ↓                                   │
-│  Emit via RCTEventEmitter            │
-└─────────────────────────────────────┘
-```
-
-The iOS implementation uses `UIKeyboardWillChangeFrameNotification`, which provides the most accurate keyboard frame information. This notification fires for all keyboard changes including interactive dismiss gestures.
-
-We calculate keyboard height as `screenHeight - keyboardFrame.origin.y`, which works correctly in all presentation contexts including modals.
+Both approaches work correctly inside modals because they measure the actual visible area, not the root view.
 
 ## 🐛 Troubleshooting
 
-### "Native module not found" Error
-
-This usually means the native module isn't linked:
-
-**iOS:**
-```bash
-cd ios && pod install --repo-update
-```
+### "Native module not found"
 
-**Android:**
-Clean and rebuild:
 ```bash
-cd android && ./gradlew clean
-cd .. && npx react-native run-android
-```
-
-### Keyboard still overlaps in Modal
+# iOS
+cd ios && pod install --repo-update && cd ..
 
-Make sure you set `insideModal={true}`:
-
-```tsx
-<KeyboardAwareScrollView insideModal={true}>
-  {/* content */}
-</KeyboardAwareScrollView>
+# Android - clean build
+cd android && ./gradlew clean && cd ..
 ```
 
-### Animation is jumpy on Android
-
-Try adjusting the animation settings:
+### Expo Go not working
 
-```tsx
-<KeyboardAwareScrollView
-  enableAnimation={true}
-  animationDuration={300}
->
+This package requires native code. Use:
+```bash
+npx expo prebuild
+npx expo run:ios  # or npx expo run:android
 ```
 
-Or disable animation entirely:
+### Multiline TextInput not scrolling properly
 
+Make sure you're using the `multiline` prop:
 ```tsx
-<KeyboardAwareScrollView enableAnimation={false}>
+<TextInput 
+  multiline  // Required!
+  numberOfLines={4}
+  style={{ height: 100 }}
+/>
 ```
 
 ## 📄 License
 
 MIT © [Vijay Kishan](https://github.com/AetherTechDev)
-
-## 🤝 Contributing
-
-Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) first.
-
-## 📞 Support
-
-- 🐛 [Report bugs](https://github.com/AetherTechDev/react-native-universal-keyboard-aware-scrollview/issues)
-- 💡 [Request features](https://github.com/AetherTechDev/react-native-universal-keyboard-aware-scrollview/issues)
-- 📧 Email: vijay@aethertech.dev

package/android/build.gradle

@@ -14,10 +14,6 @@ buildscript {
     }
 }
 
-def isNewArchitectureEnabled() {
-    return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
-}
-
 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
 
@@ -32,14 +28,6 @@ android {
     defaultConfig {
         minSdkVersion safeExtGet('minSdkVersion', 21)
         targetSdkVersion safeExtGet('targetSdkVersion', 34)
-        versionCode 1
-        versionName "1.0"
-        
-        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
-    }
-    
-    buildFeatures {
-        buildConfig true
     }
     
     buildTypes {
@@ -63,11 +51,7 @@ android {
     
     sourceSets {
         main {
-            if (isNewArchitectureEnabled()) {
-                java.srcDirs += ['src/newarch/java']
-            } else {
-                java.srcDirs += ['src/oldarch/java']
-            }
+            java.srcDirs = ['src/main/java']
         }
     }
 }
@@ -85,5 +69,6 @@ repositories {
 
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib:${safeExtGet('kotlinVersion', '1.9.10')}"
+    //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-android:+"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-universal-keyboard-aware-scrollview",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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",
@@ -8,15 +8,17 @@
   "source": "src/index.ts",
   "files": [
     "src",
-    "android",
-    "ios",
+    "android/build.gradle",
+    "android/src",
+    "ios/UniversalKeyboard.h",
+    "ios/UniversalKeyboard.m",
     "react-native.config.js",
     "react-native-universal-keyboard-aware-scrollview.podspec",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
-    "typescript": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\""
+    "typescript": "tsc --noEmit"
   },
   "keywords": [
     "react-native",
@@ -47,14 +49,6 @@
     "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

@@ -13,20 +13,11 @@ Pod::Spec.new do |s|
                    DESC
   s.homepage     = package['homepage']
   s.license      = package['license']
-  s.author       = package['author']
+  s.author       = { "Vijay Kishan" => "vijay@aethertech.dev" }
   s.platforms    = { :ios => "12.0" }
-  s.source       = { :git => package['repository']['url'], :tag => "v#{s.version}" }
+  s.source       = { :git => "https://github.com/AetherTechDev/react-native-universal-keyboard-aware-scrollview.git", :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.source_files = "ios/*.{h,m}"
   
   s.dependency "React-Core"
 end