Merge pull request #4 from guideline-tech/upstream-sync-5.1.2

Upstream sync 5.1.2

Author: rtturner

CHANGELOG.md

@@ -1,5 +1,32 @@
 
 
+## [5.1.2](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.1...v5.1.2) (2025-03-09)
+
+
+### Bug Fixes
+
+* **#2163:** restart closing animation when container height get updated ([4ed9f3c](https://github.com/gorhom/react-native-bottom-sheet/commit/4ed9f3cb542316a984893efa2025ca5384ffe89a)), closes [#2163](https://github.com/gorhom/react-native-bottom-sheet/issues/2163)
+* **#2177:** set absolute fill to backdrop default style ([979ba7c](https://github.com/gorhom/react-native-bottom-sheet/commit/979ba7ce0b9d69abfaefd169ee692bf818fa4d0d)), closes [#2177](https://github.com/gorhom/react-native-bottom-sheet/issues/2177)
+
+## [5.1.1](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.0...v5.1.1) (2025-02-09)
+
+
+### Bug Fixes
+
+* **#2043:** handle unnecessary invocation of index side effect ([#2073](https://github.com/gorhom/react-native-bottom-sheet/issues/2073))(inspired by @IslamRustamov) ([2164c02](https://github.com/gorhom/react-native-bottom-sheet/commit/2164c02e63177f9ac69acc05722c85e8d55cd931)), closes [#2043](https://github.com/gorhom/react-native-bottom-sheet/issues/2043)
+
+# [5.1.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.6...v5.1.0) (2025-02-06)
+
+
+### Bug Fixes
+
+* **#2129:** fixed initial isAnimatedOnMount value ([0850cb8](https://github.com/gorhom/react-native-bottom-sheet/commit/0850cb864819f79189592cb66c2b6d179957ba61))
+
+
+### Features
+
+* added enableBlurKeyboardOnGesture prop to handle blurring keyboard on gesture ([1c31aca](https://github.com/gorhom/react-native-bottom-sheet/commit/1c31acad50a7c171548ea7f4594a4d1d563cf40f))
+
 ## [5.0.6](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.5...v5.0.6) (2024-11-17)
 
 

example/app.json

@@ -12,7 +12,7 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#000"
+      "backgroundColor": "#000000"
     },
     "assetBundlePatterns": ["**/*"],
     "ios": {
@@ -22,7 +22,7 @@
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#000"
+        "backgroundColor": "#000000"
       },
       "package": "dev.gorhom.bottomsheet",
       "softwareKeyboardLayoutMode": "pan"

example/package.json

@@ -16,22 +16,22 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "^6.3.20",
-    "@shopify/flash-list": "1.7.1",
-    "expo": "^52.0.7",
-    "expo-asset": "~11.0.1",
-    "expo-blur": "~14.0.1",
-    "expo-image": "~2.0.0",
-    "expo-status-bar": "~2.0.0",
+    "@shopify/flash-list": "1.7.3",
+    "expo": "~52.0.36",
+    "expo-asset": "~11.0.4",
+    "expo-blur": "~14.0.3",
+    "expo-image": "~2.0.6",
+    "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.2",
+    "react-native": "0.76.7",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-maps": "1.18.0",
-    "react-native-pager-view": "6.4.1",
+    "react-native-pager-view": "6.5.1",
     "react-native-reanimated": "~3.16.1",
     "react-native-redash": "^18.1.0",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.1.0",
+    "react-native-screens": "~4.4.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-web": "~0.19.13"
   },
@@ -41,6 +41,7 @@
     "@types/faker": "^4.1.12",
     "@types/react": "~18.3.12",
     "@types/react-native": "^0.73.0",
+    "babel-loader": "^10.0.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "faker": "^4.1.0",
     "typescript": "^5.3.3"

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" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gorhom/bottom-sheet",
-  "version": "5.0.6",
+  "version": "5.1.2",
   "description": "A performant interactive bottom sheet with fully configurable options 🚀",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/bottomSheet/BottomSheet.tsx

@@ -47,6 +47,7 @@ import {
   usePropsValidator,
   useReactiveSharedValue,
   useScrollable,
+  useStableCallback,
 } from '../../hooks';
 import type { BottomSheetMethods } from '../../types';
 import {
@@ -69,6 +70,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 +127,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,
@@ -245,7 +248,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const animatedNextPositionIndex = useSharedValue(INITIAL_VALUE);
 
     // conditional
-    const isAnimatedOnMount = useSharedValue(false);
+    const isAnimatedOnMount = useSharedValue(
+      !animateOnMount || _providedIndex === -1
+    );
     const isContentHeightFixed = useSharedValue(false);
     const isLayoutCalculated = useDerivedValue(() => {
       let isContainerHeightCalculated = false;
@@ -674,6 +679,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             params: {
               currentPosition: animatedPosition.value,
               nextPosition: position,
+              source,
             },
           });
         }
@@ -1017,68 +1023,56 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region public methods
-    // biome-ignore lint/correctness/useExhaustiveDependencies(BottomSheet.name): used for debug only
-    const handleSnapToIndex = useCallback(
-      function handleSnapToIndex(
-        index: number,
-        animationConfigs?: WithSpringConfig | WithTimingConfig
-      ) {
-        const snapPoints = animatedSnapPoints.value;
-        invariant(
-          index >= -1 && index <= snapPoints.length - 1,
-          `'index' was provided but out of the provided snap points range! expected value to be between -1, ${
-            snapPoints.length - 1
-          }`
-        );
-        if (__DEV__) {
-          print({
-            component: BottomSheet.name,
-            method: handleSnapToIndex.name,
-            params: {
-              index,
-            },
-          });
-        }
+    const handleSnapToIndex = useStableCallback(function handleSnapToIndex(
+      index: number,
+      animationConfigs?: WithSpringConfig | WithTimingConfig
+    ) {
+      const snapPoints = animatedSnapPoints.value;
+      invariant(
+        index >= -1 && index <= snapPoints.length - 1,
+        `'index' was provided but out of the provided snap points range! expected value to be between -1, ${
+          snapPoints.length - 1
+        }`
+      );
+      if (__DEV__) {
+        print({
+          component: BottomSheet.name,
+          method: handleSnapToIndex.name,
+          params: {
+            index,
+          },
+        });
+      }
 
-        const nextPosition = snapPoints[index];
+      const nextPosition = snapPoints[index];
 
-        /**
-         * exit method if :
-         * - layout is not calculated.
-         * - already animating to next position.
-         * - sheet is forced closing.
-         */
-        if (
-          !isLayoutCalculated.value ||
-          index === animatedNextPositionIndex.value ||
-          nextPosition === animatedNextPosition.value ||
-          isForcedClosing.value
-        ) {
-          return;
-        }
+      /**
+       * exit method if :
+       * - layout is not calculated.
+       * - already animating to next position.
+       * - sheet is forced closing.
+       */
+      if (
+        !isLayoutCalculated.value ||
+        index === animatedNextPositionIndex.value ||
+        nextPosition === animatedNextPosition.value ||
+        isForcedClosing.value
+      ) {
+        return;
+      }
 
-        /**
-         * reset temporary position boolean.
-         */
-        isInTemporaryPosition.value = false;
+      /**
+       * reset temporary position boolean.
+       */
+      isInTemporaryPosition.value = false;
 
-        runOnUI(animateToPosition)(
-          nextPosition,
-          ANIMATION_SOURCE.USER,
-          0,
-          animationConfigs
-        );
-      },
-      [
-        animateToPosition,
-        isLayoutCalculated,
-        isInTemporaryPosition,
-        isForcedClosing,
-        animatedSnapPoints,
-        animatedNextPosition,
-        animatedNextPositionIndex,
-      ]
-    );
+      runOnUI(animateToPosition)(
+        nextPosition,
+        ANIMATION_SOURCE.USER,
+        0,
+        animationConfigs
+      );
+    });
     const handleSnapToPosition = useWorkletCallback(
       function handleSnapToPosition(
         position: number | string,
@@ -1390,6 +1384,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         activeOffsetY: _providedActiveOffsetY,
         failOffsetX: _providedFailOffsetX,
         failOffsetY: _providedFailOffsetY,
+        enableBlurKeyboardOnGesture,
         animateToPosition,
         stopAnimation,
         setScrollableRef,
@@ -1425,6 +1420,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         enableOverDrag,
         enablePanDownToClose,
         enableDynamicSizing,
+        enableBlurKeyboardOnGesture,
         _providedSimultaneousHandlers,
         _providedWaitFor,
         _providedActiveOffsetX,
@@ -1538,6 +1534,25 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }
 
         animatedContainerHeightDidChange.value = result !== previous;
+
+        /**
+         * When user close the bottom sheet while the keyboard open on Android with
+         * software keyboard layout mode set to resize, the close position would be
+         * set to the container height - the keyboard height, and when the keyboard
+         * closes, the container height and here we restart the animation again.
+         *
+         * [read more](https://github.com/gorhom/react-native-bottom-sheet/issues/2163)
+         */
+        if (
+          animatedAnimationState.value === ANIMATION_STATE.RUNNING &&
+          animatedAnimationSource.value === ANIMATION_SOURCE.GESTURE &&
+          animatedNextPositionIndex.value === -1
+        ) {
+          animateToPosition(
+            animatedClosedPosition.value,
+            ANIMATION_SOURCE.GESTURE
+          );
+        }
       }
     );
 
@@ -1860,10 +1875,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
      * @alias onIndexChange
      */
     useEffect(() => {
-      if (isAnimatedOnMount.value) {
-        handleSnapToIndex(_providedIndex);
+      // early exit, if animate on mount is set and it did not animate yet.
+      if (animateOnMount && !isAnimatedOnMount.value) {
+        return;
       }
-    }, [_providedIndex, isAnimatedOnMount, handleSnapToIndex]);
+
+      handleSnapToIndex(_providedIndex);
+    }, [animateOnMount, _providedIndex, isAnimatedOnMount, handleSnapToIndex]);
     //#endregion
 
     // render

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}