bring back provided contentHeight and handleHeight, and disable default dynamic sizing

not sure why provided content + handle height was removed in gorhom#1683, it significantly increases the mount cost because it now requires a full off-screen render pass of the content and handle components before the sheet can be displayed

Author: yayvery

src/components/bottomSheet/BottomSheet.tsx

@@ -123,7 +123,9 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
       android_keyboardInputMode = DEFAULT_KEYBOARD_INPUT_MODE,
 
       // layout
+      handleHeight: _providedHandleHeight,
       containerHeight: _providedContainerHeight,
+      contentHeight: _providedContentHeight,
       containerOffset: _providedContainerOffset,
       topInset = 0,
       bottomInset = 0,
@@ -202,11 +204,13 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
     const animatedContainerOffset = useReactiveSharedValue(
       _providedContainerOffset ?? INITIAL_CONTAINER_OFFSET
     ) as Animated.SharedValue<Insets>;
-    const animatedHandleHeight = useReactiveSharedValue<number>(
-      INITIAL_HANDLE_HEIGHT
+    const animatedHandleHeight = useReactiveSharedValue(
+      _providedHandleHeight ?? INITIAL_HANDLE_HEIGHT
     );
     const animatedFooterHeight = useSharedValue(0);
-    const animatedContentHeight = useSharedValue(INITIAL_CONTAINER_HEIGHT);
+    const animatedContentHeight = useReactiveSharedValue(
+      _providedContentHeight ?? INITIAL_CONTAINER_HEIGHT
+    );
     const [animatedSnapPoints, animatedDynamicSnapPointIndex] =
       useNormalizedSnapPoints(
         _providedSnapPoints,
@@ -258,6 +262,14 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
       }
 
       let isHandleHeightCalculated = false;
+      // handle height is provided.
+      if (
+        _providedHandleHeight !== null &&
+        _providedHandleHeight !== undefined &&
+        typeof _providedHandleHeight === 'number'
+      ) {
+        isHandleHeightCalculated = true;
+      }
       // handle component is null.
       if (handleComponent === null) {
         animatedHandleHeight.value = 0;
@@ -281,9 +293,10 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
       );
     }, [
       _providedContainerHeight,
-      animatedContainerHeight.value,
+      _providedHandleHeight,
+      animatedContainerHeight,
       animatedHandleHeight,
-      animatedSnapPoints.value,
+      animatedSnapPoints,
       handleComponent,
     ]);
     const isInTemporaryPosition = useSharedValue(false);
@@ -1271,6 +1284,14 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
       [_providedStyle, containerAnimatedStyle]
     );
     const contentContainerAnimatedStyle = useAnimatedStyle(() => {
+      /**
+       * if content height was provided, then we skip setting
+       * calculated height.
+       */
+      if (_providedContentHeight) {
+        return {};
+      }
+
       /**
        * if dynamic sizing is enabled, and content height
        * is still not set, then we exit method.
@@ -1290,9 +1311,10 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
       };
     }, [
       enableDynamicSizing,
-      animatedContentHeight.value,
-      animatedContentHeightMax.value,
+      animatedContentHeight,
+      animatedContentHeightMax,
       _providedAnimationConfigs,
+      _providedContentHeight,
     ]);
     const contentContainerStyle = useMemo(
       () => [styles.contentContainer, contentContainerAnimatedStyle],

src/components/bottomSheet/constants.ts

@@ -13,7 +13,7 @@ const DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = true;
 const DEFAULT_ENABLE_OVER_DRAG = true;
 const DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = false;
 const DEFAULT_ANIMATE_ON_MOUNT = true;
-const DEFAULT_DYNAMIC_SIZING = true;
+const DEFAULT_DYNAMIC_SIZING = false;
 
 // keyboard
 const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;

src/components/bottomSheet/types.d.ts

@@ -104,13 +104,25 @@ export interface BottomSheetProps
   //#endregion
 
   //#region layout
+  /**
+   * Handle height helps to calculate the internal container and sheet layouts,
+   * if `handleComponent` is provided, the library internally will calculate its layout,
+   * unless `handleHeight` is provided.
+   * @type number | SharedValue<number>;
+   */
+  handleHeight?: number | SharedValue<number>;
   /**
    * Container height helps to calculate the internal sheet layouts,
    * if `containerHeight` not provided, the library internally will calculate it,
    * however this will cause an extra re-rendering.
    * @type number | SharedValue<number>;
    */
   containerHeight?: number | SharedValue<number>;
+  /**
+   * Content height helps dynamic snap points calculation.
+   * @type number | SharedValue<number>;
+   */
+  contentHeight?: number | SharedValue<number>;
   /**
    * Container offset helps to accurately detect container offsets.
    * @type SharedValue<number>;