react-native-snap-sheet 1.0.4 → 1.0.6

package/package.json

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

package/src/snapsheet.js

@@ -172,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(() => {
@@ -309,9 +309,13 @@ const SnapSheet = forwardRef(function SnapSheet({
 
     const instanceIdIterator = useRef(0);
     const prevKE = useRef();
+    const isLifting = useRef();
+    const lastLiftInstance = useRef(0);
+
+    const quicklyDodgeKeyboard = async (event) => {
+        let { liftUp, keyboardEvent } = event;
+        // console.log('quicklyDodgeKeyboard event:', event);
 
-    const quicklyDodgeKeyboard = (offset, keyboardEvent) => {
-        // console.log('quicklyDodgeKeyboard offset:', offset, ' keyboardEvent:', keyboardEvent);
         if (!keyboardEvent) {
             if (!(keyboardEvent = prevKE.current)) return;
         }
@@ -320,16 +324,27 @@ const SnapSheet = forwardRef(function SnapSheet({
         } else {
             if (prevKE.current) keyboardEvent = prevKE.current;
         }
+        const thisRef = ++lastLiftInstance.current;
+
+        const kh = keyboardEvent?.endCoordinates?.height || 0;
+        const realSnapPoint = initSnapPoints[lastSnapIndex.current];
 
-        const newPosY = MODAL_HEIGHT - (initSnapPoints[lastSnapIndex.current] + offset);
-        const newDuration = (Math.abs(newPosY - translateY._value) * keyboardEvent.duration) / keyboardEvent?.endCoordinates.height;
+        const newY = liftUp ? translateY._value - liftUp : (MODAL_HEIGHT - realSnapPoint);
+        const newDodgeOffset = (MODAL_HEIGHT - newY) - realSnapPoint;
+        const newDuration = kh > 0 ? (Math.min(Math.abs(liftUp), kh) / kh) * keyboardEvent.duration : 0;
 
-        // console.log('newPosY:', newPosY, ' timing newDuration:', newDuration);
+        // console.log('newPosY:', newY, ' timing newDuration:', newDuration, ' newDodgeOffset:', newDodgeOffset);
+        isLifting.current = true;
         Animated.timing(translateY, {
-            duration: newDuration || 0,
-            toValue: newPosY,
+            duration: Math.max((newDuration || 0) - 70, 0),
+            toValue: newY,
             useNativeDriver: true
-        }).start();
+        }).start(() => {
+            if (thisRef === lastLiftInstance.current) {
+                isLifting.current = false;
+                setDodgeOffset(newDodgeOffset);
+            }
+        });
     }
 
     return (
@@ -349,10 +364,7 @@ const SnapSheet = forwardRef(function SnapSheet({
                             offset={keyboardDodgingOffset}
                             disabled={!sameIndex || disableDodging}
                             checkIfElementIsFocused={__checkIfElementIsFocused}
-                            onHandleDodging={({ liftUp, keyboardEvent }) => {
-                                quicklyDodgeKeyboard(liftUp, keyboardEvent);
-                                setDodgeOffset(liftUp);
-                            }}>
+                            onHandleDodging={quicklyDodgeKeyboard}>
                             {ReactHijacker({
                                 children,
                                 enableLocator: true,
@@ -421,6 +433,7 @@ const SnapSheet = forwardRef(function SnapSheet({
                                         }
                                     }}
                                     dodge_keyboard_input
+                                    dodge_keyboard_clipping
                                     style={styling.fakePlaceholder}
                                 /> : null}
                         </DodgeKeyboard>

package/src/snapsheet_modal.js

@@ -256,7 +256,9 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                         ...isLift ? {
                             __checkIfElementIsFocused: (r, refs) => {
                                 const realChecker = restProps?.__checkIfElementIsFocused;
-                                return !!r?.[CheckFocusedNode] && refs.some(v => realChecker ? realChecker?.(v) : v?.isFocused?.());
+                                return !!r?.[CheckFocusedNode] &&
+                                    !willClose &&
+                                    refs.some(v => realChecker ? realChecker?.(v) : v?.isFocused?.());
                             },
                             keyboardDodgingBehaviour: 'optimum'
                         } : {}
@@ -298,6 +300,7 @@ export const SnapSheetModalBase = forwardRef(function SnapSheetModalBase({
                                         }
                                     }}
                                     dodge_keyboard_input
+                                    dodge_keyboard_clipping
                                     style={styling.fakePlaceholder}
                                 /> : null}
                         </View>}
@@ -309,9 +312,9 @@ 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' } : {},
+            zIndex: hasClosed ? -99 : 9999,
+            elevation: hasClosed ? 0 : 9999,
+            ...hasClosed ? { opacity: 0 } : {},
             ...flatStyle,
             position: 'absolute',
             width: '100%',