fix: prevent keyboard change to snap sheet while user is interacting

gorhom · Aug 18, 2021 · dd632b0 · dd632b0
1 parent 73decd3
commit dd632b0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/example/src/screens/advanced/KeyboardHandlingExample.tsx b/example/src/screens/advanced/KeyboardHandlingExample.tsx
@@ -9,10 +9,12 @@ import ContactList from '../../components/contactList';
 
 const KeyboardHandlingExample = () => {
   // state
-  const [keyboardBehavior, setKeyboardBehavior] =
-    useState<'extend' | 'fillParent' | 'interactive'>('interactive');
-  const [keyboardBlurBehavior, setKeyboardBlurBehavior] =
-    useState<'none' | 'restore'>('none');
+  const [keyboardBehavior, setKeyboardBehavior] = useState<
+    'extend' | 'fillParent' | 'interactive'
+  >('interactive');
+  const [keyboardBlurBehavior, setKeyboardBlurBehavior] = useState<
+    'none' | 'restore'
+  >('none');
 
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -1272,9 +1272,25 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     useAnimatedReaction(
       () => animatedKeyboardState.value,
       (_keyboardState, _previousKeyboardState) => {
+        const hasActiveGesture =
+          animatedContentGestureState.value === State.ACTIVE ||
+          animatedContentGestureState.value === State.BEGAN ||
+          animatedHandleGestureState.value === State.ACTIVE ||
+          animatedHandleGestureState.value === State.BEGAN;
+
         if (
-          !isAnimatedOnMount.value ||
+          /**
+           * if keyboard state is equal to the previous state, then exit the method
+           */
           _keyboardState === _previousKeyboardState ||
+          /**
+           * if user is interacting with sheet, then exit the method
+           */
+          hasActiveGesture ||
+          /**
+           * if sheet not animated on mount yet, then exit the method
+           */
+          !isAnimatedOnMount.value ||
           /**
            * if new keyboard state is hidden and blur behavior is none, then exit the method
            */