react-native-dodge-keyboard 1.0.2 → 1.0.3

package/index.d.ts

@@ -102,6 +102,15 @@ interface ReactHijackerProps {
 }
 
 export function ReactHijacker(props: ReactHijackerProps): React.ReactElement | null;
+export function __HijackNode(props: { children: () => React.ReactElement | null }): React.ReactElement | null;
+
+export function createHijackedElement(element?: React.ReactElement | null): { __element: React.ReactElement | null };
 
 export function isDodgeScrollable(element: React.ReactNode, disableTagCheck?: boolean): boolean;
-export function isDodgeInput(element: React.ReactNode, disableTagCheck?: boolean): boolean;
+export function isDodgeInput(element: React.ReactNode, disableTagCheck?: boolean): boolean;
+
+interface KeyboardPlaceholderProps {
+    doHeight: (keyboardheight: number) => number;
+}
+
+export function KeyboardPlaceholderView(props: KeyboardPlaceholderProps): React.ReactElement | null;

package/index.js

@@ -1,5 +1,5 @@
 import { Children, cloneElement, createElement, forwardRef, isValidElement, memo, useEffect, useMemo, useRef, useState } from "react";
-import { Dimensions, findNodeHandle, Keyboard, StyleSheet, UIManager } from "react-native";
+import { Animated, Dimensions, findNodeHandle, Keyboard, Platform, StyleSheet, UIManager, useAnimatedValue } from "react-native";
 
 export default function ({ children, offset = 10, disabled, onHandleDodging, disableTagCheck, checkIfElementIsFocused }) {
     if (checkIfElementIsFocused !== undefined) {
@@ -24,9 +24,9 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
      * @type {import("react").RefObject<{[key: string]: { __is_standalone: boolean, _standalone_props: { dodge_keyboard_offset?: number, dodge_keyboard_lift?: boolean }, scrollRef: import("react-native").ScrollView, inputRef: {[key: string]: { ref: import("react-native").TextInput, props: { dodge_keyboard_offset?: number, dodge_keyboard_lift?: boolean } }} }}>}
      */
     const viewRefsMap = useRef({});
-    const isKeyboardVisible = useRef();
     const doDodgeKeyboard = useRef();
     const previousLift = useRef();
+    const wasVisible = useRef();
 
     const clearPreviousDodge = (scrollId) => {
         if (previousLift.current && previousLift.current !== scrollId) {
@@ -36,14 +36,26 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
         }
     }
 
-    doDodgeKeyboard.current = () => {
+    /**
+     * @param {import('react-native').KeyboardEvent | undefined} event 
+     * @param {boolean} visible
+     */
+    doDodgeKeyboard.current = (event, visible) => {
+        if (typeof visible !== 'boolean') {
+            if (typeof wasVisible.current === 'boolean') {
+                visible = wasVisible.current;
+            } else return;
+        }
+
+        wasVisible.current = visible;
+
         try {
-            const keyboardInfo = Keyboard.metrics();
+            const keyboardInfo = event?.endCoordinates || Keyboard.metrics();
             const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
 
             // console.log('doDodgeKeyboard');
             if (
-                isKeyboardVisible.current &&
+                visible &&
                 keyboardInfo &&
                 !disabled &&
                 (keyboardInfo.width === windowWidth ||
@@ -101,7 +113,7 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
                                                         if (scrollLift) {
                                                             setCurrentPaddedScroller([scrollId, scrollLift, newScrollY]);
                                                         } else {
-                                                            scrollRef.scrollTo({ y: newScrollY, animated: true });
+                                                            tryPerformScroll(scrollRef, newScrollY, true);
                                                             setCurrentPaddedScroller();
                                                         }
                                                     }
@@ -124,20 +136,24 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
         }
     }
 
+    const tryPerformScroll = (ref, y, animated = true) => {
+        if (!ref) return;
+
+        if (ref.scrollTo) {
+            ref.scrollTo?.({ y, animated });
+        } else if (ref.scrollToOffset) {
+            ref.scrollToOffset?.({ offset: y, animated });
+        } else {
+            ref.getScrollResponder?.()?.scrollTo?.({ y, animated });
+        }
+    }
+
     const [paddedId, paddedSize, paddedScroll] = currentPaddedScroller || [];
 
     useEffect(() => {
         if (currentPaddedScroller) {
             const ref = viewRefsMap.current[paddedId]?.scrollRef;
-            if (ref) {
-                if (ref.scrollTo) {
-                    ref.scrollTo?.({ y: paddedScroll, animated: true });
-                } else if (ref.scrollToOffset) {
-                    ref.scrollToOffset?.({ offset: paddedScroll, animated: true });
-                } else {
-                    ref.getScrollResponder?.()?.scrollTo?.({ y: paddedScroll, animated: true });
-                }
-            }
+            tryPerformScroll(ref, paddedScroll, false);
         }
     }, [currentPaddedScroller]);
 
@@ -147,19 +163,15 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
 
     useEffect(() => {
         if (disabled) return;
-        const frameListener = Keyboard.addListener('keyboardDidChangeFrame', e => {
-            doDodgeKeyboard.current();
-        });
-
-        const showListener = Keyboard.addListener('keyboardDidShow', e => {
-            isKeyboardVisible.current = true;
-            doDodgeKeyboard.current();
-        });
-
-        const hiddenListener = Keyboard.addListener('keyboardDidHide', e => {
-            isKeyboardVisible.current = false;
-            doDodgeKeyboard.current();
-        });
+        const frameListener = Keyboard.addListener('keyboardDidChangeFrame', e => doDodgeKeyboard.current(e));
+        const showListener = Keyboard.addListener(
+            Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow',
+            e => doDodgeKeyboard.current(e, true)
+        );
+        const hiddenListener = Keyboard.addListener(
+            Platform.OS === 'android' ? 'keyboardDidHide' : 'keyboardWillHide',
+            e => doDodgeKeyboard.current(e, false)
+        );
 
         return () => {
             frameListener.remove();
@@ -168,145 +180,158 @@ export default function ({ children, offset = 10, disabled, onHandleDodging, dis
         }
     }, [!disabled]);
 
-    return (
-        <ReactHijacker
-            doHijack={(node, path) => {
-                if (node?.props?.['dodge_keyboard_scan_off']) return { element: node };
-
-                const isStandalone = isDodgeInput(node);
-
-                if (isStandalone || isDodgeScrollable(node, disableTagCheck)) {
-                    const scrollId = path.join('=>');
-                    const initNode = () => {
-                        if (!viewRefsMap.current[scrollId])
-                            viewRefsMap.current[scrollId] = { inputRef: {} };
-
-                        if (isStandalone) {
-                            viewRefsMap.current[scrollId].__is_standalone = true;
-                            viewRefsMap.current[scrollId]._standalone_props = {
-                                dodge_keyboard_offset: node.props?.dodge_keyboard_offset,
-                                dodge_keyboard_lift: node.props?.dodge_keyboard_lift
-                            };
-                        }
-                    }
-                    const shouldPad = scrollId === paddedId;
-                    const contentStyle = shouldPad && StyleSheet.flatten(node.props?.contentContainerStyle);
-                    const rootRenderItem = node.prop?.renderItem;
-                    const rootKeyExtractor = node.prop?.keyExtractor;
-                    const hasInternalList = !isStandalone && (typeof rootRenderItem === 'function' && !node.props?.children);
-
-                    const doRefCleanup = () => {
-                        if (
-                            viewRefsMap.current[scrollId]?.scrollRef ||
-                            Object.keys(viewRefsMap.current[scrollId]?.inputRef || {}).length
-                        ) return;
-                        delete viewRefsMap.current[scrollId];
-                    }
+    const nodeIdIte = useRef(0);
 
-                    const injectChild = (children, childPath) =>
-                        ReactHijacker({
-                            children,
-                            path: childPath,
-                            doHijack: (inputNode, path) => {
-                                if (isDodgeInput(inputNode, disableTagCheck)) {
-                                    const inputId = path.join('=>');
-                                    const initInputNode = () => {
-                                        initNode();
-                                        if (!viewRefsMap.current[scrollId].inputRef[inputId])
-                                            viewRefsMap.current[scrollId].inputRef[inputId] = {};
-                                        viewRefsMap.current[scrollId].inputRef[inputId].props = {
-                                            dodge_keyboard_offset: inputNode.props?.dodge_keyboard_offset,
-                                            dodge_keyboard_lift: inputNode.props?.dodge_keyboard_lift
-                                        };
-                                    }
+    const onHijackNode = node => {
+        if (node?.props?.dodge_keyboard_scan_off || node?.props?.__dodging_keyboard) return;
 
-                                    initInputNode();
-
-                                    return {
-                                        props: {
-                                            ...inputNode.props,
-                                            onFocus: (...args) => {
-                                                doDodgeKeyboard.current();
-                                                return inputNode.props?.onFocus?.(...args);
-                                            },
-                                            onLayout: (...args) => {
-                                                doDodgeKeyboard.current();
-                                                return inputNode.props?.onLayout?.(...args);
-                                            },
-                                            ref: r => {
-                                                if (r) {
-                                                    initInputNode();
-
-                                                    viewRefsMap.current[scrollId].inputRef[inputId].ref = r;
-                                                } else if (viewRefsMap.current[scrollId]?.inputRef?.[inputId]) {
-                                                    delete viewRefsMap.current[scrollId].inputRef[inputId];
-                                                    doRefCleanup();
-                                                }
+        const isStandalone = isDodgeInput(node);
+        if (!isStandalone && !isDodgeScrollable(node, disableTagCheck)) return;
 
-                                                const thatRef = inputNode.props?.ref;
-                                                if (typeof thatRef === 'function') {
-                                                    thatRef(r);
-                                                } else if (thatRef) thatRef.current = r;
-                                            }
-                                        }
-                                    };
-                                }
+        const renderer = () => {
+            const scrollId = useMemo(() => `${++nodeIdIte.current}`, []);
+
+            const initNode = () => {
+                if (!viewRefsMap.current[scrollId])
+                    viewRefsMap.current[scrollId] = { inputRef: {} };
+
+                if (isStandalone) {
+                    viewRefsMap.current[scrollId].__is_standalone = true;
+                    viewRefsMap.current[scrollId]._standalone_props = {
+                        dodge_keyboard_offset: node.props?.dodge_keyboard_offset,
+                        dodge_keyboard_lift: node.props?.dodge_keyboard_lift
+                    };
+                }
+            }
+            const shouldPad = !isStandalone && scrollId === paddedId;
+            const contentStyle = shouldPad && StyleSheet.flatten(node.props?.contentContainerStyle);
+            const rootRenderItem = node.props?.renderItem;
+            const hasInternalList = !isStandalone && (typeof rootRenderItem === 'function' && !node.props?.children);
+
+            const doRefCleanup = () => {
+                if (
+                    viewRefsMap.current[scrollId]?.scrollRef ||
+                    Object.keys(viewRefsMap.current[scrollId]?.inputRef || {}).length
+                ) return;
+                delete viewRefsMap.current[scrollId];
+            }
+
+            const injectChild = (children, childPath) =>
+                ReactHijacker({
+                    children,
+                    path: childPath,
+                    doHijack: inputNode => {
+                        if (node?.props?.__dodging_keyboard) return;
+
+                        if (!isDodgeInput(inputNode, disableTagCheck)) return;
+
+                        const inputRenderer = () => {
+                            const inputId = useMemo(() => `${++nodeIdIte.current}`, []);
+                            const initInputNode = () => {
+                                initNode();
+                                if (!viewRefsMap.current[scrollId].inputRef[inputId])
+                                    viewRefsMap.current[scrollId].inputRef[inputId] = {};
+                                viewRefsMap.current[scrollId].inputRef[inputId].props = {
+                                    dodge_keyboard_offset: inputNode.props?.dodge_keyboard_offset,
+                                    dodge_keyboard_lift: inputNode.props?.dodge_keyboard_lift
+                                };
                             }
-                        });
-
-                    return {
-                        props: {
-                            ...node.props,
-                            ...shouldPad ? {
-                                contentContainerStyle: {
-                                    ...contentStyle,
-                                    paddingBottom: paddedSize + (isNumber(contentStyle?.paddingBottom) ? contentStyle.paddingBottom : 0)
-                                }
-                            } : {},
-                            ref: r => {
-                                if (r) {
-                                    initNode();
-                                    viewRefsMap.current[scrollId].scrollRef = r;
-                                } else if (viewRefsMap.current[scrollId]) {
-                                    viewRefsMap.current[scrollId].scrollRef = undefined;
-                                    doRefCleanup();
-                                }
 
-                                const thatRef = node.props?.ref;
-                                if (typeof thatRef === 'function') {
-                                    thatRef(r);
-                                } else if (thatRef) thatRef.current = r;
-                            },
-                            ...isStandalone ? {
+                            initInputNode();
+
+                            const newProps = {
+                                ...inputNode.props,
+                                __dodging_keyboard: true,
                                 onFocus: (...args) => {
                                     doDodgeKeyboard.current();
-                                    return node.props?.onFocus?.(...args);
-                                }
-                            } : {},
-                            onLayout: (...args) => {
-                                doDodgeKeyboard.current();
-                                return node.props?.onLayout?.(...args);
-                            },
-                            ...isStandalone ? {} :
-                                hasInternalList ? {
-                                    renderItem: (...args) => {
-                                        const { item, index } = args[0] || {};
-
-                                        return injectChild(
-                                            rootRenderItem(...args),
-                                            [
-                                                ...path,
-                                                index,
-                                                ...typeof rootKeyExtractor === 'function' ?
-                                                    [rootKeyExtractor?.(item, index)] : []
-                                            ]
-                                        );
+                                    return inputNode.props?.onFocus?.(...args);
+                                },
+                                onLayout: (...args) => {
+                                    doDodgeKeyboard.current();
+                                    return inputNode.props?.onLayout?.(...args);
+                                },
+                                ref: r => {
+                                    if (r) {
+                                        initInputNode();
+
+                                        viewRefsMap.current[scrollId].inputRef[inputId].ref = r;
+                                    } else if (viewRefsMap.current[scrollId]?.inputRef?.[inputId]) {
+                                        delete viewRefsMap.current[scrollId].inputRef[inputId];
+                                        doRefCleanup();
                                     }
-                                } : { children: injectChild(node.props?.children, path) }
+
+                                    const thatRef = inputNode.props?.ref;
+                                    if (typeof thatRef === 'function') {
+                                        thatRef(r);
+                                    } else if (thatRef) thatRef.current = r;
+                                }
+                            };
+
+                            return cloneElement(inputNode, newProps);
                         }
-                    };
-                }
-            }}>
+
+                        return createHijackedElement(
+                            <__HijackNode>
+                                {inputRenderer}
+                            </__HijackNode>
+                        );
+                    }
+                });
+
+            const newProps = {
+                ...node.props,
+                __dodging_keyboard: true,
+                ...shouldPad ? {
+                    contentContainerStyle: {
+                        ...contentStyle,
+                        paddingBottom: paddedSize + (isNumber(contentStyle?.paddingBottom) ? contentStyle.paddingBottom : 0)
+                    }
+                } : {},
+                ref: r => {
+                    if (r) {
+                        initNode();
+                        viewRefsMap.current[scrollId].scrollRef = r;
+                    } else if (viewRefsMap.current[scrollId]) {
+                        viewRefsMap.current[scrollId].scrollRef = undefined;
+                        doRefCleanup();
+                    }
+
+                    const thatRef = node.props?.ref;
+                    if (typeof thatRef === 'function') {
+                        thatRef(r);
+                    } else if (thatRef) thatRef.current = r;
+                },
+                ...isStandalone ? {
+                    onFocus: (...args) => {
+                        doDodgeKeyboard.current();
+                        return node.props?.onFocus?.(...args);
+                    }
+                } : {},
+                onLayout: (...args) => {
+                    doDodgeKeyboard.current();
+                    return node.props?.onLayout?.(...args);
+                },
+                ...isStandalone ? {} :
+                    hasInternalList ? {
+                        renderItem: (...args) => {
+                            return injectChild(rootRenderItem(...args));
+                        }
+                    } : { children: injectChild(node.props?.children) }
+            };
+
+            return cloneElement(node, newProps);
+        }
+
+        return createHijackedElement(
+            <__HijackNode>
+                {renderer}
+            </__HijackNode>
+        );
+    };
+
+    return (
+        <ReactHijacker
+            doHijack={onHijackNode}>
             {children}
         </ReactHijacker>
     );
@@ -329,62 +354,43 @@ const REACT_SYMBOLS = {
     memo: Symbol.for('react.memo')
 };
 
-export function ReactHijacker({ children, doHijack, path }) {
-    const renderRefs = useMemo(() => new Map(), []);
-
+export function ReactHijacker({ children, doHijack, enableLocator }) {
     const instantDoHijack = useRef();
     instantDoHijack.current = doHijack;
 
-    const injectIntoTree = (node, path = [], arrayIndex) => {
+    const injectIntoTree = (node, path) => {
         if (!node) return node;
         if (Array.isArray(node)) {
-            path = [...path, ...arrayIndex === undefined ? [0] : [arrayIndex]];
-            return Children.map(node, (v, i) => injectIntoTree(v, path, i));
+            return Children.map(node, (v, i) => injectIntoTree(v, path && [...path, i]));
         }
         if (!isValidElement(node)) return node;
 
-        path = [...path, ...arrayIndex === undefined ? [0] : [arrayIndex], getNodeId(node)];
+        if (path) path = [...path, getNodeId(node)];
 
         let thisObj;
-        if (thisObj = instantDoHijack.current?.(node, path)) {
-            const { element, props } = thisObj;
-
-            if (Object.hasOwn(thisObj, 'element')) return element;
-            if (props) return cloneElement(node, props);
-            return node;
+        if (Object.hasOwn((thisObj = instantDoHijack.current?.(node, path)) || {}, '__element')) {
+            return thisObj.__element;
         }
 
         if (!isHostElement(node)) {
             const wrapNodeType = (nodeType, pathway, pathKey) => {
-                pathway = [...pathway, getNodeId(undefined, nodeType, pathKey)];
-                const path_id = pathway.join(',');
-                let renderRefStore = renderRefs.get(nodeType);
-
-                if (renderRefStore?.[path_id]) return renderRefStore[path_id];
+                if (pathway) pathway = [...pathway, getNodeId(undefined, nodeType, pathKey)];
 
                 // if (doLogging) console.log('wrapNodeType path:', pathway, ' node:', nodeType);
                 const render = (renderedNode) => {
                     // if (doLogging) console.log('deep path:', pathway, ' node:', renderedNode);
-                    return injectIntoTree(renderedNode, pathway);
+                    return injectIntoTree(renderedNode, pathway && [...pathway, 0]);
                 }
 
-                let newType;
-
                 if (typeof nodeType === 'function') { // check self closed tag
-                    newType = hijackRender(nodeType, render);
+                    return hijackRender(nodeType, render);
                 } else if (nodeType?.$$typeof === REACT_SYMBOLS.forwardRef) {
-                    newType = forwardRef(hijackRender(nodeType.render, render));
+                    return forwardRef(hijackRender(nodeType.render, render));
                 } else if (nodeType?.$$typeof === REACT_SYMBOLS.memo) {
-                    newType = memo(wrapNodeType(nodeType.type, pathway), nodeType.compare);
+                    const newType = memo(wrapNodeType(nodeType.type, pathway), nodeType.compare);
                     newType.displayName = nodeType.displayName || nodeType.name;
-                }
-
-                if (newType) {
-                    if (!renderRefStore) renderRefs.set(nodeType, renderRefStore = {});
-                    renderRefStore[path_id] = newType;
                     return newType;
                 }
-
                 return nodeType;
             }
 
@@ -394,15 +400,24 @@ export function ReactHijacker({ children, doHijack, path }) {
                 node.type?.$$typeof === REACT_SYMBOLS.memo // check memo
             ) {
                 // if (doLogging) console.log('doLog path:', path, ' node:', node);
-                const injectedType = wrapNodeType(node.type, path.slice(0, -1), node.key);
-                return createElement(
-                    injectedType,
-                    {
-                        ...node.props,
-                        key: node.key,
-                        // ...isForwardRef ? { ref: node.ref } : {}
-                    },
-                    node.props?.children
+                return (
+                    <__HijackNodePath>
+                        {() => {
+                            const hijackType = useMemo(() =>
+                                wrapNodeType(node.type, path && path.slice(0, -1), node.key),
+                                [node.type]
+                            );
+
+                            return createElement(
+                                hijackType,
+                                {
+                                    ...node.props,
+                                    key: node.key
+                                },
+                                node.props?.children
+                            );
+                        }}
+                    </__HijackNodePath>
                 );
             }
         }
@@ -410,15 +425,24 @@ export function ReactHijacker({ children, doHijack, path }) {
         const children = node.props?.children;
         if (children)
             return cloneElement(node, {
-                children: injectIntoTree(children, path)
+                children: injectIntoTree(children, path && [...path, 0])
             });
 
         return node;
     };
 
-    return injectIntoTree(children, path);
+    return injectIntoTree(children, enableLocator ? [] : undefined);
 };
 
+export const createHijackedElement = (element) => ({ __element: element });
+export function __HijackNode({ children }) {
+    return children?.();
+}
+
+function __HijackNodePath({ children }) {
+    return children?.();
+}
+
 const hijackRender = (type, doHijack) =>
     new Proxy(type, {
         apply(target, thisArg, args) {
@@ -492,4 +516,62 @@ export const isDodgeInput = (element, disableTagCheck) => {
 
     return inputTypes.includes(element.type?.displayName)
         || inputTypes.includes(element.type?.name);
-};
+};
+
+export const KeyboardPlaceholderView = ({ doHeight }) => {
+    const height = useAnimatedValue(0);
+
+    const instantDoHeight = useRef();
+    instantDoHeight.current = doHeight;
+
+    useEffect(() => {
+        let wasVisible;
+        /**
+         * @param {import('react-native').KeyboardEvent} event 
+         * @param {boolean} visible 
+         */
+        const updateKeyboardHeight = (event, visible) => {
+            if (typeof visible !== 'boolean') {
+                if (typeof wasVisible === 'boolean') {
+                    visible = wasVisible;
+                } else return;
+            }
+
+            wasVisible = visible;
+
+            const { endCoordinates, isEventFromThisApp, duration } = event;
+            if (Platform.OS === 'ios' && !isEventFromThisApp) return;
+
+            const kh = visible ? endCoordinates.height : 0;
+            const newHeight = Math.max(0, instantDoHeight.current ? instantDoHeight.current(kh) : kh);
+            const newDuration = (Math.abs(height._value - newHeight) * duration) / endCoordinates.height;
+
+            Animated.timing(height, {
+                duration: newDuration,
+                toValue: newHeight,
+                useNativeDriver: false
+            }).start();
+        }
+
+        const initialMetric = Keyboard.metrics();
+        if (initialMetric) updateKeyboardHeight(initialMetric, true);
+
+        const frameListener = Keyboard.addListener('keyboardDidChangeFrame', e => updateKeyboardHeight(e));
+        const showListener = Keyboard.addListener(
+            Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow',
+            e => updateKeyboardHeight(e, true)
+        );
+        const hiddenListener = Keyboard.addListener(
+            Platform.OS === 'android' ? 'keyboardDidHide' : 'keyboardWillHide',
+            e => updateKeyboardHeight(e, false)
+        );
+
+        return () => {
+            frameListener.remove();
+            showListener.remove();
+            hiddenListener.remove();
+        }
+    }, []);
+
+    return <Animated.View style={{ height }} />;
+}

package/package.json

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