react-native-snap-sheet 1.0.2 → 1.0.4

package/index.ts

@@ -86,7 +86,7 @@ export interface SnapSheetBaseProps {
     /**
      * Additional offset to add when dodging keyboard
      * 
-     * @default 10
+     * default to `0` if `keyboardDodgingBehaviour` is "whole" otherwise, it defaults to `10`
      */
     keyboardDodgingOffset?: number;
 }
@@ -104,6 +104,15 @@ export interface SnapSheetProps extends SnapSheetBaseProps {
      */
     initialSnapIndex?: number;
 
+    /**
+     * The lowest snap point the sheet can attain.
+     * 
+     * This is useful in preventing the sheet from completing closing
+     * 
+     * @default 0
+     */
+    minSnapIndex?: number;
+
     /**
      * Disable user interactions on the snap sheet
      * 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-snap-sheet",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "homepage": "https://github.com/deflexable/react-native-snap-sheet#readme",
   "bugs": {
@@ -19,7 +19,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "react-native-dodge-keyboard": "^1.0.2",
+    "react-native-dodge-keyboard": "^1.0.4",
     "react-native-push-back": "^1.0.0"
   }
-}
+}

package/src/snapsheet.js

@@ -1,14 +1,16 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Animated, Keyboard, PanResponder, StyleSheet, useAnimatedValue, View } from "react-native";
-import DodgeKeyboard, { ReactHijacker } from "react-native-dodge-keyboard";
-import { doRendable, isNumber } from "./utils";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, cloneElement } from "react";
+import { Animated, PanResponder, StyleSheet, useAnimatedValue, View } from "react-native";
+import DodgeKeyboard, { createHijackedElement, ReactHijacker, __HijackNode } from "react-native-dodge-keyboard";
+import { doRendable, isNumber, isPositiveNumber } from "./utils";
 import { styling } from "./styling";
 
 const PixelRate = 70 / 100; // 70ms to 100 pixels
+const CheckFocusedNode = '__fakeSnapSheetFocused';
 
 const SnapSheet = forwardRef(function SnapSheet({
     snapPoints = [],
     initialSnapIndex = 0,
+    minSnapIndex = 0,
     onSnapIndex,
     onSnapFinish,
     snapWhileDecelerating = false,
@@ -17,47 +19,80 @@ const SnapSheet = forwardRef(function SnapSheet({
     inheritScrollVelocityOnCollapse,
     renderHandle,
     handleColor,
-    keyboardDodgingBehaviour = 'optimum', // off, whole
-    keyboardDodgingOffset = 10,
+    keyboardDodgingBehaviour = 'optimum',
+    keyboardDodgingOffset,
     children,
     disabled,
     currentAnchorId,
-    __shaky_sheet
+    __checkIfElementIsFocused,
+    __loosenMinSnap
 }, ref) {
     const isLift = keyboardDodgingBehaviour === 'whole';
-    const isOptimum = keyboardDodgingBehaviour === 'optimum';
 
     if (!['optimum', 'whole', 'off'].includes(keyboardDodgingBehaviour))
         throw `keyboardDodgingBehaviour must be any of ${['optimum', 'whole', 'off']} but got ${keyboardDodgingBehaviour}`;
 
-    useMemo(() => {
-        if (snapPoints.length < 2) throw new Error('snapPoints must have at least two items');
-        snapPoints.forEach((v, i, a) => {
-            if (typeof v !== 'number' || !isNumber(v))
-                throw new Error(`snapPoints must have a valid number but got ${v} at position ${i}`);
-            if (i !== a.length - 1 && v >= a[i + 1])
-                throw new Error(`snapPoints must be in accending order but got ${v} before ${a[i + 1]}`);
-        });
-        if (!Number.isInteger(initialSnapIndex) || initialSnapIndex < 0)
-            throw new Error(`initialSnapIndex should be a positive integer but got:${initialSnapIndex}`);
-        if (initialSnapIndex >= snapPoints.length) throw new Error(`initialSnapIndex is out of range`);
-    }, snapPoints);
+    if (snapPoints.length < 2) throw new Error('snapPoints must have at least two items');
+    snapPoints.forEach((v, i, a) => {
+        if (typeof v !== 'number' || !isNumber(v))
+            throw new Error(`snapPoints must have a valid number but got ${v} at position ${i}`);
+        if (i !== a.length - 1 && v >= a[i + 1])
+            throw new Error(`snapPoints must be in accending order but got ${v} before ${a[i + 1]}`);
+    });
+    if (!Number.isInteger(initialSnapIndex) || initialSnapIndex < 0)
+        throw new Error(`initialSnapIndex should be a positive integer but got:${initialSnapIndex}`);
+    if (initialSnapIndex >= snapPoints.length) throw new Error(`initialSnapIndex is out of range`);
+
+    if (!Number.isInteger(minSnapIndex) || minSnapIndex < 0)
+        throw new Error(`minSnapIndex should be a positive integer but got:${minSnapIndex}`);
+
+    if (minSnapIndex >= snapPoints.length) throw new Error(`minSnapIndex is out of range`);
+    initialSnapIndex = Math.max(initialSnapIndex, minSnapIndex);
+
+    if (__checkIfElementIsFocused !== undefined && typeof __checkIfElementIsFocused !== 'function')
+        throw `expected '__checkIfElementIsFocused' to be a function but got ${__checkIfElementIsFocused}`;
+
+    if (isLift) {
+        const realChecker = __checkIfElementIsFocused;
+        __checkIfElementIsFocused = (r, refs) => {
+            return !!r?.[CheckFocusedNode] && refs.some(v => realChecker ? realChecker?.(v) : v?.isFocused?.());
+        };
+        if (keyboardDodgingOffset === undefined) {
+            keyboardDodgingOffset = 0;
+        }
+    } else if (keyboardDodgingOffset === undefined) {
+        keyboardDodgingOffset = 10;
+    }
+
+    const flattenStyle = StyleSheet.flatten(style) || {};
     const initSnapPoints = snapPoints;
 
     const [scrollEnabled, setScrollEnabled] = useState(false);
     const [dodgeOffset, setDodgeOffset] = useState(0);
-    const [requiredLift, setRequiredLift] = useState(0);
     const [currentIndex, setCurrentIndex] = useState(initialSnapIndex);
     const [finishedIndex, setFinishedIndex] = useState(initialSnapIndex);
     const [prefferedAnchor, setPrefferedAnchor] = useState();
 
-    const extraLift = dodgeOffset && ((isOptimum ? dodgeOffset : isLift ? requiredLift : 0) || 0);
+    snapPoints = snapPoints.map(v => v + dodgeOffset);
+    const snapPointsKey = `${snapPoints}`;
 
-    snapPoints = snapPoints.map(v => v + extraLift);
+    const fixHeight =
+        (isPositiveNumber(flattenStyle.minHeight) && isPositiveNumber(flattenStyle.height))
+            ? Math.max(flattenStyle.minHeight, flattenStyle.height)
+            : flattenStyle.height;
+    const fixMaxHeight = flattenStyle.maxHeight;
+
+    const PotentialHeight =
+        (isPositiveNumber(fixHeight) && isPositiveNumber(fixMaxHeight))
+            ? Math.min(fixHeight, fixMaxHeight)
+            : fixHeight;
     // console.log('sheetLifing:', { extraLift, dodgeOffset, requiredLift, initSnapPoints: `${initSnapPoints}`, snapPoints: `${snapPoints}` });
-    const MAX_HEIGHT = snapPoints.slice(-1)[0];
+    const MODAL_HEIGHT =
+        isPositiveNumber(PotentialHeight)
+            ? PotentialHeight
+            : snapPoints.slice(-1)[0] - snapPoints[0];
 
-    const snapTranslateValues = useMemo(() => snapPoints.map(h => MAX_HEIGHT - h), snapPoints);
+    const snapTranslateValues = useMemo(() => snapPoints.map(h => MODAL_HEIGHT - h), [snapPointsKey]);
 
     const translateY = useAnimatedValue(snapTranslateValues[initialSnapIndex]);
 
@@ -67,7 +102,6 @@ const SnapSheet = forwardRef(function SnapSheet({
     const scrollRefObj = useRef({});
     const lastOffset = useRef(translateY._value);
     const lastSnapIndex = useRef(initialSnapIndex);
-    const bottomFakePlaceholderRef = useRef();
     const instantPrefferAnchor = useRef();
     instantPrefferAnchor.current = prefferedAnchor;
 
@@ -77,40 +111,25 @@ const SnapSheet = forwardRef(function SnapSheet({
     const instantScrollEnabled = useRef(scrollEnabled);
     instantScrollEnabled.current = scrollEnabled;
 
-    const updateKeyboardOffset = () => {
-        if (!isLift) {
-            setRequiredLift(0);
-            return;
-        }
-        const keyboardInfo = Keyboard.metrics();
-        if (keyboardInfo?.height && keyboardInfo.screenY) {
-            bottomFakePlaceholderRef.current.measureInWindow((x, y) => {
-                const remains = y - keyboardInfo.screenY;
-                setRequiredLift(Math.max(0, remains));
-            });
-        } else setRequiredLift(0);
-    }
-
-    useEffect(updateKeyboardOffset, [dodgeOffset, ...initSnapPoints]);
-
     const getCurrentSnap = (draggingUpward) => {
-        const shownHeight = MAX_HEIGHT - translateY._value;
+        const shownHeight = MODAL_HEIGHT - translateY._value;
         const currentSnapIndex = draggingUpward ? snapPoints.findIndex((v, i, a) => v <= shownHeight && (i === a.length - 1 || shownHeight < a[i + 1]))
             : snapPoints.findIndex((v, i, a) => v >= shownHeight && (!i || shownHeight > a[i - 1]));
 
         return currentSnapIndex;
     }
 
-    const snapToIndex = (index, force, velocity, onFinish) => {
+    const snapToIndex = useRef();
+
+    snapToIndex.current = (index, force, velocity, onFinish) => {
         if (disabled && !force) return;
 
         if (!Number.isInteger(index) || index < 0 || index > snapPoints.length - 1)
             throw new Error(`invalid snap index:${index}, index must be within range 0 - ${snapPoints.length - 1}`);
 
-        const newY = snapTranslateValues[index];
+        if (index < minSnapIndex) index = minSnapIndex;
 
-        if (__shaky_sheet && lastOffset.current !== newY)
-            translateY.setValue(lastOffset.current);
+        const newY = snapTranslateValues[index];
 
         const prevY = translateY._value;
         setScrollEnabled(index === snapPoints.length - 1);
@@ -129,7 +148,7 @@ const SnapSheet = forwardRef(function SnapSheet({
 
         const timer = setTimeout(guessFinish, Math.max(300, timeout));
 
-        // console.log('snapTimer:', { timeout, pixel });
+        // console.log('snapTimer:', { timeout, pixel }, ' newY:', newY, ' snapPoint:', initSnapPoints, ' snapTrans:', snapTranslateValues);
 
         Animated.spring(translateY, {
             velocity,
@@ -148,13 +167,13 @@ const SnapSheet = forwardRef(function SnapSheet({
 
     useImperativeHandle(ref, () => ({
         snap: index => {
-            snapToIndex(index, true);
+            snapToIndex.current(index, true);
         }
-    }), snapPoints);
+    }));
 
     useEffect(() => {
-        snapToIndex(Math.min(lastSnapIndex.current, snapPoints.length - 1), true);
-    }, snapPoints);
+        snapToIndex.current(Math.min(lastSnapIndex.current, snapPoints.length - 1), true);
+    }, [snapPointsKey]);
 
     const panResponder = useMemo(() => {
 
@@ -178,8 +197,10 @@ const SnapSheet = forwardRef(function SnapSheet({
             onPanResponderMove: (_, gesture) => {
                 const newY = gesture.dy + lastOffset.current;
 
-                if (newY < 0) return; // prevent overscrolling upward
-                if (newY > MAX_HEIGHT) return;
+                if (
+                    newY > snapTranslateValues[__loosenMinSnap ? 0 : minSnapIndex] ||
+                    newY < snapTranslateValues.slice(-1)[0]
+                ) return;
 
                 translateY.setValue(newY);
             },
@@ -196,7 +217,7 @@ const SnapSheet = forwardRef(function SnapSheet({
                             vy > 0.3 ? 0 : currentSnapIndex;
                 const willFullyShow = newSnapIndex === snapPoints.length - 1;
 
-                snapToIndex(newSnapIndex, true, draggingUpward ? vy : undefined);
+                snapToIndex.current(newSnapIndex, true, draggingUpward ? vy : undefined);
 
                 // Only scroll if there was a fling velocity upward
                 if (inheritScrollVelocityOnExpand && willFullyShow && vy < -0.1) {
@@ -214,22 +235,22 @@ const SnapSheet = forwardRef(function SnapSheet({
                 }
             }
         });
-    }, [!disabled, ...snapPoints]);
-
-    const conStyle = useMemo(() => ({
-        position: "absolute",
-        width: "100%",
-        backgroundColor: "#fff",
-        borderTopLeftRadius: 25,
-        borderTopRightRadius: 25,
-        zIndex: 1,
-        ...StyleSheet.flatten(style),
-        bottom: 0,
-        height: MAX_HEIGHT,
-        transform: [{ translateY }]
-    }), [MAX_HEIGHT, style]);
-
-    useEffect(() => updatePrefferAnchor, [currentAnchorId]);
+    }, [!disabled, snapPointsKey, minSnapIndex]);
+
+    const conStyle = useMemo(() => {
+        const { height, minHeight, maxHeight, ...rest } = flattenStyle;
+
+        return {
+            backgroundColor: "#fff",
+            borderTopLeftRadius: 25,
+            borderTopRightRadius: 25,
+            zIndex: 1,
+            height: (Object.hasOwn(flattenStyle, 'height') && height === undefined) ? undefined : MODAL_HEIGHT,
+            ...rest,
+            transform: [{ translateY }]
+        };
+    }, [snapPointsKey, style]);
+
     const updateAnchorReducer = useRef();
 
     const scheduleAnchorUpdate = (timeout = 100) => {
@@ -242,6 +263,7 @@ const SnapSheet = forwardRef(function SnapSheet({
         const directAnchor = rankedAnchors.find(v => v[1].anchorId === currentAnchorId);
         setPrefferedAnchor(directAnchor?.[0]);
     }
+    useEffect(updatePrefferAnchor, [currentAnchorId]);
 
     const onAnchorScroll = (e, instanceId) => {
         const scrollY = e.nativeEvent.contentOffset.y;
@@ -273,7 +295,7 @@ const SnapSheet = forwardRef(function SnapSheet({
 
             const currentSnapIndex = getCurrentSnap(false);
             const newSnapIndex = snapWhileDecelerating ? Math.max(0, currentSnapIndex - 1) : 0;
-            snapToIndex(newSnapIndex, false, -scrollVelocity);
+            snapToIndex.current(newSnapIndex, false, -scrollVelocity);
         }
     }
 
@@ -285,47 +307,79 @@ const SnapSheet = forwardRef(function SnapSheet({
     const disableDodging = keyboardDodgingBehaviour === 'off';
     const sameIndex = currentIndex === finishedIndex;
 
+    const instanceIdIterator = useRef(0);
+    const prevKE = useRef();
+
+    const quicklyDodgeKeyboard = (offset, keyboardEvent) => {
+        // console.log('quicklyDodgeKeyboard offset:', offset, ' keyboardEvent:', keyboardEvent);
+        if (!keyboardEvent) {
+            if (!(keyboardEvent = prevKE.current)) return;
+        }
+        if (keyboardEvent.endCoordinates.height) {
+            prevKE.current = keyboardEvent;
+        } else {
+            if (prevKE.current) keyboardEvent = prevKE.current;
+        }
+
+        const newPosY = MODAL_HEIGHT - (initSnapPoints[lastSnapIndex.current] + offset);
+        const newDuration = (Math.abs(newPosY - translateY._value) * keyboardEvent.duration) / keyboardEvent?.endCoordinates.height;
+
+        // console.log('newPosY:', newPosY, ' timing newDuration:', newDuration);
+        Animated.timing(translateY, {
+            duration: newDuration || 0,
+            toValue: newPosY,
+            useNativeDriver: true
+        }).start();
+    }
+
     return (
         <View style={styling.absoluteFill}>
-            <Animated.View
-                style={conStyle}
-                {...panResponder.panHandlers}>
-                {doRendable?.(
-                    renderHandle,
-                    <View style={styling.modalHandle}>
-                        <View style={handleDotStyle} />
-                    </View>
-                )}
-                <View style={styling.flexer}>
-                    <DodgeKeyboard
-                        offset={keyboardDodgingOffset}
-                        disabled={!sameIndex || disableDodging}
-                        onHandleDodging={({ liftUp }) => {
-                            setDodgeOffset(liftUp);
-                        }}>
-                        {ReactHijacker({
-                            children,
-                            doHijack: (node, path) => {
-                                if (node?.props?.['snap_sheet_scan_off']) return { element: node };
-
-                                if (isScrollable(node)) {
-                                    const instanceId = path.join(',');
-
-                                    const initNode = () => {
-                                        if (!scrollRefObj.current[instanceId])
-                                            scrollRefObj.current[instanceId] = { scrollY: 0, location: path };
-                                        const thisAnchorId = node.props?.snap_sheet_scroll_anchor;
-
-                                        if (scrollRefObj.current[instanceId].anchorId !== thisAnchorId) {
-                                            scheduleAnchorUpdate(300);
+            <View style={{ position: 'absolute', bottom: 0, width: '100%' }}>
+                <Animated.View
+                    style={conStyle}
+                    {...panResponder.panHandlers}>
+                    {doRendable?.(
+                        renderHandle,
+                        <View style={styling.modalHandle}>
+                            <View style={handleDotStyle} />
+                        </View>
+                    )}
+                    <View style={styling.flexer}>
+                        <DodgeKeyboard
+                            offset={keyboardDodgingOffset}
+                            disabled={!sameIndex || disableDodging}
+                            checkIfElementIsFocused={__checkIfElementIsFocused}
+                            onHandleDodging={({ liftUp, keyboardEvent }) => {
+                                quicklyDodgeKeyboard(liftUp, keyboardEvent);
+                                setDodgeOffset(liftUp);
+                            }}>
+                            {ReactHijacker({
+                                children,
+                                enableLocator: true,
+                                doHijack: (node, path) => {
+                                    if (node?.props?.snap_sheet_scan_off || node?.props?.__checking_snap_scrollable)
+                                        return createHijackedElement(node);
+
+                                    if (!isScrollable(node)) return;
+
+                                    const renderer = () => {
+                                        const instanceId = useMemo(() => `${++instanceIdIterator.current}`, []);
+
+                                        const initNode = () => {
+                                            if (!scrollRefObj.current[instanceId])
+                                                scrollRefObj.current[instanceId] = { scrollY: 0, location: path };
+                                            const thisAnchorId = node.props?.snap_sheet_scroll_anchor;
+
+                                            if (scrollRefObj.current[instanceId].anchorId !== thisAnchorId) {
+                                                scheduleAnchorUpdate(300);
+                                            }
+                                            scrollRefObj.current[instanceId].anchorId = thisAnchorId;
                                         }
-                                        scrollRefObj.current[instanceId].anchorId = thisAnchorId;
-                                    }
-                                    initNode();
+                                        initNode();
 
-                                    return {
-                                        props: {
+                                        const newProps = {
                                             ...node?.props,
+                                            __checking_snap_scrollable: true,
                                             ...disableDodging ? {} : { ['dodge_keyboard_scrollable']: true },
                                             ref: r => {
                                                 if (r) {
@@ -347,19 +401,32 @@ const SnapSheet = forwardRef(function SnapSheet({
                                                 onAnchorScroll(e, instanceId);
                                                 return node.props?.onScroll?.(e);
                                             }
-                                        }
+                                        };
+
+                                        return cloneElement(node, newProps);
                                     }
+
+                                    return createHijackedElement(
+                                        <__HijackNode>
+                                            {renderer}
+                                        </__HijackNode>
+                                    );
                                 }
-                            }
-                        })}
-                    </DodgeKeyboard>
-                </View>
-            </Animated.View>
-            {isLift ?
-                <View
-                    ref={bottomFakePlaceholderRef}
-                    style={styling.fakePlaceholder}
-                    onLayout={updateKeyboardOffset} /> : null}
+                            })}
+                            {isLift ?
+                                <View
+                                    ref={r => {
+                                        if (r) {
+                                            r[CheckFocusedNode] = true;
+                                        }
+                                    }}
+                                    dodge_keyboard_input
+                                    style={styling.fakePlaceholder}
+                                /> : null}
+                        </DodgeKeyboard>
+                    </View>
+                </Animated.View>
+            </View>
         </View>
     );
 });

package/src/snapsheet_modal.js

@@ -1,6 +1,6 @@
-import { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
-import { isDodgeInput, ReactHijacker } from "react-native-dodge-keyboard";
+import { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, cloneElement } from "react";
+import { Pressable, StyleSheet, View, PixelRatio } from "react-native";
+import { createHijackedElement, isDodgeInput, ReactHijacker, __HijackNode } from "react-native-dodge-keyboard";
 import { useBackButton } from "react-native-push-back";
 import { doRendable, isNumber } from "./utils";
 import { PortalContext } from "./provider";
@@ -8,7 +8,8 @@ import { styling } from "./styling";
 import SnapSheet from "./snapsheet";
 
 const ModalState = ['closed', 'middle', 'opened'];
-const CenteredSheetStyle = { width: 0 };
+const CenteredSheetStyle = { width: 0, height: 0 };
+const CheckFocusedNode = '__fakeSnapSheetModalFocused';
 
 export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
     onOpened,
@@ -29,6 +30,8 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
     children,
     ...restProps
 }, ref) {
+    const isLift = restProps?.keyboardDodgingBehaviour === 'whole';
+
     centered = !!centered;
     useMemo(() => {
         if (centered) {
@@ -37,6 +40,9 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
         }
     }, [centered]);
 
+    if (restProps.__checkIfElementIsFocused !== undefined && typeof restProps.__checkIfElementIsFocused !== 'function')
+        throw `expected '__checkIfElementIsFocused' to be a function but got ${restProps.__checkIfElementIsFocused}`;
+
     if (centered) {
         middleHeight = undefined;
         if (initialState === 'middle') initialState = 'opened';
@@ -90,7 +96,7 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
     const snapPoints = useMemo(() => {
         if (centered) {
             if (sizingReady)
-                return [-(contentHeight / 2), viewHeight / 2];
+                return [0, (viewHeight / 2) + (contentHeight / 2)];
             return [0, .3];
         } else return [0, ...isNumber(middleHeight) ? [middleHeight] : [], modalHeight];
     }, [viewHeight, contentHeight, centered, middleHeight, modalHeight]);
@@ -102,15 +108,23 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
     const sheetRef = useRef();
     const inputRefs = useRef({});
     const snapModal = useRef();
+    const lastIndexIntent = useRef({});
 
     snapModal.current = async (index, force) => {
+        if (disabled && !force) return;
+
         if (sizingReadyCaller.current.callback) {
             if (index && unMountChildrenWhenClosed && !releaseUnmount)
                 setReleaseUnmount(true);
+            const intent =
+                lastIndexIntent.current[index] === undefined
+                    ? (lastIndexIntent.current[index] = 0)
+                    : ++lastIndexIntent.current[index];
+
             await sizingReadyCaller.current.promise;
+            if (lastIndexIntent.current[index] !== intent) return;
         }
 
-        if (disabled && !force) return;
         if (index && !sheetRef.current && !autoIndexModal) {
             setAutoIndexModal(index);
         } else if (sheetRef.current) {
@@ -173,12 +187,13 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
 
     const centeredStyle = useMemo(() => centered ? ({
         position: 'absolute',
-        width: viewWidth || 0,
+        width: viewWidth,
         left: 0,
-        top: 0,
-        marginTop: -(contentHeight / 2) || 0
+        top: 0
     }) : undefined, [centered, contentHeight, viewWidth]);
 
+    const inputIdIterator = useRef(0);
+
     const renderChild = () =>
         <View
             style={styling.absoluteFill}
@@ -197,39 +212,56 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                         }} />
                 )}
             <ReactHijacker
-                doHijack={(node, path) => {
-                    if (isDodgeInput(node)) {
-                        const inputId = path.join('=>');
-
-                        return {
-                            props: {
-                                ...node.props,
-                                ref: r => {
-                                    if (r) {
-                                        inputRefs.current[inputId] = r;
-                                    } else if (inputRefs.current[inputId]) {
-                                        delete inputRefs.current[inputId];
-                                    }
-
-                                    const thatRef = node.props?.ref;
-                                    if (typeof thatRef === 'function') {
-                                        thatRef(r);
-                                    } else if (thatRef) thatRef.current = r;
+                doHijack={node => {
+                    // if (node?.props?.dodge_keyboard_scan_off)
+                    //     return createHijackedElement(node);
+                    if (!isDodgeInput(node)) return;
+
+                    const renderer = () => {
+                        const inputId = useMemo(() => `${++inputIdIterator.current}`, []);
+
+                        const newProps = {
+                            ...node.props,
+                            ref: r => {
+                                if (r) {
+                                    inputRefs.current[inputId] = r;
+                                } else if (inputRefs.current[inputId]) {
+                                    delete inputRefs.current[inputId];
                                 }
+
+                                const thatRef = node.props?.ref;
+                                if (typeof thatRef === 'function') {
+                                    thatRef(r);
+                                } else if (thatRef) thatRef.current = r;
                             }
                         };
+
+                        return cloneElement(node, newProps);
                     }
+
+                    return createHijackedElement(
+                        <__HijackNode>
+                            {renderer}
+                        </__HijackNode>
+                    );
                 }}>
                 <SnapSheet
                     {...restProps}
+                    minSnapIndex={0}
                     ref={sheetRef}
                     snapPoints={snapPoints}
-                    {...hasClosed ? { keyboardDodgingBehaviour: 'off' } : {}}
                     {...centered ? {
                         style: CenteredSheetStyle,
-                        renderHandle: null
+                        renderHandle: null,
+                        ...isLift ? {
+                            __checkIfElementIsFocused: (r, refs) => {
+                                const realChecker = restProps?.__checkIfElementIsFocused;
+                                return !!r?.[CheckFocusedNode] && refs.some(v => realChecker ? realChecker?.(v) : v?.isFocused?.());
+                            },
+                            keyboardDodgingBehaviour: 'optimum'
+                        } : {}
                     } : {}}
-                    __shaky_sheet={centered}
+                    {...hasClosed ? { keyboardDodgingBehaviour: 'off' } : {}}
                     initialSnapIndex={Math.min(ModalState.indexOf(currentState), centered ? 1 : 2)}
                     disabled={centered || disabled || disablePanGesture}
                     onSnapFinish={i => {
@@ -240,14 +272,34 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                     }}>
                     {(hasClosed && (!releaseUnmount && unMountChildrenWhenClosed))
                         ? null :
-                        <View style={centered ? centeredStyle : styling.flexer}>
-                            <View
-                                style={centered ? restProps.style : styling.flexer}
-                                onLayout={e => {
-                                    if (centered) setContentHeight(e.nativeEvent.layout.height);
-                                }}>
+                        <View
+                            style={centered ? centeredStyle : styling.flexer}
+                            onLayout={e => {
+                                if (centered) {
+                                    const h = e.nativeEvent.layout.height;
+
+                                    if (contentHeight === undefined)
+                                        return setContentHeight(PixelRatio.roundToNearestPixel(h));
+
+                                    const pixel = PixelRatio.roundToNearestPixel(h);
+
+                                    if (Math.abs(contentHeight - pixel) >= 1)
+                                        setContentHeight(pixel);
+                                }
+                            }}>
+                            <View style={centered ? restProps.style : styling.flexer}>
                                 {children}
                             </View>
+                            {isLift ?
+                                <View
+                                    ref={r => {
+                                        if (r) {
+                                            r[CheckFocusedNode] = true;
+                                        }
+                                    }}
+                                    dodge_keyboard_input
+                                    style={styling.fakePlaceholder}
+                                /> : null}
                         </View>}
                 </SnapSheet>
             </ReactHijacker>
@@ -257,15 +309,15 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
         const flatStyle = StyleSheet.flatten(containerStyle);
 
         return {
+            zIndex: hasClosed ? -99 : isNumber(flatStyle?.zIndex) ? flatStyle?.zIndex : 9999,
+            elevation: hasClosed ? 0 : isNumber(flatStyle?.elevation) ? flatStyle?.elevation : 9999,
+            ...hasClosed ? { opacity: 0, display: 'none' } : {},
             ...flatStyle,
             position: 'absolute',
             width: '100%',
             height: '100%',
             top: 0,
-            left: 0,
-            zIndex: hasClosed ? -99 : isNumber(flatStyle?.zIndex) ? flatStyle?.zIndex : 9999,
-            elevation: hasClosed ? 0 : isNumber(flatStyle?.elevation) ? flatStyle?.elevation : 9999,
-            ...hasClosed ? { opacity: 0 } : {}
+            left: 0
         };
     }, [containerStyle, hasClosed]);
 

package/src/utils.js

@@ -1,4 +1,6 @@
 
 export const doRendable = (e, d) => e === undefined ? d : typeof e === 'function' ? e() : e;
 
-export const isNumber = t => typeof t === 'number' && !isNaN(t) && Number.isFinite(t);
+export const isNumber = t => typeof t === 'number' && !isNaN(t) && Number.isFinite(t);
+
+export const isPositiveNumber = t => isNumber(t) && t >= 0;