fix(#2364): fixed layouting issue when dynamic sizing enabled and handle is not provided

Author: gorhom

example/src/screens/advanced/BackdropExample.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { View, StyleSheet } from 'react-native';
 import BottomSheet, { BottomSheetBackdrop } 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 { HeaderHandle } from '../../components/headerHandle';
@@ -65,6 +65,7 @@ const BackdropExample = () => {
         snapPoints={snapPoints}
         backdropComponent={renderBackdrop}
         handleComponent={renderHeaderHandle}
+        enableDynamicSizing={false}
       >
         <ContactList type="FlatList" count={10} />
       </BottomSheet>

src/components/bottomSheet/BottomSheet.tsx

@@ -58,7 +58,10 @@ import { BottomSheetBackgroundContainer } from '../bottomSheetBackground';
 // import BottomSheetDebugView from '../bottomSheetDebugView';
 import { BottomSheetFooterContainer } from '../bottomSheetFooter';
 import BottomSheetGestureHandlersProvider from '../bottomSheetGestureHandlersProvider';
-import { BottomSheetHandleContainer } from '../bottomSheetHandle';
+import {
+  BottomSheetHandle,
+  BottomSheetHandleContainer,
+} from '../bottomSheetHandle';
 import { BottomSheetHostingContainer } from '../bottomSheetHostingContainer';
 import { BottomSheetBody } from './BottomSheetBody';
 import { BottomSheetContent } from './BottomSheetContent';
@@ -152,7 +155,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       detached = false,
 
       // components
-      handleComponent,
+      handleComponent = BottomSheetHandle,
       backdropComponent: BackdropComponent,
       backgroundComponent,
       footerComponent,
@@ -187,7 +190,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       containerLayoutState,
       topInset,
       bottomInset,
-      $modal
+      $modal,
+      handleComponent === null
     );
     const animatedDetentsState = useAnimatedDetents(
       _providedSnapPoints,
@@ -1797,6 +1801,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               </BottomSheetBody>
               {/* <BottomSheetDebugView
                 values={{
+                  index: animatedIndex,
+                  position: animatedPosition,
                   sheetStatus: animatedSheetState,
                   scrollableStatus: animatedScrollableStatus,
                   layoutState: animatedLayoutState,

src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx

@@ -10,15 +10,14 @@ import {
 } from '../../hooks';
 import { print } from '../../utilities';
 import { DEFAULT_ENABLE_HANDLE_PANNING_GESTURE } from '../bottomSheet/constants';
-import BottomSheetHandle from './BottomSheetHandle';
 import type { BottomSheetHandleContainerProps } from './types';
 
 function BottomSheetHandleContainerComponent({
   animatedIndex,
   animatedPosition,
   simultaneousHandlers: _internalSimultaneousHandlers,
   enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
-  handleComponent,
+  handleComponent: HandleComponent,
   handleStyle: _providedHandleStyle,
   handleIndicatorStyle: _providedIndicatorStyle,
 }: BottomSheetHandleContainerProps) {
@@ -163,7 +162,6 @@ function BottomSheetHandleContainerComponent({
   //#endregion
 
   //#region renders
-  const HandleComponent = handleComponent ?? BottomSheetHandle;
   return (
     <GestureDetector gesture={panGesture}>
       <Animated.View

src/components/bottomSheetHandle/types.d.ts

@@ -36,13 +36,11 @@ export interface BottomSheetDefaultHandleProps
 export type BottomSheetHandleContainerProps = Pick<
   PanGestureHandlerProperties,
   'simultaneousHandlers'
-> &
-  Pick<
+> & {
+  handleComponent: React.FC<BottomSheetDefaultHandleProps>;
+} & Pick<
     BottomSheetProps,
-    | 'enableHandlePanningGesture'
-    | 'handleIndicatorStyle'
-    | 'handleStyle'
-    | 'handleComponent'
+    'enableHandlePanningGesture' | 'handleIndicatorStyle' | 'handleStyle'
   > &
   Pick<
     useInteractivePanGestureHandlerConfigs,

src/hooks/useAnimatedDetents.ts

@@ -94,7 +94,8 @@ export const useAnimatedDetents = (
     // sort all detents.
     _normalizedDetents = _normalizedDetents.sort((a, b) => b - a);
 
-    highestDetentPosition = _normalizedDetents[0];
+    // update the highest detent position.
+    highestDetentPosition = _normalizedDetents[_normalizedDetents.length - 1];
 
     // locate the dynamic detent index.
     const dynamicDetentIndex = _normalizedDetents.indexOf(dynamicSnapPoint);

src/hooks/useAnimatedLayout.ts

@@ -28,13 +28,15 @@ const INITIAL_STATE: LayoutState = {
  * @param topInset - The top inset value to be subtracted from the container height.
  * @param bottomInset - The bottom inset value to be subtracted from the container height.
  * @param modal - Optional flag indicating if the layout is in modal mode.
+ * @param shouldOverrideHandleHeight - Optional flag to override the handle height in the layout state, only when handle is set to null.
  * @returns An object containing the animated layout state.
  */
 export function useAnimatedLayout(
   containerLayoutState: SharedValue<ContainerLayoutState> | undefined,
   topInset: number,
   bottomInset: number,
-  modal?: boolean
+  modal?: boolean,
+  shouldOverrideHandleHeight?: boolean
 ) {
   //#region  variables
   const verticalInset = useMemo(
@@ -43,15 +45,21 @@ export function useAnimatedLayout(
   );
   const initialState = useMemo(() => {
     const _state = { ...INITIAL_STATE };
+
     if (containerLayoutState) {
       const containerLayout = containerLayoutState.get();
       _state.containerHeight = modal
         ? containerLayout.height - verticalInset
         : containerLayout.height;
       _state.containerOffset = containerLayout.offset;
     }
+
+    if (shouldOverrideHandleHeight) {
+      _state.handleHeight = 0;
+    }
+
     return _state;
-  }, [containerLayoutState, modal, verticalInset]);
+  }, [containerLayoutState, modal, shouldOverrideHandleHeight, verticalInset]);
   //#endregion
 
   //#region state