react-native-dodge-keyboard 1.0.6 → 1.0.8

package/README.md

@@ -5,10 +5,11 @@
 react-native-dodge-keyboard is a tiny, zero-dependency library designed to flawlessly move your UI out of the way of the keyboard.
 It is built to solve a long-standing React Native pain point: TextInputs inside ScrollViews, FlatLists, and custom scrollable layouts not being properly lifted when focused.
 
-Unlike KeyboardAvoidingView and older third-party libraries, react-native-dodge-keyboard:
+Unlike `KeyboardAvoidingView` and older third-party libraries, react-native-dodge-keyboard:
 
-- Works with any scrollable container
+- Works with any scrollable container (ScrollView, FlatList, SectionList, ...more)
 - Supports dynamic layout sizes
+- Handles elements that are not inside a scrollable view.
 - Handles scrollviews placed anywhere (nested, offset, inside modals, bottom sheets, etc.)
 - Works on both iOS and Android
 - Requires zero configuration
@@ -27,6 +28,13 @@ or using yarn
 yarn add react-native-dodge-keyboard
 ```
 
+## Demo
+
+<p>
+  <img src="https://github.com/deflexable/react-native-dodge-keyboard/blob/main/screenshots/main.gif" width="260">
+  <img src="https://github.com/deflexable/react-native-dodge-keyboard/blob/main/screenshots/android_main.gif" width="260">
+</p>
+
 ## Usage
 
 Wrap your screen (or only the part you want to dodge) with the DodgeKeyboard component.
@@ -34,18 +42,46 @@ Wrap your screen (or only the part you want to dodge) with the DodgeKeyboard com
 ### Basic Example
 
 ```js
-import DodgeKeyboard from 'react-native-dodge-keyboard';
+import { DodgeKeyboard } from 'react-native-dodge-keyboard';
 import { ScrollView, TextInput } from 'react-native';
 
-export default function TestingScreen() {
+export default function TestScreen() {
 
   return (
     <DodgeKeyboard>
-      <ScrollView contentContainerStyle={{ flex: 1 }}>
+      <ScrollView style={{ flex: 1 }}>
         <TextInput placeholder="Name" style={styles.input} />
         <TextInput multiline placeholder="Message" style={styles.multiline} />
       </ScrollView>
     </DodgeKeyboard>
   );
 }
-```
+```
+
+## Known Issues
+
+### Android Soft Input
+Some Android devices handle keyboard dodging natively, which can lead to unexpected behavior when used with this library. To disable the native behavior and avoid issues, set `android:windowSoftInputMode="adjustNothing"` in your AndroidManifest.xml.
+
+## Advance Use Cases
+
+### Dodging custom views
+Out of the box, `TextInput` is the only component that supports keyboard dodging. To enable this behavior for other components, pass `dodge_keyboard_input={true}` as a prop.
+
+You can also listen to `checkIfElementIsFocused` prop and return whether the element passed as an argument is currently focused and needs to dodge the keyboard.
+
+Kindly check [examples/CustomFocusDodge.jsx](https://github.com/deflexable/react-native-dodge-keyboard/blob/main/examples/CustomFocusDodge.jsx) for example on this approach.
+
+A demo of the example is attach below:
+
+<img src="https://github.com/deflexable/react-native-dodge-keyboard/blob/main/screenshots/custom.gif" width="260">
+
+
+### Dodging static element
+To dodge `TextInput` or component with prop `dodge_keyboard_input={true}` that are not inside a scrollable view, you need to listen to `onHandleDodging` to manually lift up the component yourself.
+
+Kindly check [examples/ManualLifting.jsx](https://github.com/deflexable/react-native-dodge-keyboard/blob/main/examples/ManualLifting.jsx) for example on this approach.
+
+A demo of the example is attach below:
+
+<img src="https://github.com/deflexable/react-native-dodge-keyboard/blob/main/screenshots/static.gif" width="260">

package/index.d.ts

@@ -83,7 +83,7 @@ export interface DodgeKeyboardProps {
 
 }
 
-export default function DodgeKeyboard(
+export function DodgeKeyboard(
     props: DodgeKeyboardProps
 ): React.ReactElement | null;
 

package/index.js

@@ -1,7 +1,7 @@
-import { Children, cloneElement, createElement, forwardRef, isValidElement, memo, useEffect, useMemo, useRef, useState } from "react";
+import { Children, cloneElement, createElement, forwardRef, isValidElement, memo, useEffect, useMemo, useRef, useState, useImperativeHandle } from "react";
 import { Animated, Dimensions, findNodeHandle, Keyboard, Platform, StyleSheet, UIManager, useAnimatedValue } from "react-native";
 
-export default function ({ children, offset = 10, disabled, onHandleDodging, disableTagCheck, checkIfElementIsFocused }) {
+export const DodgeKeyboard = forwardRef(({ children, offset = 10, disabled, onHandleDodging, disableTagCheck, checkIfElementIsFocused }, ref) => {
     if (checkIfElementIsFocused !== undefined) {
         if (typeof checkIfElementIsFocused !== 'function')
             throw 'checkIfElementIsFocused should be a function';
@@ -97,7 +97,7 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
                     if (!eventContext?.fromTimer && resizerTimer.current === undefined)
                         resizerTimer.current = setTimeout(() => {
                             doDodgeKeyboard.current(undefined, undefined, { fromTimer: true });
-                        }, 700);
+                        }, 500);
                 }
 
                 const checkFocused = checkIfElementIsFocused || (r => r?.isFocused?.());
@@ -140,14 +140,14 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
                                             });
                                         }),
                                         new Promise(resolve => {
-                                            inputObj.measure((x, y, width, height, pageX, pageY) => { // y is dynamic
+                                            UIManager.measure(findNodeHandle(inputObj), (x, y, width, height, pageX, pageY) => { // y is dynamic
                                                 resolve({ py: pageY, layout: { x, y, width, height, pageX, pageY } });
                                             });
                                         }),
                                         new Promise((resolve, reject) => {
-                                            inputObj.measureLayout(scrollRef, (l, t, width, height) => { // t is fixed
+                                            UIManager.measureLayout(findNodeHandle(inputObj), findNodeHandle(scrollRef), reject, (l, t, width, height) => { // t is fixed
                                                 resolve({ t, h: height, relativeLayout: { left: l, top: t, width, height } });
-                                            }, reject);
+                                            });
                                         })
                                     ]).then(([{ h: sh, py: sy, scrollLayout }, { py: y, layout }, { t, h, relativeLayout }]) => {
 
@@ -198,7 +198,7 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
                         }
                     }
                 }
-            } else {
+            } else if (!visible) {
                 setCurrentPaddedScroller();
                 clearPreviousDodge();
             }
@@ -224,7 +224,14 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
     useEffect(() => {
         if (currentPaddedScroller) {
             const ref = viewRefsMap.current[paddedId]?.scrollRef;
-            tryPerformScroll(ref, paddedScroll, false);
+            if (Platform.OS === 'android') {
+                tryPerformScroll(ref, paddedScroll, false);
+            } else {
+                // this seem to be removing `the flash bang` on IOS
+                setTimeout(() => {
+                    tryPerformScroll(ref, paddedScroll, false);
+                }, 1);
+            }
         }
     }, [currentPaddedScroller]);
 
@@ -232,6 +239,10 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
         doDodgeKeyboard.current();
     }, [offset, !disabled]);
 
+    useImperativeHandle(ref, () => ({
+        trigger: () => doDodgeKeyboard.current()
+    }), []);
+
     useEffect(() => {
         if (disabled) return;
         const frameListener = Keyboard.addListener('keyboardDidChangeFrame', e => doDodgeKeyboard.current(e));
@@ -322,7 +333,7 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
                         ...inputNode.props,
                         __dodging_keyboard: true,
                         onFocus: (...args) => {
-                            doDodgeKeyboard.current();
+                            doDodgeKeyboard.current(lastKeyboardEvent.current);
                             return inputNode.props?.onFocus?.(...args);
                         },
                         onLayout: (...args) => {
@@ -381,7 +392,7 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
                 },
                 ...isStandalone ? {
                     onFocus: (...args) => {
-                        doDodgeKeyboard.current();
+                        doDodgeKeyboard.current(lastKeyboardEvent.current);
                         return node.props?.onFocus?.(...args);
                     }
                 } : {},
@@ -424,7 +435,7 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
             {children}
         </ReactHijacker>
     );
-};
+});
 
 const niceFunction = (func, message) => {
     return (...args) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-dodge-keyboard",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "react-native-dodge-keyboard is a tiny library designed to flawlessly move your UI out of the way of the keyboard",
   "keywords": [
     "react-native",