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

package/README.md

@@ -1,22 +1,16 @@
 # react-native-universal-keyboard-aware-scrollview
 
 [![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)
 
-A **universal keyboard-aware ScrollView** for React Native that **works correctly** in:
-- ✅ Normal screens
-- ✅ React Native Modal
-- ✅ BottomSheet components  
-- ✅ Multiline TextInput (textarea)
-- ✅ Any overlay or dialog scenario
+A **universal keyboard-aware ScrollView** for React Native that **automatically scrolls** to keep the focused input visible when the keyboard appears.
 
-## 🔥 Platform Support
+## ✅ Works With
 
-| Platform | Supported |
-|----------|-----------|
-| React Native CLI | ✅ |
-| Expo (Development Build) | ✅ |
-| Expo Go | ❌ (requires native code) |
+- Normal screens
+- React Native Modal
+- Bottom sheets
+- **Single-line TextInput**
+- **Multiline TextInput (textarea)**
 
 ## 📦 Installation
 
@@ -26,254 +20,257 @@ npm install react-native-universal-keyboard-aware-scrollview
 
 ### iOS Setup
 ```bash
-cd ios && pod install
+cd ios && pod install && cd ..
 ```
 
 ### Android Setup
-No additional setup required - auto-linking handles everything.
+No additional setup needed (auto-linking).
 
-### Expo (Development Build)
+### Expo
 ```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.
+> ⚠️ **Note:** This package has native code and won't work in Expo Go. Use a development build.
 
-## 🚀 Quick Start
+---
 
-### Basic Usage
+## 🚀 Usage
+
+### Basic Example
 
 ```tsx
 import React from 'react';
-import { TextInput, StyleSheet, SafeAreaView } from 'react-native';
+import { TextInput, StyleSheet, SafeAreaView, Text } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-universal-keyboard-aware-scrollview';
 
 export default function App() {
   return (
     <SafeAreaView style={styles.container}>
-      <KeyboardAwareScrollView style={styles.scroll}>
+      <KeyboardAwareScrollView 
+        style={styles.scroll}
+        extraScrollHeight={75}
+      >
+        <Text style={styles.title}>Contact Form</Text>
+        
         <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}
+        <TextInput placeholder="Email" style={styles.input} keyboardType="email-address" />
+        <TextInput placeholder="Phone" style={styles.input} keyboardType="phone-pad" />
+        
+        {/* Multiline TextInput - automatically handled! */}
+        <TextInput
+          placeholder="Your message..."
+          style={[styles.input, styles.textArea]}
+          multiline
+          numberOfLines={6}
+          textAlignVertical="top"
         />
+        
+        <TextInput placeholder="Website (optional)" style={styles.input} />
       </KeyboardAwareScrollView>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
-  scroll: { flex: 1, padding: 16 },
+  container: { 
+    flex: 1, 
+    backgroundColor: '#f5f5f5' 
+  },
+  scroll: { 
+    flex: 1, 
+    padding: 20 
+  },
+  title: { 
+    fontSize: 24, 
+    fontWeight: 'bold', 
+    marginBottom: 20 
+  },
   input: {
+    backgroundColor: 'white',
     borderWidth: 1,
-    borderColor: '#ccc',
+    borderColor: '#ddd',
     borderRadius: 8,
-    padding: 12,
-    marginBottom: 16,
+    padding: 15,
+    marginBottom: 15,
+    fontSize: 16,
+  },
+  textArea: {
+    height: 150,
+    textAlignVertical: 'top',
   },
-  multiline: { height: 120, textAlignVertical: 'top' },
 });
 ```
 
-### Usage Inside Modal (The Key Feature!)
+### Inside Modal
 
 ```tsx
 import React, { useState } from 'react';
-import { Modal, TextInput, View, Button, StyleSheet, SafeAreaView } from 'react-native';
+import { Modal, TextInput, Button, SafeAreaView, View, Text, StyleSheet } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-universal-keyboard-aware-scrollview';
 
 export default function ModalExample() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <>
-      <Button title="Open Modal" onPress={() => setVisible(true)} />
-      
+    <View style={styles.container}>
+      <Button title="Open Modal Form" onPress={() => setVisible(true)} />
+
       <Modal visible={visible} animationType="slide">
-        <SafeAreaView style={styles.container}>
+        <SafeAreaView style={styles.modal}>
+          <Text style={styles.title}>Modal Form</Text>
+          
           <KeyboardAwareScrollView 
+            style={styles.scroll}
             insideModal={true}
-            extraScrollHeight={20}
+            extraScrollHeight={80}
           >
-            <TextInput placeholder="Name" style={styles.input} />
+            <TextInput placeholder="Username" style={styles.input} />
             <TextInput placeholder="Email" style={styles.input} />
-            <TextInput 
-              placeholder="Message" 
-              style={[styles.input, styles.multiline]} 
+            <TextInput placeholder="Password" style={styles.input} secureTextEntry />
+            
+            <TextInput
+              placeholder="Bio (multiline)"
+              style={[styles.input, { height: 120 }]}
               multiline
-              numberOfLines={4}
+              textAlignVertical="top"
             />
           </KeyboardAwareScrollView>
+
           <Button title="Close" onPress={() => setVisible(false)} />
         </SafeAreaView>
       </Modal>
-    </>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
+  container: { flex: 1, justifyContent: 'center', padding: 20 },
+  modal: { flex: 1 },
+  title: { fontSize: 20, fontWeight: 'bold', padding: 20 },
+  scroll: { flex: 1, padding: 20 },
   input: {
+    backgroundColor: 'white',
     borderWidth: 1,
     borderColor: '#ccc',
     borderRadius: 8,
     padding: 12,
-    margin: 16,
+    marginBottom: 12,
+    fontSize: 16,
   },
-  multiline: { height: 100, textAlignVertical: 'top' },
 });
 ```
 
-### 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, Button, Text, StyleSheet } from 'react-native';
 import { useKeyboard } from 'react-native-universal-keyboard-aware-scrollview';
 
-function MyComponent() {
-  const { 
-    keyboardHeight, 
-    isKeyboardVisible, 
-    dismissKeyboard 
-  } = useKeyboard();
+export default function HookExample() {
+  const { keyboardHeight, isKeyboardVisible, dismissKeyboard } = useKeyboard();
 
   return (
-    <View style={{ paddingBottom: keyboardHeight }}>
-      <TextInput placeholder="Type here..." />
+    <View style={[styles.container, { paddingBottom: keyboardHeight }]}>
+      <Text>Keyboard Height: {keyboardHeight}px</Text>
+      <Text>Visible: {isKeyboardVisible ? 'Yes' : 'No'}</Text>
+      
+      <TextInput placeholder="Type something..." style={styles.input} />
+      
       {isKeyboardVisible && (
-        <Button title="Dismiss" onPress={dismissKeyboard} />
+        <Button title="Dismiss Keyboard" onPress={dismissKeyboard} />
       )}
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 20 },
+  input: { borderWidth: 1, borderColor: '#ccc', padding: 12, marginVertical: 20 },
+});
 ```
 
-## 📖 API
+---
 
-### `KeyboardAwareScrollView` Props
+## 📖 Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `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 |
-| `keyboardShouldPersistTaps` | `string` | `'handled'` | Tap behavior |
-| `enableAutoScrollToFocused` | `boolean` | `true` | Auto-scroll to focused input |
-
-### `useKeyboard` Hook
+| `enableOnAndroid` | boolean | `true` | Enable on Android |
+| `enableOnIOS` | boolean | `true` | Enable on iOS |
+| `extraScrollHeight` | number | `75` | Extra scroll padding above keyboard |
+| `enableAutoScrollToFocused` | boolean | `true` | Auto-scroll to focused input |
+| `insideModal` | boolean | `false` | Set true when inside Modal |
+| `keyboardShouldPersistTaps` | string | `'handled'` | Keyboard tap behavior |
+| `resetScrollToCoords` | object | `null` | Reset scroll on keyboard hide |
+| `onKeyboardDidShow` | function | - | Called when keyboard shows |
+| `onKeyboardDidHide` | function | - | Called when keyboard hides |
 
-```tsx
-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);
-```
+---
 
-#### Options
+## 🔧 Ref Methods
 
 ```tsx
-useKeyboard({
-  enableOnAndroid: true,
-  enableOnIOS: true,
-  onKeyboardDidShow: (event) => {},
-  onKeyboardDidHide: (event) => {},
-  onKeyboardHeightChange: (height) => {},
-});
-```
-
-### `KeyboardController` Utility
+import { useRef } from 'react';
+import { KeyboardAwareScrollView, KeyboardAwareScrollViewRef } from 'react-native-universal-keyboard-aware-scrollview';
 
-```tsx
-import { KeyboardController } from 'react-native-universal-keyboard-aware-scrollview';
-
-// Dismiss keyboard
-await KeyboardController.dismiss();
+function MyComponent() {
+  const scrollRef = useRef<KeyboardAwareScrollViewRef>(null);
 
-// Get current height
-const height = await KeyboardController.getHeight();
+  return (
+    <KeyboardAwareScrollView ref={scrollRef}>
+      {/* Your inputs */}
+    </KeyboardAwareScrollView>
+  );
+}
 
-// Check if visible
-const visible = await KeyboardController.isVisible();
+// Available methods:
+// scrollRef.current?.scrollTo({ x: 0, y: 100, animated: true });
+// scrollRef.current?.scrollToEnd({ animated: true });
+// scrollRef.current?.scrollToInput(inputRef);
+// scrollRef.current?.getScrollView();
 ```
 
-## 🎯 Why This Package?
-
-| Problem | Other Libraries | This Package |
-|---------|----------------|--------------|
-| Keyboard overlaps input in Modal | ❌ | ✅ |
-| Multiline TextInput not working | ❌ | ✅ |
-| Android resize glitches | ❌ | ✅ |
-| Inconsistent heights | ❌ | ✅ |
-| Race conditions | ❌ | ✅ |
+---
 
-### Technical Implementation
+## ✅ Supported Platforms
 
-**iOS:** Uses `UIKeyboardWillChangeFrameNotification` for accurate keyboard frame detection.
-
-**Android:** Uses `ViewTreeObserver.OnGlobalLayoutListener` to measure visible window frame.
+| Platform | Supported |
+|----------|-----------|
+| iOS | ✅ |
+| Android | ✅ |
+| React Native CLI | ✅ |
+| Expo (Development Build) | ✅ |
+| Expo Go | ❌ |
 
-Both approaches work correctly inside modals because they measure the actual visible area, not the root view.
+---
 
 ## 🐛 Troubleshooting
 
-### "Native module not found"
-
+### Keyboard not detected
 ```bash
-# iOS
+# iOS - reinstall pods
 cd ios && pod install --repo-update && cd ..
 
 # Android - clean build
 cd android && ./gradlew clean && cd ..
 ```
 
-### Expo Go not working
-
-This package requires native code. Use:
-```bash
-npx expo prebuild
-npx expo run:ios  # or npx expo run:android
-```
-
-### Multiline TextInput not scrolling properly
-
+### Multiline TextInput not scrolling
 Make sure you're using the `multiline` prop:
 ```tsx
-<TextInput 
-  multiline  // Required!
+<TextInput
+  multiline={true}        // Required!
   numberOfLines={4}
+  textAlignVertical="top" // For Android
   style={{ height: 100 }}
 />
 ```
 
+---
+
 ## 📄 License
 
-MIT © [Vijay Kishan](https://github.com/AetherTechDev)
+MIT © Vijay Kishan

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-universal-keyboard-aware-scrollview",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "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",

package/src/NativeModule.ts

@@ -1,61 +1,65 @@
+/**
+ * Native Module wrapper
+ * 
+ * This file provides access to the native keyboard module when available.
+ * Falls back gracefully to React Native's Keyboard API when native module is not linked.
+ */
+
 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';
+  '- You are not using Expo Go (use development build instead)\n\n' +
+  'The package will use React Native Keyboard API as fallback.';
 
 /**
- * Native module instance
+ * Native module interface
  */
-const NativeModule: UniversalKeyboardNativeModule | undefined =
-  NativeModules.UniversalKeyboard;
+interface UniversalKeyboardNativeModule {
+  startListening(): Promise<boolean>;
+  stopListening(): Promise<boolean>;
+  getKeyboardHeight(): Promise<number>;
+  isKeyboardVisible(): Promise<boolean>;
+  dismissKeyboard(): Promise<boolean>;
+  addListener(eventName: string): void;
+  removeListeners(count: number): void;
+}
 
-/**
- * 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);
-      },
-    });
+// Get native module
+const NativeModule = NativeModules.UniversalKeyboard as UniversalKeyboardNativeModule | undefined;
 
 /**
- * Event emitter for keyboard events
+ * Check if native module is available
  */
-export const KeyboardEventEmitter = NativeModule
-  ? new NativeEventEmitter(NativeModule as any)
-  : null;
+export function isNativeModuleAvailable(): boolean {
+  return NativeModule != 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
+ * Native module with fallback
  */
-export function subscribeToKeyboardEvent(
-  eventName: string,
-  callback: (event: KeyboardEvent) => void
-): () => void {
-  if (!KeyboardEventEmitter) {
+export const UniversalKeyboardModule: UniversalKeyboardNativeModule = NativeModule || {
+  startListening: async () => {
     console.warn(LINKING_ERROR);
-    return () => {};
-  }
-
-  const subscription = KeyboardEventEmitter.addListener(eventName, callback);
-
-  return () => {
-    subscription.remove();
-  };
-}
+    return false;
+  },
+  stopListening: async () => false,
+  getKeyboardHeight: async () => 0,
+  isKeyboardVisible: async () => false,
+  dismissKeyboard: async () => {
+    const { Keyboard } = require('react-native');
+    Keyboard.dismiss();
+    return true;
+  },
+  addListener: () => {},
+  removeListeners: () => {},
+};
 
 /**
- * Check if the native module is available
+ * Event emitter for native keyboard events
  */
-export function isNativeModuleAvailable(): boolean {
-  return NativeModule != null;
-}
+export const KeyboardEventEmitter = NativeModule
+  ? new NativeEventEmitter(NativeModule as any)
+  : null;