feat: added animateOnMount prop

README.md

@@ -149,6 +149,12 @@ To enable or disable user interaction with the sheet.
 
 > `required:` NO | `type:` boolean | `default:` true
 
+#### `animateOnMount`
+
+To start the sheet closed and snap to initial index when it's mounted.
+
+> `required:` NO | `type:` boolean | `default:` false
+
 #### `animationDuration`
 
 Snapping animation duration.

example/src/screens/static/BasicExamples.tsx

@@ -88,6 +88,7 @@ const createExampleScreen = ({ type, count = 50 }: ExampleScreenProps) =>
           enabled={enabled}
           snapPoints={snapPoints}
           initialSnapIndex={1}
+          animateOnMount={true}
           topInset={headerHeight}
           onChange={handleSheetChange}
         >

src/components/bottomSheet/BottomSheet.tsx

@@ -5,6 +5,7 @@ import React, {
   forwardRef,
   useImperativeHandle,
   memo,
+  useLayoutEffect,
 } from 'react';
 import { ViewStyle } from 'react-native';
 import isEqual from 'lodash.isequal';
@@ -47,6 +48,7 @@ import {
 import { GESTURE } from '../../constants';
 import {
   NORMAL_DECELERATION_RATE,
+  DEFAULT_ANIMATE_ON_MOUNT,
   DEFAULT_ANIMATION_EASING,
   DEFAULT_ANIMATION_DURATION,
 } from './constants';
@@ -77,6 +79,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       snapPoints: _snapPoints,
       topInset = 0,
       enabled = true,
+      animateOnMount = DEFAULT_ANIMATE_ON_MOUNT,
       // animated nodes callback
       animatedPosition: _animatedPosition,
       animatedPositionIndex: _animatedPositionIndex,
@@ -165,8 +168,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       };
     }, [_snapPoints, topInset]);
     const initialPosition = useMemo(() => {
-      return initialSnapIndex < 0 ? sheetHeight : snapPoints[initialSnapIndex];
-    }, [initialSnapIndex, sheetHeight, snapPoints]);
+      return initialSnapIndex < 0 || animateOnMount
+        ? sheetHeight
+        : snapPoints[initialSnapIndex];
+    }, [initialSnapIndex, animateOnMount, sheetHeight, snapPoints]);
     //#endregion
 
     //#region gestures
@@ -340,6 +345,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       close: handleClose,
     }));
 
+    /**
+     * This will animate the sheet to the initial snap point
+     * when component is mounted.
+     */
+    useLayoutEffect(() => {
+      if (animateOnMount) {
+        manualSnapToPoint.setValue(snapPoints[initialSnapIndex]);
+      }
+    }, [animateOnMount, initialSnapIndex, manualSnapToPoint, snapPoints]);
+
     /**
      * @DEV
      * here we track the current position and
@@ -391,6 +406,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     // render
+    console.log('X', 'render');
     return (
       <>
         <ContentWrapper

src/components/bottomSheet/constants.ts

@@ -16,3 +16,5 @@ export const NORMAL_DECELERATION_RATE = Platform.select({
   ios: 0.998,
   android: 0.985,
 });
+
+export const DEFAULT_ANIMATE_ON_MOUNT = false;

src/components/bottomSheet/types.d.ts

@@ -30,6 +30,12 @@ export interface BottomSheetProps extends BottomSheetAnimationConfigs {
    * @default true
    */
   enabled?: boolean;
+  /**
+   * To start the sheet closed and snap to initial index when it's mounted.
+   * @type boolean
+   * @default false
+   */
+  animateOnMount?: boolean;
   /**
    * Animated value to be used as a callback of the position node internally.
    * @type Animated.Value<number>

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -2,7 +2,6 @@ import React, {
   forwardRef,
   memo,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -61,9 +60,10 @@ const BottomSheetModalComponent = forwardRef<
       }),
     [animatedPositionIndex, overlayOpacity]
   );
-  const initialSnapIndex = useMemo(() => (dismissOnScrollDown ? 0 : -1), [
-    dismissOnScrollDown,
-  ]);
+  const initialSnapIndex = useMemo(
+    () => (dismissOnScrollDown ? _initialSnapIndex + 1 : _initialSnapIndex),
+    [_initialSnapIndex, dismissOnScrollDown]
+  );
   const snapPoints = useMemo(
     () => (dismissOnScrollDown ? [0, ..._snapPoints] : _snapPoints),
     [_snapPoints, dismissOnScrollDown]
@@ -133,12 +133,6 @@ const BottomSheetModalComponent = forwardRef<
     temporaryCloseSheet: handleTemporaryCloseSheet,
     restoreSheetPosition: handleRestoreSheetPosition,
   }));
-  useEffect(() => {
-    bottomSheetRef.current?.snapTo(
-      _initialSnapIndex + (dismissOnScrollDown ? 1 : 0)
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   //#endregion
 
   // render
@@ -162,6 +156,7 @@ const BottomSheetModalComponent = forwardRef<
         {...bottomSheetProps}
         initialSnapIndex={initialSnapIndex}
         snapPoints={snapPoints}
+        animateOnMount={true}
         animatedPositionIndex={animatedPositionIndex}
         onChange={handleChange}
       >