feat: added enableBlurKeyboardOnGesture prop to handle blurring keyboard on gesture

Author: gorhom

example/src/screens/advanced/KeyboardHandlingExample.tsx

@@ -1,12 +1,12 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { View, StyleSheet } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Button } from '../../components/button';
+import { ContactList } from '../../components/contactList';
 import {
-  SearchHandle,
   SEARCH_HANDLE_HEIGHT,
+  SearchHandle,
 } from '../../components/searchHandle';
-import { Button } from '../../components/button';
-import { ContactList } from '../../components/contactList';
 
 const KeyboardHandlingExample = () => {
   // state
@@ -16,6 +16,7 @@ const KeyboardHandlingExample = () => {
   const [keyboardBlurBehavior, setKeyboardBlurBehavior] = useState<
     'none' | 'restore'
   >('none');
+  const [blurKeyboardOnGesture, setBlurKeyboardOnGesture] = useState(false);
 
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
@@ -46,6 +47,9 @@ const KeyboardHandlingExample = () => {
       }
     });
   }, []);
+  const handleToggleBlurKeyboardOnGesture = useCallback(() => {
+    setBlurKeyboardOnGesture(state => !state);
+  }, []);
   const handleExpandPress = useCallback(() => {
     bottomSheetRef.current?.expand();
   }, []);
@@ -67,6 +71,10 @@ const KeyboardHandlingExample = () => {
         label={`Toggle Keyboard Blur Behavior: ${keyboardBlurBehavior}`}
         onPress={handleToggleKeyboardBlurBehavior}
       />
+      <Button
+        label={`Toggle Blur Keyboard On Gesture: ${blurKeyboardOnGesture}`}
+        onPress={handleToggleBlurKeyboardOnGesture}
+      />
       <Button label="Expand" onPress={handleExpandPress} />
       <Button label="Collapse" onPress={handleCollapsePress} />
       <Button label="Close" onPress={handleClosePress} />
@@ -76,6 +84,7 @@ const KeyboardHandlingExample = () => {
         enableDynamicSizing={false}
         keyboardBehavior={keyboardBehavior}
         keyboardBlurBehavior={keyboardBlurBehavior}
+        enableBlurKeyboardOnGesture={blurKeyboardOnGesture}
         handleComponent={SearchHandle}
       >
         <ContactList count={12} type="FlatList" />

src/components/bottomSheet/BottomSheet.tsx

@@ -69,6 +69,7 @@ import {
   DEFAULT_ACCESSIBLE,
   DEFAULT_ANIMATE_ON_MOUNT,
   DEFAULT_DYNAMIC_SIZING,
+  DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE,
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
   DEFAULT_ENABLE_OVER_DRAG,
   DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
@@ -125,6 +126,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       keyboardBehavior = DEFAULT_KEYBOARD_BEHAVIOR,
       keyboardBlurBehavior = DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
       android_keyboardInputMode = DEFAULT_KEYBOARD_INPUT_MODE,
+      enableBlurKeyboardOnGesture = DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE,
 
       // layout
       containerHeight: _providedContainerHeight,
@@ -1393,6 +1395,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         activeOffsetY: _providedActiveOffsetY,
         failOffsetX: _providedFailOffsetX,
         failOffsetY: _providedFailOffsetY,
+        enableBlurKeyboardOnGesture,
         animateToPosition,
         stopAnimation,
         setScrollableRef,
@@ -1428,6 +1431,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         enableOverDrag,
         enablePanDownToClose,
         enableDynamicSizing,
+        enableBlurKeyboardOnGesture,
         _providedSimultaneousHandlers,
         _providedWaitFor,
         _providedActiveOffsetX,

src/components/bottomSheet/constants.ts

@@ -19,6 +19,7 @@ const DEFAULT_DYNAMIC_SIZING = true;
 const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;
 const DEFAULT_KEYBOARD_BLUR_BEHAVIOR = KEYBOARD_BLUR_BEHAVIOR.none;
 const DEFAULT_KEYBOARD_INPUT_MODE = KEYBOARD_INPUT_MODE.adjustPan;
+const DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE = false;
 
 // initial values
 const INITIAL_VALUE = Number.NEGATIVE_INFINITY;
@@ -51,6 +52,7 @@ export {
   DEFAULT_KEYBOARD_BEHAVIOR,
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
   DEFAULT_KEYBOARD_INPUT_MODE,
+  DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE,
   // layout
   INITIAL_POSITION,
   INITIAL_CONTAINER_HEIGHT,

src/components/bottomSheet/types.d.ts

@@ -161,6 +161,11 @@ export interface BottomSheetProps
    * - `restore`: restore sheet position.
    */
   keyboardBlurBehavior?: keyof typeof KEYBOARD_BLUR_BEHAVIOR;
+  /**
+   * Enable blurring the keyboard when user start to drag the bottom sheet.
+   * @default false
+   */
+  enableBlurKeyboardOnGesture?: boolean;
   /**
    * Defines keyboard input mode for Android only.
    * @link {https://developer.android.com/guide/topics/manifest/activity-element#wsoft}

src/contexts/internal.ts

@@ -24,6 +24,7 @@ export interface BottomSheetInternalContextType
         | 'enableOverDrag'
         | 'enablePanDownToClose'
         | 'enableDynamicSizing'
+        | 'enableBlurKeyboardOnGesture'
         | 'overDragResistanceFactor'
       >
     > {

src/hooks/useGestureEventsHandlersDefault.tsx

@@ -59,6 +59,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
       overDragResistanceFactor,
       isInTemporaryPosition,
       isScrollableRefreshable,
+      enableBlurKeyboardOnGesture,
       animateToPosition,
       stopAnimation,
     } = useBottomSheetInternal();
@@ -74,6 +75,16 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
         // cancel current animation
         stopAnimation();
 
+        let initialKeyboardState = animatedKeyboardState.value;
+        // blur the keyboard when user start dragging the bottom sheet
+        if (
+          enableBlurKeyboardOnGesture &&
+          initialKeyboardState === KEYBOARD_STATE.SHOWN
+        ) {
+          initialKeyboardState = KEYBOARD_STATE.HIDDEN;
+          runOnJS(dismissKeyboard)();
+        }
+
         // store current animated position
         context.value = {
           ...context.value,
@@ -94,6 +105,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
       },
       [
         stopAnimation,
+        enableBlurKeyboardOnGesture,
         animatedPosition,
         animatedKeyboardState,
         animatedScrollableContentOffsetY,

website/docs/guides/keyboard-handling.mdx

@@ -11,7 +11,7 @@ Keyboard handling is one of the main feature of `BottomSheet v4`, thanks to the
 
 To handle the keyboard appearance, I have simplified the approach by creating a pre-integrated `TextInput` called [BottomSheetTextInput](./components/bottomsheettextinput), which communicate internally to react to the keyboard appearance.
 
-Also I have introduce two props to allow users to customize the handling, [keyboardBehavior](./props#keyboardbehavior), [keyboardBlurBehavior](./props#keyboardblurbehavior) and [android_keyboardInputMode](./props#android_keyboardinputmode) that is only for `Android`.
+Also I have introduce two props to allow users to customize the handling, [keyboardBehavior](./props#keyboardbehavior), [keyboardBlurBehavior](./props#keyboardblurbehavior), [enableBlurKeyboardOnGesture](./props#enableblurkeyboardongesture) and [android_keyboardInputMode](./props#android_keyboardinputmode) that is only for `Android`.
 
 :::tip
 To use custom `TextInput`, you will need to copy the `handleOnFocus` and `handleOnBlur` from [BottomSheetTextInput](https://github.com/gorhom/react-native-bottom-sheet/blob/master/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx) into your own component.

website/docs/props.md

@@ -238,6 +238,14 @@ Defines the keyboard blur behavior.
 | ------------------- | ------- | -------- |
 | 'none' \| 'restore' | 'none'  | NO       |
 
+### enableBlurKeyboardOnGesture
+
+Enable blurring the keyboard when user start to drag the bottom sheet.
+
+| type    | default | required |
+| ------- | ------- | -------- |
+| boolean | false    | NO       |
+
 ### android_keyboardInputMode
 
 Defines keyboard input mode for `Android` only, [learn more](https://developer.android.com/guide/topics/manifest/activity-element#wsoft).