react-native-snap-sheet 1.0.3 → 1.0.5

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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-snap-sheet",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "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.3",
+    "react-native-dodge-keyboard": "^1.0.5",
     "react-native-push-back": "^1.0.0"
   }
 }

package/src/snapsheet.js

@@ -20,13 +20,12 @@ const SnapSheet = forwardRef(function SnapSheet({
     renderHandle,
     handleColor,
     keyboardDodgingBehaviour = 'optimum',
-    keyboardDodgingOffset = 10,
+    keyboardDodgingOffset,
     children,
     disabled,
     currentAnchorId,
     __checkIfElementIsFocused,
-    __loosenMinSnap,
-    __shaky_sheet
+    __loosenMinSnap
 }, ref) {
     const isLift = keyboardDodgingBehaviour === 'whole';
 
@@ -53,9 +52,20 @@ const SnapSheet = forwardRef(function SnapSheet({
     if (__checkIfElementIsFocused !== undefined && typeof __checkIfElementIsFocused !== 'function')
         throw `expected '__checkIfElementIsFocused' to be a function but got ${__checkIfElementIsFocused}`;
 
-    if (isLift) __checkIfElementIsFocused = r => !!r?.[CheckFocusedNode];
+    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);
@@ -82,15 +92,15 @@ const SnapSheet = forwardRef(function SnapSheet({
             ? PotentialHeight
             : snapPoints.slice(-1)[0] - snapPoints[0];
 
-    const snapTranslateValues = useMemo(() => snapPoints.map(h => h - MODAL_HEIGHT), [snapPointsKey]);
+    const snapTranslateValues = useMemo(() => snapPoints.map(h => MODAL_HEIGHT - h), [snapPointsKey]);
 
-    const bottomY = useAnimatedValue(snapTranslateValues[initialSnapIndex]);
+    const translateY = useAnimatedValue(snapTranslateValues[initialSnapIndex]);
 
     /**
      * @type {import("react").RefObject<{[key: string]: { ref: import('react-native').ScrollView, scrollY: 0, location: number[], anchorId: boolean }}>}
      */
     const scrollRefObj = useRef({});
-    const lastOffset = useRef(bottomY._value);
+    const lastOffset = useRef(translateY._value);
     const lastSnapIndex = useRef(initialSnapIndex);
     const instantPrefferAnchor = useRef();
     instantPrefferAnchor.current = prefferedAnchor;
@@ -102,7 +112,7 @@ const SnapSheet = forwardRef(function SnapSheet({
     instantScrollEnabled.current = scrollEnabled;
 
     const getCurrentSnap = (draggingUpward) => {
-        const shownHeight = bottomY._value + MODAL_HEIGHT;
+        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]));
 
@@ -121,10 +131,7 @@ const SnapSheet = forwardRef(function SnapSheet({
 
         const newY = snapTranslateValues[index];
 
-        if (__shaky_sheet && lastOffset.current !== newY)
-            bottomY.setValue(lastOffset.current);
-
-        const prevY = bottomY._value;
+        const prevY = translateY._value;
         setScrollEnabled(index === snapPoints.length - 1);
         setCurrentIndex(index);
 
@@ -141,9 +148,9 @@ 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(bottomY, {
+        Animated.spring(translateY, {
             velocity,
             toValue: newY,
             useNativeDriver: true
@@ -165,7 +172,7 @@ const SnapSheet = forwardRef(function SnapSheet({
     }));
 
     useEffect(() => {
-        snapToIndex.current(Math.min(lastSnapIndex.current, snapPoints.length - 1), true);
+        if (!isLifting.current) snapToIndex.current(Math.min(lastSnapIndex.current, snapPoints.length - 1), true);
     }, [snapPointsKey]);
 
     const panResponder = useMemo(() => {
@@ -191,11 +198,11 @@ const SnapSheet = forwardRef(function SnapSheet({
                 const newY = gesture.dy + lastOffset.current;
 
                 if (
-                    newY < snapTranslateValues[__loosenMinSnap ? 0 : minSnapIndex] ||
-                    newY > snapTranslateValues.slice(-1)[0]
+                    newY > snapTranslateValues[__loosenMinSnap ? 0 : minSnapIndex] ||
+                    newY < snapTranslateValues.slice(-1)[0]
                 ) return;
 
-                bottomY.setValue(newY);
+                translateY.setValue(newY);
             },
             onPanResponderRelease: (_, gesture) => {
                 const { dy, vy } = gesture; // when vy is lesser, it is scroll up
@@ -234,15 +241,13 @@ const SnapSheet = forwardRef(function SnapSheet({
         const { height, minHeight, maxHeight, ...rest } = flattenStyle;
 
         return {
-            position: "absolute",
-            width: "100%",
             backgroundColor: "#fff",
             borderTopLeftRadius: 25,
             borderTopRightRadius: 25,
             zIndex: 1,
             height: (Object.hasOwn(flattenStyle, 'height') && height === undefined) ? undefined : MODAL_HEIGHT,
             ...rest,
-            bottom: bottomY
+            transform: [{ translateY }]
         };
     }, [snapPointsKey, style]);
 
@@ -303,97 +308,139 @@ const SnapSheet = forwardRef(function SnapSheet({
     const sameIndex = currentIndex === finishedIndex;
 
     const instanceIdIterator = useRef(0);
+    const prevKE = useRef();
+    const prevLiftOffset = useRef(0);
+    const isLifting = useRef();
+
+    const quicklyDodgeKeyboard = (offset, keyboardEvent) => {
+        // console.log('quicklyDodgeKeyboard offset:', offset, ' keyboardEvent:', keyboardEvent);
+
+        if (!keyboardEvent) {
+            if (!(keyboardEvent = prevKE.current)) {
+                prevLiftOffset.current = offset;
+                return;
+            }
+        }
+        if (keyboardEvent.endCoordinates.height) {
+            prevKE.current = keyboardEvent;
+        } else {
+            if (prevKE.current) keyboardEvent = prevKE.current;
+        }
+
+        if (prevLiftOffset.current === offset) return;
+        prevLiftOffset.current = offset;
+
+        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);
+        isLifting.current = true;
+        Animated.timing(translateY, {
+            duration: Math.max((newDuration || 0) - 70, 0),
+            toValue: newPosY,
+            useNativeDriver: false
+        }).start(() => {
+            if (offset === prevLiftOffset.current) {
+                isLifting.current = false;
+                setDodgeOffset(offset);
+            }
+        });
+    }
 
     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}
-                        checkIfElementIsFocused={__checkIfElementIsFocused}
-                        onHandleDodging={({ liftUp }) => {
-                            setDodgeOffset(liftUp);
-                        }}>
-                        {ReactHijacker({
-                            children,
-                            enableLocator: true,
-                            doHijack: (node, path) => {
-                                if (node?.props?.['snap_sheet_scan_off'] || node?.props?.__checking_snap_scrollable) return;
-                                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);
+            <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);
+                            }}>
+                            {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();
-
-                                    const newProps = {
-                                        ...node?.props,
-                                        __checking_snap_scrollable: true,
-                                        ...disableDodging ? {} : { ['dodge_keyboard_scrollable']: true },
-                                        ref: r => {
-                                            if (r) {
-                                                initNode();
-                                                // if (scrollRefObj.current[instanceId].ref !== r) scheduleAnchorUpdate();
-                                                scrollRefObj.current[instanceId].ref = r;
-                                            } else if (scrollRefObj.current[instanceId]) {
-                                                delete scrollRefObj.current[instanceId];
-                                                scheduleAnchorUpdate();
+                                        initNode();
+
+                                        const newProps = {
+                                            ...node?.props,
+                                            __checking_snap_scrollable: true,
+                                            ...disableDodging ? {} : { ['dodge_keyboard_scrollable']: true },
+                                            ref: r => {
+                                                if (r) {
+                                                    initNode();
+                                                    // if (scrollRefObj.current[instanceId].ref !== r) scheduleAnchorUpdate();
+                                                    scrollRefObj.current[instanceId].ref = r;
+                                                } else if (scrollRefObj.current[instanceId]) {
+                                                    delete scrollRefObj.current[instanceId];
+                                                    scheduleAnchorUpdate();
+                                                }
+
+                                                const thatRef = node.props?.ref;
+                                                if (typeof thatRef === 'function') {
+                                                    thatRef(r);
+                                                } else if (thatRef) thatRef.current = r;
+                                            },
+                                            ...prefferedAnchor === instanceId ? { scrollEnabled } : {},
+                                            onScroll: (e) => {
+                                                onAnchorScroll(e, instanceId);
+                                                return node.props?.onScroll?.(e);
                                             }
+                                        };
 
-                                            const thatRef = node.props?.ref;
-                                            if (typeof thatRef === 'function') {
-                                                thatRef(r);
-                                            } else if (thatRef) thatRef.current = r;
-                                        },
-                                        ...prefferedAnchor === instanceId ? { scrollEnabled } : {},
-                                        onScroll: (e) => {
-                                            onAnchorScroll(e, instanceId);
-                                            return node.props?.onScroll?.(e);
-                                        }
-                                    };
+                                        return cloneElement(node, newProps);
+                                    }
 
-                                    return cloneElement(node, newProps);
+                                    return createHijackedElement(
+                                        <__HijackNode>
+                                            {renderer}
+                                        </__HijackNode>
+                                    );
                                 }
-
-                                return createHijackedElement(
-                                    <__HijackNode>
-                                        {renderer}
-                                    </__HijackNode>
-                                );
-                            }
-                        })}
-                        {isLift ?
-                            <View
-                                ref={r => {
-                                    if (r) {
-                                        r[CheckFocusedNode] = true;
-                                    }
-                                }}
-                                dodge_keyboard_input
-                                style={styling.fakePlaceholder}
-                            /> : null}
-                    </DodgeKeyboard>
-                </View>
-            </Animated.View>
+                            })}
+                            {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

@@ -8,7 +8,7 @@ import { styling } from "./styling";
 import SnapSheet from "./snapsheet";
 
 const ModalState = ['closed', 'middle', 'opened'];
-const CenteredSheetStyle = { width: 0, height: undefined };
+const CenteredSheetStyle = { width: 0, height: 0 };
 const CheckFocusedNode = '__fakeSnapSheetModalFocused';
 
 export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
@@ -40,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';
@@ -105,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) {
@@ -202,6 +213,8 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                 )}
             <ReactHijacker
                 doHijack={node => {
+                    // if (node?.props?.dodge_keyboard_scan_off)
+                    //     return createHijackedElement(node);
                     if (!isDodgeInput(node)) return;
 
                     const renderer = () => {
@@ -240,9 +253,11 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                     {...centered ? {
                         style: CenteredSheetStyle,
                         renderHandle: null,
-                        __shaky_sheet: true,
                         ...isLift ? {
-                            __checkIfElementIsFocused: r => !!r?.[CheckFocusedNode],
+                            __checkIfElementIsFocused: (r, refs) => {
+                                const realChecker = restProps?.__checkIfElementIsFocused;
+                                return !!r?.[CheckFocusedNode] && refs.some(v => realChecker ? realChecker?.(v) : v?.isFocused?.());
+                            },
                             keyboardDodgingBehaviour: 'optimum'
                         } : {}
                     } : {}}
@@ -294,15 +309,15 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
         const flatStyle = StyleSheet.flatten(containerStyle);
 
         return {
+            zIndex: hasClosed ? -99 : 9999,
+            elevation: hasClosed ? 0 : 9999,
+            ...hasClosed ? { opacity: 0 } : {},
             ...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]);