From 89098e9c430917ec0930f6de64b9cb18663242ab Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Fri, 7 May 2021 20:10:13 +0100
Subject: [PATCH] refactor: converted all internal state/memoized variables to
 reanimated shared values. (#430)

* refactor: converted all internal variables into shared values

* chore: updated dev screen
---
 example/index.ts                              |   4 +
 example/src/Dev.tsx                           |  75 +-
 src/components/bottomSheet/BottomSheet.tsx    | 766 +++++++++---------
 src/components/bottomSheet/constants.ts       |  20 +-
 src/components/bottomSheet/types.d.ts         |  93 ++-
 .../BottomSheetContainer.tsx                  |  70 +-
 .../bottomSheetContainer/types.d.ts           |   7 +-
 .../BottomSheetHandleContainer.tsx            |  54 +-
 .../bottomSheetHandleContainer/types.d.ts     |   6 +-
 .../BottomSheetModalProvider.tsx              |  23 +-
 src/contexts/internal.ts                      |   1 -
 src/contexts/modal/internal.ts                |   3 +-
 src/hooks/useNormalizedSnapPoints.ts          |  56 +-
 src/hooks/useReactiveSharedValue.ts           |  26 +-
 src/index.ts                                  |   3 +
 src/types.d.ts                                |   4 +
 src/utilities/index.ts                        |   3 +-
 src/utilities/logger.ts                       |  42 +
 src/utilities/normalizeSnapPoint.ts           |  20 +
 src/utilities/normalizeSnapPoints.ts          |  16 -
 20 files changed, 743 insertions(+), 549 deletions(-)
 create mode 100644 src/utilities/logger.ts
 create mode 100644 src/utilities/normalizeSnapPoint.ts
 delete mode 100644 src/utilities/normalizeSnapPoints.ts

diff --git a/example/index.ts b/example/index.ts
index d3c277a28..fc6f4f5e8 100644
--- a/example/index.ts
+++ b/example/index.ts
@@ -3,6 +3,10 @@ import 'react-native-gesture-handler';
 import { enableScreens } from 'react-native-screens';
 enableScreens(true);
 
+// @ts-ignore
+import { enableLogging } from '@gorhom/bottom-sheet';
+enableLogging();
+
 import { AppRegistry, LogBox } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';
diff --git a/example/src/Dev.tsx b/example/src/Dev.tsx
index 635b18760..84c10f684 100644
--- a/example/src/Dev.tsx
+++ b/example/src/Dev.tsx
@@ -4,28 +4,34 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Dimensions, StatusBar } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 import BottomSheet from '@gorhom/bottom-sheet';
 import SearchHandle from './components/searchHandle';
 import Button from './components/button';
 import ContactList from './components/contactList';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 
 const { height: windowHeight } = Dimensions.get('window');
 
 const BasicExample = () => {
   //#region state
+  const shownHeader = useRef(true);
   const [dynamicSnapPoint, setDynamicSnapPoint] = useState(300);
   //#endregion
 
   //#region hooks
+  const { setOptions } = useNavigation();
   const bottomSheetRef = useRef<BottomSheet>(null);
   const { top: topSafeArea, bottom: bottomSafeArea } = useSafeAreaInsets();
   //#endregion
 
   //#region variables
-  const snapPoints = useMemo(() => [150, dynamicSnapPoint], [dynamicSnapPoint]);
+  const snapPoints = useMemo(() => [150, 400, '100%'], []);
   const animatedPosition = useSharedValue<number>(0);
+  const animatedContainerHeight = useSharedValue<number>(800);
   //#endregion
 
   //#region styles
@@ -83,12 +89,21 @@ const BasicExample = () => {
   const handleSnapPress = useCallback(index => {
     bottomSheetRef.current?.snapTo(index);
   }, []);
+  const handleSnapPosition = useCallback(position => {
+    bottomSheetRef.current?.snapTo(position);
+  }, []);
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
   const handleIncreaseDynamicSnapPoint = useCallback(() => {
     setDynamicSnapPoint(state => state + 50);
   }, []);
+  const handleHideHeaderPress = useCallback(() => {
+    shownHeader.current = !shownHeader.current;
+    setOptions({
+      headerShown: shownHeader.current,
+    });
+  }, []);
   //#endregion
 
   // renders
@@ -98,36 +113,45 @@ const BasicExample = () => {
         label="Increase Dynamic Snap Point"
         style={styles.buttonContainer}
         onPress={handleIncreaseDynamicSnapPoint}
-      />
+      /> */}
       <Button
-        label="Snap To 150"
+        label="Snap To 0"
         style={styles.buttonContainer}
         onPress={() => handleSnapPress(0)}
-      /> */}
+      />
+      <Button
+        label="Snap To 1"
+        style={styles.buttonContainer}
+        onPress={() => handleSnapPress(1)}
+      />
+      <Button
+        label="Snap To 500px"
+        style={styles.buttonContainer}
+        onPress={() => handleSnapPosition(500)}
+      />
       <Button
         label="Close"
         style={styles.buttonContainer}
-        onPress={() => handleClosePress()}
+        onPress={handleClosePress}
+      />
+
+      <Button
+        label="Hide Header"
+        style={styles.buttonContainer}
+        onPress={handleHideHeaderPress}
       />
       <BottomSheet
         ref={bottomSheetRef}
-        index={0}
         snapPoints={snapPoints}
-        animateOnMount={true}
         animatedPosition={animatedPosition}
-        keyboardBehavior="fullScreen"
-        keyboardBlurBehavior="restore"
+        keyboardBehavior="interactive"
+        // topInset={topSafeArea}
         handleComponent={SearchHandle}
-        containerHeight={windowHeight - (StatusBar.currentHeight ?? 0)}
-        topInset={topSafeArea}
+        animateOnMount={true}
         // onChange={handleSheetChanges}
       >
-        <ContactList type="FlatList" count={20} />
-        {/* <View
-          style={{
-            height: dynamicSnapPoint,
-          }}
-        >
+        {/* <ContactList type="FlatList" count={20} /> */}
+        <View style={{}}>
           <View
             pointerEvents="none"
             style={{
@@ -140,12 +164,12 @@ const BasicExample = () => {
               backgroundColor: 'red',
             }}
           />
-        </View> */}
+        </View>
       </BottomSheet>
-      {/* <Animated.View pointerEvents="none" style={sheetLineStyle} />
+      {/* <Animated.View pointerEvents="none" style={sheetLineStyle} /> */}
       <View pointerEvents="none" style={secondSnapPointLineStyle} />
       <View pointerEvents="none" style={firstSnapPointLineStyle} />
-      <View pointerEvents="none" style={safeBottomLineStyle} /> */}
+      <View pointerEvents="none" style={safeBottomLineStyle} />
     </View>
   );
 };
@@ -153,7 +177,7 @@ const BasicExample = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#222',
+    backgroundColor: '#555',
     padding: 24,
   },
   buttonContainer: {
@@ -184,10 +208,11 @@ const styles = StyleSheet.create({
 });
 
 const Stack = createStackNavigator();
+
 export default () => (
   <NavigationContainer>
-    <Stack.Navigator headerMode="none" initialRouteName="root">
-      <Stack.Screen name="root">{() => <BasicExample />}</Stack.Screen>
+    <Stack.Navigator>
+      <Stack.Screen name="app" component={BasicExample} />
     </Stack.Navigator>
   </NavigationContainer>
 );
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 78e551057..029682662 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -1,13 +1,10 @@
 import React, {
-  useState,
   useMemo,
   useRef,
   useCallback,
   forwardRef,
   useImperativeHandle,
   memo,
-  useLayoutEffect,
-  useEffect,
 } from 'react';
 import { ViewStyle } from 'react-native';
 import invariant from 'invariant';
@@ -28,8 +25,8 @@ import {
   useInteractivePanGestureHandler,
   useScrollable,
   usePropsValidator,
-  useNormalizedSnapPoints,
   useReactiveSharedValue,
+  useNormalizedSnapPoints,
   useKeyboard,
 } from '../../hooks';
 import {
@@ -41,22 +38,20 @@ import BottomSheetBackdropContainer from '../bottomSheetBackdropContainer';
 import BottomSheetHandleContainer from '../bottomSheetHandleContainer';
 import BottomSheetBackgroundContainer from '../bottomSheetBackgroundContainer';
 import BottomSheetDraggableView from '../bottomSheetDraggableView';
-// import BottomSheetDebugView from '../bottomSheetDebugView';
+import BottomSheetDebugView from '../bottomSheetDebugView';
 import {
   GESTURE,
   ANIMATION_STATE,
-  WINDOW_HEIGHT,
   KEYBOARD_STATE,
   KEYBOARD_BEHAVIOR,
   SHEET_STATE,
   SCROLLABLE_STATE,
   KEYBOARD_BLUR_BEHAVIOR,
 } from '../../constants';
-import { animate, getKeyboardAnimationConfigs } from '../../utilities';
+import { animate, getKeyboardAnimationConfigs, print } from '../../utilities';
 import {
   DEFAULT_ANIMATION_EASING,
   DEFAULT_ANIMATION_DURATION,
-  DEFAULT_HANDLE_HEIGHT,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
   DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
@@ -65,6 +60,10 @@ import {
   DEFAULT_ANIMATE_ON_MOUNT,
   DEFAULT_KEYBOARD_BEHAVIOR,
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
+  INITIAL_CONTAINER_HEIGHT,
+  INITIAL_HANDLE_HEIGHT,
+  INITIAL_POSITION,
+  INITIAL_SNAP_POINT,
 } from './constants';
 import type { ScrollableRef, BottomSheetMethods } from '../../types';
 import type { BottomSheetProps } from './types';
@@ -77,7 +76,7 @@ Animated.addWhitelistedUIProps({
 type BottomSheet = BottomSheetMethods;
 
 const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
-  (props, ref) => {
+  function BottomSheet(props, ref) {
     //#region validate props
     usePropsValidator(props);
     //#endregion
@@ -97,6 +96,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
       enableOverDrag = DEFAULT_ENABLE_OVER_DRAG,
       enableFlashScrollableIndicatorOnExpand = DEFAULT_ENABLE_FLASH_SCROLLABLE_INDICATOR_ON_EXPAND,
+      overDragResistanceFactor = DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
       style: _providedStyle,
 
       // keyboard
@@ -107,7 +107,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       handleHeight: _providedHandleHeight,
       containerHeight: _providedContainerHeight,
       topInset = 0,
-      overDragResistanceFactor = DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
+      bottomInset = 0,
 
       // animated callback shared values
       animatedPosition: _providedAnimatedPosition,
@@ -124,6 +124,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       // callbacks
       onChange: _providedOnChange,
       onAnimate: _providedOnAnimate,
+
       // components
       handleComponent,
       backdropComponent,
@@ -133,56 +134,80 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region layout variables
-    // state
-    const [containerHeight, setContainerHeight] = useState(
-      _providedContainerHeight
+    const animatedContainerHeight = useReactiveSharedValue(
+      _providedContainerHeight ?? INITIAL_CONTAINER_HEIGHT
     );
-    const [handleHeight, setHandleHeight] = useState(_providedHandleHeight);
-
-    // safe layout values
-    const safeHandleHeight = useMemo(
-      () =>
-        handleComponent === null ? 0 : handleHeight || DEFAULT_HANDLE_HEIGHT,
-      [handleHeight, handleComponent]
+    const animatedHandleHeight = useReactiveSharedValue(
+      _providedHandleHeight ?? INITIAL_HANDLE_HEIGHT
     );
-    const safeContainerHeight = useMemo(
-      () => _providedContainerHeight || containerHeight || WINDOW_HEIGHT,
-      [_providedContainerHeight, containerHeight]
+    const animatedSnapPoints = useNormalizedSnapPoints(
+      _providedSnapPoints,
+      animatedContainerHeight,
+      topInset
     );
-
-    // conditions
-    const shouldMeasureContainerHeight = useMemo(
-      () => _providedContainerHeight === undefined,
-      [_providedContainerHeight]
+    const animatedLastSnapPoint = useDerivedValue(
+      () => animatedSnapPoints.value[animatedSnapPoints.value.length - 1]
     );
-    const shouldMeasureHandleHeight = useMemo(
+    const animatedContentHeight = useDerivedValue(
       () =>
-        _providedHandleHeight === undefined &&
-        handleComponent !== undefined &&
-        handleComponent !== null,
-      [_providedHandleHeight, handleComponent]
+        animatedContainerHeight.value -
+        animatedLastSnapPoint.value -
+        animatedHandleHeight.value
     );
-
-    // refs
-    const didSetHandleHeight = useRef(!shouldMeasureHandleHeight);
-    const didSetContainerHeight = useRef(!shouldMeasureContainerHeight);
-
-    const isLayoutCalculated = useMemo(
-      () => {
-        return didSetHandleHeight.current && didSetContainerHeight.current;
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [containerHeight, handleHeight]
+    const animatedCurrentIndex = useReactiveSharedValue(
+      animateOnMount ? -1 : _providedIndex
     );
+    const animatedPosition = useSharedValue(INITIAL_POSITION);
     //#endregion
 
-    //#region variables
-    const currentIndexRef = useRef<number>(
-      animateOnMount ? -1 : _providedIndex
-    );
-    const isClosing = useRef(false);
-    const didMountOnAnimate = useRef(false);
+    //#region conditional variables
+    const isLayoutCalculated = useDerivedValue(() => {
+      let isContainerHeightCalculated = false;
+      //container height was provided.
+      if (
+        _providedContainerHeight !== null ||
+        _providedContainerHeight !== undefined
+      ) {
+        isContainerHeightCalculated = true;
+      }
+      // container height did set.
+      if (animatedContainerHeight.value !== INITIAL_CONTAINER_HEIGHT) {
+        isContainerHeightCalculated = true;
+      }
+
+      let isHandleHeightCalculated = false;
+      // handle height is provided.
+      if (
+        _providedHandleHeight !== null ||
+        _providedHandleHeight !== undefined
+      ) {
+        isHandleHeightCalculated = true;
+      }
+      // handle component is null.
+      if (handleComponent === null) {
+        isHandleHeightCalculated = true;
+      }
+      // handle height did set.
+      if (animatedHandleHeight.value !== INITIAL_HANDLE_HEIGHT) {
+        isHandleHeightCalculated = true;
+      }
+
+      let isSnapPointsNormalized = false;
+      // the first snap point did normalized
+      if (animatedSnapPoints.value[0] !== INITIAL_SNAP_POINT) {
+        isSnapPointsNormalized = true;
+      }
+
+      return (
+        isContainerHeightCalculated &&
+        isHandleHeightCalculated &&
+        isSnapPointsNormalized
+      );
+    });
+    const isInTemporaryPosition = useSharedValue(false);
+    //#endregion
 
+    //#region hooks variables
     // scrollable variables
     const {
       scrollableContentOffsetY,
@@ -190,10 +215,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       removeScrollableRef,
       flashScrollableIndicators,
     } = useScrollable();
-
     // keyboard
-    const isExtendedByKeyboard = useSharedValue(false);
-    const animatedKeyboardOffset = useSharedValue(0);
     const {
       state: keyboardState,
       height: keyboardHeight,
@@ -201,115 +223,77 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       animationEasing: keyboardAnimationEasing,
       shouldHandleKeyboardEvents,
     } = useKeyboard();
-
-    // normalize snap points
-    const snapPoints = useNormalizedSnapPoints(
-      _providedSnapPoints,
-      topInset,
-      safeContainerHeight,
-      safeHandleHeight
-    );
-    const sheetHeight = useMemo(
-      () =>
-        safeContainerHeight -
-        snapPoints[snapPoints.length - 1] -
-        safeHandleHeight,
-      [snapPoints, safeContainerHeight, safeHandleHeight]
-    );
-
-    const initialPosition = useMemo(() => {
-      return currentIndexRef.current < 0 || animateOnMount
-        ? safeContainerHeight - topInset
-        : snapPoints[currentIndexRef.current];
-    }, [snapPoints, animateOnMount, safeContainerHeight, topInset]);
-
     //#endregion
 
-    //#region private methods
-    const refreshUIElements = useCallback(() => {
-      const currentPositionIndex = Math.max(currentIndexRef.current, 0);
+    //#region state/dynamic variables
+    // states
+    const isAnimatedOnMount = useSharedValue(false);
+    const animatedAnimationState = useSharedValue(ANIMATION_STATE.UNDETERMINED);
+    const animatedSheetState = useDerivedValue(() => {
+      const extendedSheetPosition =
+        animatedContainerHeight.value -
+        animatedHandleHeight.value -
+        animatedContentHeight.value;
+      const extendedSheetWithKeyboardPosition =
+        animatedContainerHeight.value -
+        animatedHandleHeight.value -
+        animatedContentHeight.value -
+        keyboardHeight.value;
 
-      if (
-        enableFlashScrollableIndicatorOnExpand &&
-        currentPositionIndex === snapPoints.length - 1
+      if (animatedPosition.value >= animatedContainerHeight.value) {
+        return SHEET_STATE.CLOSED;
+      } else if (
+        animatedPosition.value === extendedSheetPosition ||
+        (keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
+          isInTemporaryPosition.value &&
+          animatedPosition.value === extendedSheetWithKeyboardPosition)
       ) {
-        flashScrollableIndicators();
+        return SHEET_STATE.EXTENDED;
+      } else if (animatedPosition.value === topInset) {
+        return SHEET_STATE.FULL_SCREEN;
+      } else if (animatedPosition.value < extendedSheetPosition) {
+        return SHEET_STATE.OVER_EXTENDED;
       }
-    }, [
-      snapPoints,
-      flashScrollableIndicators,
-      enableFlashScrollableIndicatorOnExpand,
-    ]);
-    const handleOnChange = useCallback(
-      (index: number) => {
-        if (index === currentIndexRef.current) {
-          return;
-        }
-        currentIndexRef.current = index;
-
-        if (isClosing.current && (index === 0 || index === -1)) {
-          isClosing.current = false;
-        }
 
-        if (_providedOnChange) {
-          /**
-           * to avoid having -0 🤷‍♂️
-           */
-          _providedOnChange(index + 1 - 1);
-        }
-      },
-      [_providedOnChange]
-    );
-    const handleOnAnimate = useCallback(
-      (toPoint: number) => {
-        if (!_providedOnAnimate) {
-          return;
-        }
-        const toIndex = snapPoints.findIndex(item => item === toPoint);
-        if (toIndex !== currentIndexRef.current) {
-          _providedOnAnimate(currentIndexRef.current, toIndex);
-        }
-      },
-      [_providedOnAnimate, snapPoints]
-    );
-    const handleSettingScrollableRef = useCallback(
-      (scrollableRef: ScrollableRef) => {
-        setScrollableRef(scrollableRef);
-        refreshUIElements();
-      },
-      [setScrollableRef, refreshUIElements]
-    );
-    //#endregion
-
-    //#region gesture interaction / animation
-    // variables
+      return SHEET_STATE.OPENED;
+    });
+    const animatedScrollableState = useDerivedValue(() => {
+      return animatedSheetState.value === SHEET_STATE.FULL_SCREEN ||
+        animatedSheetState.value === SHEET_STATE.EXTENDED
+        ? SCROLLABLE_STATE.UNLOCKED
+        : SCROLLABLE_STATE.LOCKED;
+    });
+    // dynamic
     const animatedSheetHeight = useDerivedValue(() => {
       if (
         keyboardBehavior === KEYBOARD_BEHAVIOR.none ||
         keyboardBehavior === KEYBOARD_BEHAVIOR.extend
       ) {
-        return sheetHeight;
+        return animatedContentHeight.value;
       }
 
       if (keyboardBehavior === KEYBOARD_BEHAVIOR.fullScreen) {
-        return isExtendedByKeyboard.value
-          ? safeContainerHeight - topInset - safeHandleHeight
-          : sheetHeight;
+        return isInTemporaryPosition.value
+          ? animatedContainerHeight.value -
+              topInset -
+              animatedHandleHeight.value
+          : animatedContentHeight.value;
       }
 
       if (
         keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
-        isExtendedByKeyboard.value
+        isInTemporaryPosition.value
       ) {
         const safeFullScreenSheetHeight =
-          safeContainerHeight - topInset - safeHandleHeight;
-        const sheetWithKeyboardHeight = sheetHeight + keyboardHeight.value;
+          animatedContainerHeight.value - topInset - animatedHandleHeight.value;
+        const sheetWithKeyboardHeight =
+          animatedContentHeight.value + keyboardHeight.value;
 
         if (keyboardState.value === KEYBOARD_STATE.SHOWN) {
-          if (sheetHeight >= safeFullScreenSheetHeight) {
+          if (animatedContentHeight.value >= safeFullScreenSheetHeight) {
             return safeFullScreenSheetHeight - keyboardHeight.value;
           }
-          return sheetHeight;
+          return animatedContentHeight.value;
         }
 
         if (sheetWithKeyboardHeight > safeFullScreenSheetHeight) {
@@ -319,14 +303,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         return sheetWithKeyboardHeight;
       }
 
-      return sheetHeight;
+      return animatedContentHeight.value;
     });
-    const animationState = useSharedValue(ANIMATION_STATE.UNDETERMINED);
-    const animatedSnapPoints = useReactiveSharedValue(snapPoints);
-    const animatedPosition = useSharedValue(initialPosition);
     const animatedIndex = useDerivedValue(() => {
-      const adjustedSnapPoints = snapPoints.slice().reverse();
-      const adjustedSnapPointsIndexes = snapPoints
+      const adjustedSnapPoints = animatedSnapPoints.value.slice().reverse();
+      const adjustedSnapPointsIndexes = animatedSnapPoints.value
         .slice()
         .map((_, index) => index)
         .reverse();
@@ -334,10 +315,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       /**
        * we add the close state index `-1`
        */
-      adjustedSnapPoints.push(safeContainerHeight);
+      adjustedSnapPoints.push(animatedContainerHeight.value);
       adjustedSnapPointsIndexes.push(-1);
 
-      return isLayoutCalculated
+      return isLayoutCalculated.value
         ? interpolate(
             animatedPosition.value,
             adjustedSnapPoints,
@@ -345,45 +326,101 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             Extrapolate.CLAMP
           )
         : -1;
-    }, [snapPoints, safeContainerHeight, isLayoutCalculated]);
-    const animatedSheetState = useDerivedValue(() => {
-      const extendedSheetPosition =
-        safeContainerHeight - safeHandleHeight - sheetHeight;
-      const extendedSheetWithKeyboardPosition =
-        safeContainerHeight -
-        safeHandleHeight -
-        sheetHeight -
-        keyboardHeight.value;
+    });
+    //#endregion
 
-      if (animatedPosition.value >= safeContainerHeight) {
-        return SHEET_STATE.CLOSED;
-      } else if (
-        animatedPosition.value === extendedSheetPosition ||
-        (keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
-          isExtendedByKeyboard.value &&
-          animatedPosition.value === extendedSheetWithKeyboardPosition)
+    //#region variables
+    /**
+     * @TODO remove this
+     */
+    const isClosing = useRef(false);
+    //#endregion
+
+    //#region private methods
+    const refreshUIElements = useCallback(() => {
+      const currentPositionIndex = Math.max(animatedCurrentIndex.value, 0);
+      const snapPoints = animatedSnapPoints.value;
+
+      if (
+        enableFlashScrollableIndicatorOnExpand &&
+        currentPositionIndex === snapPoints.length - 1
       ) {
-        return SHEET_STATE.EXTENDED;
-      } else if (animatedPosition.value === topInset) {
-        return SHEET_STATE.FULL_SCREEN;
-      } else if (animatedPosition.value < extendedSheetPosition) {
-        return SHEET_STATE.OVER_EXTENDED;
+        flashScrollableIndicators();
       }
+    }, [
+      animatedSnapPoints,
+      animatedCurrentIndex,
+      enableFlashScrollableIndicatorOnExpand,
+      flashScrollableIndicators,
+    ]);
+    const handleOnChange = useCallback(
+      function handleOnChange(index: number) {
+        print({
+          component: BottomSheet.name,
+          method: handleOnChange.name,
+          params: {
+            index,
+          },
+        });
+        if (index === animatedCurrentIndex.value) {
+          return;
+        }
 
-      return SHEET_STATE.OPENED;
-    });
-    const animatedCurrentIndex = useSharedValue(currentIndexRef.current);
+        if (isClosing.current && (index === 0 || index === -1)) {
+          isClosing.current = false;
+        }
 
-    // callbacks
-    const animateToPointCompleted = useWorkletCallback(() => {
-      animationState.value = ANIMATION_STATE.STOPPED;
+        if (_providedOnChange) {
+          /**
+           * to avoid having -0 🤷‍♂️
+           */
+          _providedOnChange(index + 1 - 1);
+        }
+      },
+      [_providedOnChange, animatedCurrentIndex]
+    );
+    const handleOnAnimate = useCallback(
+      (toPoint: number) => {
+        if (!_providedOnAnimate) {
+          return;
+        }
+        const snapPoints = animatedSnapPoints.value;
+        const toIndex = snapPoints.findIndex(item => item === toPoint);
+        if (toIndex !== animatedCurrentIndex.value) {
+          _providedOnAnimate(animatedCurrentIndex.value, toIndex);
+        }
+      },
+      [_providedOnAnimate, animatedSnapPoints, animatedCurrentIndex]
+    );
+    const handleSettingScrollableRef = useCallback(
+      (scrollableRef: ScrollableRef) => {
+        setScrollableRef(scrollableRef);
+        refreshUIElements();
+      },
+      [setScrollableRef, refreshUIElements]
+    );
+    const animateToPositionCompleted = useWorkletCallback(() => {
+      animatedAnimationState.value = ANIMATION_STATE.STOPPED;
     });
-    const animateToPoint = useWorkletCallback(
-      (
-        point: number,
+    const animateToPosition = useWorkletCallback(
+      function animateToPosition(
+        position: number,
         velocity: number = 0,
         configs?: Animated.WithTimingConfig | Animated.WithSpringConfig
-      ) => {
+      ) {
+        if (position === animatedPosition.value) {
+          return;
+        }
+
+        runOnJS(print)({
+          component: BottomSheet.name,
+          method: animateToPosition.name,
+          params: {
+            currentPosition: animatedPosition.value,
+            position,
+            velocity,
+          },
+        });
         /**
          * cancel current running animation
          */
@@ -392,42 +429,45 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * set animation state to running
          */
-        animationState.value = ANIMATION_STATE.RUNNING;
+        animatedAnimationState.value = ANIMATION_STATE.RUNNING;
 
         /**
          * fire `onAnimate` callback
          */
-        runOnJS(handleOnAnimate)(point);
+        // runOnJS(handleOnAnimate)(position);
 
         /**
          * force animation configs from parameters, if provided
          */
         if (configs !== undefined) {
+          // @ts-ignore
           animatedPosition.value = animate(
-            point,
+            position,
             configs,
             velocity,
-            animateToPointCompleted
+            animateToPositionCompleted
           );
         } else if (_providedAnimationConfigs) {
           /**
            * use animationConfigs callback, if provided
            */
+          // @ts-ignore
           animatedPosition.value = animate(
-            point,
+            position,
             _providedAnimationConfigs,
             velocity,
-            animateToPointCompleted
+            animateToPositionCompleted
           );
         } else {
+          // @ts-ignore
           animatedPosition.value = animate(
-            point,
+            position,
             {
               duration: _providedAnimationDuration,
               easing: _providedAnimationEasing,
             },
             0,
-            animateToPointCompleted
+            animateToPositionCompleted
           );
         }
       },
@@ -438,15 +478,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         _providedAnimationEasing,
       ]
     );
+    //#endregion
 
-    const scrollableState = useDerivedValue(() => {
-      return animatedSheetState.value === SHEET_STATE.FULL_SCREEN ||
-        animatedSheetState.value === SHEET_STATE.EXTENDED
-        ? SCROLLABLE_STATE.UNLOCKED
-        : SCROLLABLE_STATE.LOCKED;
-    });
-
-    // hooks
+    //#region gesture interaction hooks
     const [
       contentPanGestureHandler,
       contentPanGestureState,
@@ -459,11 +493,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       keyboardBehavior: keyboardBehavior,
       animatedPosition,
       animatedSnapPoints,
-      isExtendedByKeyboard,
+      isExtendedByKeyboard: isInTemporaryPosition,
       scrollableContentOffsetY,
-      animateToPoint,
+      animateToPoint: animateToPosition,
     });
-
     const [
       handlePanGestureHandler,
       handlePanGestureState,
@@ -476,32 +509,19 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       keyboardBehavior,
       animatedPosition,
       animatedSnapPoints,
-      isExtendedByKeyboard,
-      animateToPoint,
+      isExtendedByKeyboard: isInTemporaryPosition,
+      animateToPoint: animateToPosition,
     });
     //#endregion
 
-    //#region layout callbacks
-    const handleOnContainerMeasureHeight = useCallback((height: number) => {
-      // console.log('BottomSheet', 'handleOnContainerMeasureHeight', height);
-      didSetContainerHeight.current = true;
-      setContainerHeight(height);
-    }, []);
-
-    const handleOnHandleMeasureHeight = useCallback((height: number) => {
-      // console.log('BottomSheet', 'handleOnHandleMeasureHeight', height);
-      didSetHandleHeight.current = true;
-      setHandleHeight(height);
-    }, []);
-    //#endregion
-
     //#region public methods
     const handleSnapTo = useCallback(
-      (
+      function handleSnapToPoint(
         index: number,
         animationDuration: number = DEFAULT_ANIMATION_DURATION,
         animationEasing: Animated.EasingFunction = DEFAULT_ANIMATION_EASING
-      ) => {
+      ) {
+        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, ${
@@ -512,7 +532,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * verify if sheet is closed.
          */
-        if (animatedPosition.value === safeContainerHeight) {
+        if (animatedPosition.value === animatedContainerHeight.value) {
           isClosing.current = false;
         }
 
@@ -524,22 +544,31 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }
 
         const newSnapPoint = snapPoints[index];
-        runOnUI(animateToPoint)(newSnapPoint, 0, {
+        runOnUI(animateToPosition)(newSnapPoint, 0, {
           duration: animationDuration,
           easing: animationEasing,
         });
       },
-      [animateToPoint, snapPoints, safeContainerHeight, animatedPosition]
+      [
+        animateToPosition,
+        animatedSnapPoints,
+        animatedContainerHeight.value,
+        animatedPosition,
+      ]
     );
     const handleClose = useCallback(
-      (
+      function handleClose(
         animationDuration: number = DEFAULT_ANIMATION_DURATION,
         animationEasing: Animated.EasingFunction = DEFAULT_ANIMATION_EASING
-      ) => {
+      ) {
+        print({
+          component: BottomSheet.name,
+          method: handleClose.name,
+        });
         /**
          * verify if sheet is closed.
          */
-        if (animatedPosition.value === safeContainerHeight) {
+        if (animatedPosition.value === animatedContainerHeight.value) {
           isClosing.current = false;
         }
 
@@ -551,22 +580,22 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }
 
         isClosing.current = true;
-        runOnUI(animateToPoint)(safeContainerHeight, 0, {
+        runOnUI(animateToPosition)(animatedContainerHeight.value, 0, {
           duration: animationDuration,
           easing: animationEasing,
         });
       },
-      [animateToPoint, safeContainerHeight, animatedPosition]
+      [animateToPosition, animatedContainerHeight, animatedPosition]
     );
     const handleExpand = useCallback(
-      (
+      function handleExpand(
         animationDuration: number = DEFAULT_ANIMATION_DURATION,
         animationEasing: Animated.EasingFunction = DEFAULT_ANIMATION_EASING
-      ) => {
+      ) {
         /**
          * verify if sheet is closed.
          */
-        if (animatedPosition.value === safeContainerHeight) {
+        if (animatedPosition.value === animatedContainerHeight.value) {
           isClosing.current = false;
         }
 
@@ -576,24 +605,29 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         if (isClosing.current) {
           return;
         }
-
+        const snapPoints = animatedSnapPoints.value;
         const newSnapPoint = snapPoints[snapPoints.length - 1];
-        runOnUI(animateToPoint)(newSnapPoint, 0, {
+        runOnUI(animateToPosition)(newSnapPoint, 0, {
           duration: animationDuration,
           easing: animationEasing,
         });
       },
-      [animateToPoint, snapPoints, safeContainerHeight, animatedPosition]
+      [
+        animateToPosition,
+        animatedSnapPoints,
+        animatedContainerHeight,
+        animatedPosition,
+      ]
     );
     const handleCollapse = useCallback(
-      (
+      function handleCollapse(
         animationDuration: number = DEFAULT_ANIMATION_DURATION,
         animationEasing: Animated.EasingFunction = DEFAULT_ANIMATION_EASING
-      ) => {
+      ) {
         /**
          * verify if sheet is closed.
          */
-        if (animatedPosition.value === safeContainerHeight) {
+        if (animatedPosition.value === animatedContainerHeight.value) {
           isClosing.current = false;
         }
 
@@ -604,13 +638,19 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           return;
         }
 
+        const snapPoints = animatedSnapPoints.value;
         const newSnapPoint = snapPoints[0];
-        runOnUI(animateToPoint)(newSnapPoint, 0, {
+        runOnUI(animateToPosition)(newSnapPoint, 0, {
           duration: animationDuration,
           easing: animationEasing,
         });
       },
-      [animateToPoint, snapPoints, safeContainerHeight, animatedPosition]
+      [
+        animateToPosition,
+        animatedSnapPoints,
+        animatedContainerHeight,
+        animatedPosition,
+      ]
     );
 
     useImperativeHandle(ref, () => ({
@@ -625,13 +665,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const internalContextVariables = useMemo(
       () => ({
         enableContentPanningGesture,
-        snapPointsCount: snapPoints.length,
         animatedIndex,
         animatedPosition,
-        animationState,
+        animationState: animatedAnimationState,
         animatedSheetState,
         contentPanGestureHandler,
-        scrollableState,
+        scrollableState: animatedScrollableState,
         scrollableContentOffsetY,
         shouldHandleKeyboardEvents,
         simultaneousHandlers: _providedSimultaneousHandlers,
@@ -644,16 +683,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         removeScrollableRef,
       }),
       [
-        snapPoints.length,
         animatedIndex,
         animatedPosition,
-        animationState,
+        animatedAnimationState,
         animatedSheetState,
         contentPanGestureHandler,
         handleSettingScrollableRef,
         removeScrollableRef,
         shouldHandleKeyboardEvents,
-        scrollableState,
+        animatedScrollableState,
         scrollableContentOffsetY,
         enableContentPanningGesture,
         _providedSimultaneousHandlers,
@@ -676,41 +714,24 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region styles
-    const containerAnimatedStyle = useAnimatedStyle(() => {
-      return {
-        opacity: isLayoutCalculated ? 1 : 0,
-        transform: [
-          {
-            translateY: isLayoutCalculated
-              ? Math.max(
-                  animatedPosition.value + animatedKeyboardOffset.value,
-                  topInset
-                )
-              : safeContainerHeight,
-          },
-        ],
-      };
-    }, [
-      safeContainerHeight,
-      isLayoutCalculated,
-      animatedKeyboardOffset,
-      topInset,
-    ]);
+    const containerAnimatedStyle = useAnimatedStyle(() => ({
+      transform: [
+        {
+          translateY: Math.max(animatedPosition.value, topInset),
+        },
+      ],
+    }));
     const containerStyle = useMemo(
       () => [_providedStyle, styles.container, containerAnimatedStyle],
       [_providedStyle, containerAnimatedStyle]
     );
-    const contentContainerAnimatedStyle = useAnimatedStyle(
-      () => ({
-        height: animatedSheetHeight.value,
-      }),
-      []
-    );
+    const contentContainerAnimatedStyle = useAnimatedStyle(() => ({
+      height: animatedSheetHeight.value,
+    }));
     const contentContainerStyle = useMemo(
       () => [styles.contentContainer, contentContainerAnimatedStyle],
       [contentContainerAnimatedStyle]
     );
-
     /**
      * added safe area to prevent the sheet from floating above
      * the bottom of the screen, when sheet being over dragged or
@@ -719,72 +740,92 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const contentMaskContainerStyle = useMemo<ViewStyle>(
       () => ({
         ...styles.contentMaskContainer,
-        paddingBottom: sheetHeight,
+        paddingBottom: animatedContentHeight.value,
       }),
-      [sheetHeight]
+      [animatedContentHeight]
     );
     //#endregion
 
     //#region effects
     /**
-     * This will animate the sheet to the initial snap point
-     * when component is mounted.
+     * React to `isLayoutCalculated` change, to insure that the sheet will
+     * appears/mounts only when all layout is been calculated.
+     *
+     * @alias OnMount
      */
-    useLayoutEffect(() => {
-      if (
-        animateOnMount &&
-        isLayoutCalculated &&
-        didMountOnAnimate.current === false &&
-        isClosing.current === false &&
-        snapPoints[_providedIndex] !== safeContainerHeight &&
-        _providedIndex !== -1
-      ) {
-        const newSnapPoint = snapPoints[_providedIndex];
-        requestAnimationFrame(() => runOnUI(animateToPoint)(newSnapPoint));
-        didMountOnAnimate.current = true;
-      }
-    }, [
-      _providedIndex,
-      animateOnMount,
-      isLayoutCalculated,
-      snapPoints,
-      safeContainerHeight,
-      animateToPoint,
-    ]);
+    useAnimatedReaction(
+      () => isLayoutCalculated.value,
+      _isLayoutCalculated => {
+        /**
+         * exit method if:
+         * - layout is not calculated yet.
+         * - already did animate on mount.
+         */
+        if (!_isLayoutCalculated || isAnimatedOnMount.value) {
+          return;
+        }
+
+        const nextPosition = animatedSnapPoints.value[_providedIndex];
 
-    /*
-     * keep animated position synced with snap points.
-     */
-    useEffect(() => {
-      if (
-        isLayoutCalculated &&
-        currentIndexRef.current !== -1 &&
-        isClosing.current === false
-      ) {
         /**
-         * Set index to new the snap points length, if previous index
-         * is out of bond.
+         * here we exit method early because the next position
+         * is out of the screen, this happens when `snapPoints`
+         * still being calculated.
          */
-        const safeCurrentIndex = Math.min(
-          currentIndexRef.current,
-          snapPoints.length - 1
-        );
+        if (
+          nextPosition === INITIAL_POSITION ||
+          nextPosition === animatedContainerHeight.value
+        ) {
+          return;
+        }
 
-        const newSnapPoint = snapPoints[safeCurrentIndex];
-        requestAnimationFrame(() => runOnUI(animateToPoint)(newSnapPoint));
+        runOnJS(print)({
+          component: BottomSheet.name,
+          method: 'useAnimatedReaction::OnMount',
+          params: {
+            _isLayoutCalculated,
+            animatedSnapPoints: animatedSnapPoints.value,
+            nextPosition,
+          },
+        });
+
+        if (animateOnMount) {
+          animateToPosition(nextPosition);
+        } else {
+          // to snap sheet to position without duration
+          animateToPosition(nextPosition, 0, { duration: 0 });
+        }
+        isAnimatedOnMount.value = true;
       }
-    }, [isLayoutCalculated, snapPoints, animateToPoint]);
+    );
 
     /**
-     * handle keyboard appearance behavior
+     * React to `snapPoints` change, to insure that the sheet position reflect
+     * to the current point correctly.
+     */
+    useAnimatedReaction(
+      () => animatedSnapPoints.value,
+      _animatedSnapPoints => {
+        if (!isLayoutCalculated.value || !isAnimatedOnMount.value) {
+          return;
+        }
+
+        const nextPosition = _animatedSnapPoints[animatedCurrentIndex.value];
+        animateToPosition(nextPosition);
+      }
+    );
+
+    /**
+     * React to keyboard appearance.
      */
     useAnimatedReaction(
       () => keyboardState.value,
-      (state, previousState) => {
-        if (state === previousState) {
+      (_keyboardState, _previousKeyboardState) => {
+        if (_keyboardState === _previousKeyboardState) {
           return;
         }
 
+        const snapPoints = animatedSnapPoints.value;
         let animationConfigs = getKeyboardAnimationConfigs(
           keyboardAnimationEasing.value,
           keyboardAnimationDuration.value
@@ -795,13 +836,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          */
         if (
           keyboardBlurBehavior === KEYBOARD_BLUR_BEHAVIOR.restore &&
-          state === KEYBOARD_STATE.HIDDEN &&
+          _keyboardState === KEYBOARD_STATE.HIDDEN &&
           contentPanGestureState.value !== State.ACTIVE &&
           handlePanGestureState.value !== State.ACTIVE
         ) {
-          isExtendedByKeyboard.value = false;
+          isInTemporaryPosition.value = false;
           const newSnapPoint = snapPoints[animatedCurrentIndex.value];
-          animateToPoint(newSnapPoint, 0, animationConfigs);
+          animateToPosition(newSnapPoint, 0, animationConfigs);
         }
 
         /**
@@ -809,10 +850,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          */
         if (
           keyboardBehavior === KEYBOARD_BEHAVIOR.extend &&
-          state === KEYBOARD_STATE.SHOWN
+          _keyboardState === KEYBOARD_STATE.SHOWN
         ) {
           const newSnapPoint = snapPoints[snapPoints.length - 1];
-          animateToPoint(newSnapPoint, 0, animationConfigs);
+          animateToPosition(newSnapPoint, 0, animationConfigs);
           return;
         }
 
@@ -821,10 +862,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          */
         if (
           keyboardBehavior === KEYBOARD_BEHAVIOR.fullScreen &&
-          state === KEYBOARD_STATE.SHOWN
+          _keyboardState === KEYBOARD_STATE.SHOWN
         ) {
-          isExtendedByKeyboard.value = true;
-          animateToPoint(topInset, 0, animationConfigs);
+          isInTemporaryPosition.value = true;
+          animateToPosition(topInset, 0, animationConfigs);
           return;
         }
 
@@ -833,11 +874,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          */
         if (
           keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
-          state === KEYBOARD_STATE.SHOWN
+          _keyboardState === KEYBOARD_STATE.SHOWN
         ) {
-          isExtendedByKeyboard.value = true;
+          isInTemporaryPosition.value = true;
           const newSnapPoint = snapPoints[snapPoints.length - 1];
-          animateToPoint(
+          animateToPosition(
             Math.max(topInset, newSnapPoint - keyboardHeight.value),
             0,
             animationConfigs
@@ -851,9 +892,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
      */
     useAnimatedReaction(
       () => animatedPosition.value,
-      value => {
+      _animatedPosition => {
         if (_providedAnimatedPosition) {
-          _providedAnimatedPosition.value = value;
+          _providedAnimatedPosition.value = _animatedPosition;
         }
       }
     );
@@ -863,9 +904,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
      */
     useAnimatedReaction(
       () => animatedIndex.value,
-      value => {
+      _animatedIndex => {
         if (_providedAnimatedIndex) {
-          _providedAnimatedIndex.value = value;
+          _providedAnimatedIndex.value = _animatedIndex;
         }
       }
     );
@@ -877,7 +918,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       () => ({
         _animatedIndex: animatedIndex.value,
         _animatedPosition: animatedPosition.value,
-        _animationState: animationState.value,
+        _animationState: animatedAnimationState.value,
         _contentGestureState: contentPanGestureState.value,
         _handleGestureState: handlePanGestureState.value,
       }),
@@ -895,8 +936,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           (_handleGestureState === State.END ||
             _handleGestureState === State.UNDETERMINED)
         ) {
-          animatedCurrentIndex.value = animatedIndex.value;
-          runOnJS(handleOnChange)(animatedIndex.value);
+          runOnJS(print)({
+            component: BottomSheet.name,
+            method: 'useAnimatedReaction::OnChange',
+            params: {
+              animatedCurrentIndex: animatedCurrentIndex.value,
+              animatedIndex: _animatedIndex,
+            },
+          });
+
+          animatedCurrentIndex.value = _animatedIndex;
+          runOnJS(handleOnChange)(_animatedIndex);
           runOnJS(refreshUIElements)();
         }
       },
@@ -905,14 +955,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     // render
-    // console.log(
-    //   'BottomSheet',
-    //   'render',
-    //   snapPoints,
-    //   safeContainerHeight,
-    //   safeHandleHeight,
-    //   sheetHeight
-    // );
+    print({
+      component: BottomSheet.name,
+      method: 'render',
+      params: {
+        animatedSnapPoints: animatedSnapPoints.value,
+      },
+    });
     return (
       <BottomSheetProvider value={externalContextVariables}>
         <BottomSheetBackdropContainer
@@ -923,9 +972,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         />
         <BottomSheetContainer
           key="BottomSheetContainer"
-          containerHeight={safeContainerHeight}
-          shouldMeasureHeight={shouldMeasureContainerHeight}
-          onMeasureHeight={handleOnContainerMeasureHeight}
+          containerHeight={animatedContainerHeight}
+          topInset={topInset}
+          bottomInset={bottomInset}
         >
           <Animated.View
             accessible={true}
@@ -944,43 +993,38 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                 pointerEvents="box-none"
                 style={contentMaskContainerStyle}
               >
-                {isLayoutCalculated && (
-                  <BottomSheetDraggableView
-                    key="BottomSheetRootDraggableView"
-                    style={contentContainerStyle}
-                  >
-                    {typeof children === 'function'
-                      ? (children as Function)()
-                      : children}
-                  </BottomSheetDraggableView>
-                )}
+                <BottomSheetDraggableView
+                  key="BottomSheetRootDraggableView"
+                  style={contentContainerStyle}
+                >
+                  {typeof children === 'function'
+                    ? (children as Function)()
+                    : children}
+                </BottomSheetDraggableView>
               </Animated.View>
               <BottomSheetHandleContainer
                 key="BottomSheetHandleContainer"
                 animatedIndex={animatedIndex}
                 animatedPosition={animatedPosition}
-                shouldMeasureHeight={shouldMeasureHandleHeight}
+                handleHeight={animatedHandleHeight}
                 enableHandlePanningGesture={enableHandlePanningGesture}
                 handlePanGestureHandler={handlePanGestureHandler}
                 handleComponent={handleComponent}
-                snapPoints={snapPoints}
-                onMeasureHeight={handleOnHandleMeasureHeight}
               />
             </BottomSheetInternalProvider>
           </Animated.View>
-          {/* <BottomSheetDebugView
+          <BottomSheetDebugView
             values={{
               animatedIndex,
+              animatedCurrentIndex,
               animatedPosition,
-              keyboardState,
-              keyboardHeight,
               animatedSheetHeight,
               animatedSheetState,
-              scrollableContentOffsetY,
-              scrollableState,
-              isExtendedByKeyboard,
+              animatedContainerHeight,
+              animatedHandleHeight,
+              isLayoutCalculated,
             }}
-          /> */}
+          />
         </BottomSheetContainer>
       </BottomSheetProvider>
     );
diff --git a/src/components/bottomSheet/constants.ts b/src/components/bottomSheet/constants.ts
index bd6c73b61..538d533c1 100644
--- a/src/components/bottomSheet/constants.ts
+++ b/src/components/bottomSheet/constants.ts
@@ -1,9 +1,13 @@
 import Animated, { Easing } from 'react-native-reanimated';
-import { KEYBOARD_BEHAVIOR, KEYBOARD_BLUR_BEHAVIOR } from '../../constants';
+import {
+  KEYBOARD_BEHAVIOR,
+  KEYBOARD_BLUR_BEHAVIOR,
+  WINDOW_HEIGHT,
+} from '../../constants';
 import { exp } from '../../utilities/easingExp';
 
+// default values
 const DEFAULT_ANIMATION_EASING: Animated.EasingFunction = Easing.out(exp);
-
 const DEFAULT_ANIMATION_DURATION = 500;
 const DEFAULT_HANDLE_HEIGHT = 24;
 const DEFAULT_OVER_DRAG_RESISTANCE_FACTOR = 2.5;
@@ -12,10 +16,15 @@ const DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = true;
 const DEFAULT_ENABLE_OVER_DRAG = true;
 const DEFAULT_ENABLE_FLASH_SCROLLABLE_INDICATOR_ON_EXPAND = true;
 const DEFAULT_ANIMATE_ON_MOUNT = false;
-
 const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.none;
 const DEFAULT_KEYBOARD_BLUR_BEHAVIOR = KEYBOARD_BLUR_BEHAVIOR.none;
 
+// initial values
+const INITIAL_SNAP_POINT = -999;
+const INITIAL_CONTAINER_HEIGHT = -999;
+const INITIAL_HANDLE_HEIGHT = -999;
+const INITIAL_POSITION = WINDOW_HEIGHT;
+
 export {
   DEFAULT_ANIMATION_EASING,
   DEFAULT_ANIMATION_DURATION,
@@ -28,4 +37,9 @@ export {
   DEFAULT_ANIMATE_ON_MOUNT,
   DEFAULT_KEYBOARD_BEHAVIOR,
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
+  // initial
+  INITIAL_POSITION,
+  INITIAL_CONTAINER_HEIGHT,
+  INITIAL_HANDLE_HEIGHT,
+  INITIAL_SNAP_POINT,
 };
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index e2a04c29e..082c58fb0 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -12,18 +12,20 @@ import type {
 
 export interface BottomSheetProps
   extends BottomSheetAnimationConfigs,
-    Partial<Pick<
-      PanGestureHandlerProps,
-      | 'activeOffsetY'
-      | 'activeOffsetX'
-      | 'failOffsetY'
-      | 'failOffsetX'
-      | 'waitFor'
-      | 'simultaneousHandlers'
-    >> {
-  // configuration
-  /**
-   * Initial snap index, you also could provide `-1` to initiate bottom sheet in closed state.
+    Partial<
+      Pick<
+        PanGestureHandlerProps,
+        | 'activeOffsetY'
+        | 'activeOffsetX'
+        | 'failOffsetY'
+        | 'failOffsetX'
+        | 'waitFor'
+        | 'simultaneousHandlers'
+      >
+    > {
+  //#region configuration
+  /**
+   * Initial snap point index, provide `-1` to initiate bottom sheet in closed state.
    * @type number
    * @default 0
    */
@@ -38,28 +40,6 @@ export interface BottomSheetProps
    * snapPoints={[-1, '%100']}
    */
   snapPoints: Array<string | number>;
-  /**
-   * 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
-   */
-  handleHeight?: 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
-   */
-  containerHeight?: number;
-  /**
-   * Top inset value helps to calculate percentage snap points values,
-   * usually comes from `@react-navigation/stack` hook `useHeaderHeight` or
-   * from `react-native-safe-area-context` hook `useSafeArea`.
-   * @type number
-   * @default 0
-   */
-  topInset?: number;
   /**
    * Defines how violently sheet has to stopped while over dragging.
    * @type number
@@ -96,6 +76,41 @@ export interface BottomSheetProps
    * @default false
    */
   animateOnMount?: boolean;
+  //#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
+   */
+  handleHeight?: 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 | Animated.SharedValue<number>;
+   */
+  containerHeight?: number | Animated.SharedValue<number>;
+  /**
+   * Top inset value helps to calculate percentage snap points values,
+   * usually comes from `@react-navigation/stack` hook `useHeaderHeight` or
+   * from `react-native-safe-area-context` hook `useSafeArea`.
+   * @type number
+   * @default 0
+   */
+  topInset?: number;
+  /**
+   * Bottom inset value helps to calculate percentage snap points values,
+   * usually comes from `react-native-safe-area-context` hook `useSafeArea`.
+   * @type number
+   * @default 0
+   */
+  bottomInset?: number;
+  //#endregion
+
+  //#region keyboard
   /**
    * Defines the keyboard appearance behavior.
    * - `none`: do nothing.
@@ -112,6 +127,7 @@ export interface BottomSheetProps
    * - `restore`: restore sheet position.
    */
   keyboardBlurBehavior?: keyof typeof KEYBOARD_BLUR_BEHAVIOR;
+  //#endregion
 
   /**
    * View style to be applied at the sheet container,
@@ -133,7 +149,7 @@ export interface BottomSheetProps
     >
   >;
 
-  // animated nodes
+  //#region animated nodes
   /**
    * Animated value to be used as a callback of the position node internally.
    * @type Animated.Value<number>
@@ -144,8 +160,9 @@ export interface BottomSheetProps
    * @type Animated.Value<number>
    */
   animatedIndex?: Animated.SharedValue<number>;
+  //#endregion
 
-  // callbacks
+  //#region callbacks
   /**
    * Callback when sheet position changed to a provided point.
    * @type (index: number) => void;
@@ -156,8 +173,9 @@ export interface BottomSheetProps
    * @type (fromIndex: number, toIndex: number) => void;
    */
   onAnimate?: (fromIndex: number, toIndex: number) => void;
+  //#endregion
 
-  // components
+  //#region components
   /**
    * Component to be placed as a sheet handle.
    * @see {BottomSheetHandleProps}
@@ -182,6 +200,7 @@ export interface BottomSheetProps
    * @type React.ReactNode[] | React.ReactNode
    */
   children: (() => React.ReactNode) | React.ReactNode[] | React.ReactNode;
+  //#endregion
 }
 
 export interface BottomSheetAnimationConfigs {
diff --git a/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
index acf33cf29..1a55677dc 100644
--- a/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+++ b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -1,51 +1,67 @@
-import React, { memo, useCallback, useMemo } from 'react';
-import { View } from 'react-native';
-import type { BottomSheetContainerProps } from './types';
+import React, { memo, useMemo } from 'react';
+import { LayoutChangeEvent, View } from 'react-native';
+import { print } from '../../utilities';
+import { INITIAL_CONTAINER_HEIGHT } from '../bottomSheet/constants';
 import { styles } from './styles';
+import type { BottomSheetContainerProps } from './types';
 
-const BottomSheetContainerComponent = ({
-  shouldMeasureHeight,
+function BottomSheetContainerComponent({
   containerHeight,
-  onMeasureHeight,
+  topInset = 0,
+  bottomInset = 0,
   children,
-}: BottomSheetContainerProps) => {
-  //#region callbacks
-  const handleOnLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { height },
-      },
-    }) => {
-      onMeasureHeight(height);
-    },
-    [onMeasureHeight]
-  );
-  //#endregion
-
+}: BottomSheetContainerProps) {
   //#region styles
   const containerStyle = useMemo(
     () => [
       styles.container,
-      !shouldMeasureHeight && containerHeight
-        ? { height: containerHeight }
-        : {},
+      {
+        top: topInset,
+        bottom: bottomInset,
+      },
     ],
-    [containerHeight, shouldMeasureHeight]
+    [topInset, bottomInset]
+  );
+  //#endregion
+
+  //#region callbacks
+  const getHandleContainerLayout = useMemo(
+    () =>
+      containerHeight.value === INITIAL_CONTAINER_HEIGHT
+        ? function handleContainerLayout({
+            nativeEvent: {
+              layout: { height },
+            },
+          }: LayoutChangeEvent) {
+            if (height === containerHeight.value) {
+              return;
+            }
+            containerHeight.value = height;
+            print({
+              component: BottomSheetContainer.displayName,
+              method: 'handleContainerLayout',
+              params: {
+                height,
+              },
+            });
+          }
+        : undefined,
+
+    [containerHeight]
   );
   //#endregion
 
   //#region render
-  // console.log('BottomSheetContainer', 'render', shouldMeasureHeight);
   return (
     <View
       pointerEvents="box-none"
+      onLayout={getHandleContainerLayout}
       style={containerStyle}
-      onLayout={shouldMeasureHeight ? handleOnLayout : undefined}
       children={children}
     />
   );
   //#endregion
-};
+}
 
 const BottomSheetContainer = memo(BottomSheetContainerComponent);
 BottomSheetContainer.displayName = 'BottomSheetContainer';
diff --git a/src/components/bottomSheetContainer/types.d.ts b/src/components/bottomSheetContainer/types.d.ts
index d644ae546..313f6fb42 100644
--- a/src/components/bottomSheetContainer/types.d.ts
+++ b/src/components/bottomSheetContainer/types.d.ts
@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
+import type Animated from 'react-native-reanimated';
 
 export interface BottomSheetContainerProps {
-  shouldMeasureHeight: boolean;
-  containerHeight?: number;
-  onMeasureHeight: (height: number) => void;
+  containerHeight: Animated.SharedValue<number>;
+  topInset?: number;
+  bottomInset?: number;
   children: ReactNode;
 }
diff --git a/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx b/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
index 137786c22..117cf2ab1 100644
--- a/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
+++ b/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
@@ -1,20 +1,22 @@
 import React, { memo, useCallback, useMemo } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import BottomSheetHandle from '../bottomSheetHandle';
-import type { BottomSheetHandleContainerProps } from './types';
 import { useBottomSheetInternal } from '../../hooks';
+import { print } from '../../utilities';
+import type { BottomSheetHandleContainerProps } from './types';
+import { INITIAL_HANDLE_HEIGHT } from '../bottomSheet/constants';
 
-const BottomSheetHandleContainerComponent = ({
+function BottomSheetHandleContainerComponent({
   animatedIndex,
   animatedPosition,
   simultaneousHandlers: _internalSimultaneousHandlers,
   enableHandlePanningGesture,
-  shouldMeasureHeight,
   handlePanGestureHandler,
-  onMeasureHeight,
+  handleHeight,
   handleComponent: _providedHandleComponent,
-}: BottomSheetHandleContainerProps) => {
+}: BottomSheetHandleContainerProps) {
   //#region variables
   const {
     activeOffsetX,
@@ -49,15 +51,29 @@ const BottomSheetHandleContainerComponent = ({
   //#endregion
 
   //#region callbacks
-  const handleOnLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { height },
-      },
-    }) => {
-      onMeasureHeight(height);
-    },
-    [onMeasureHeight]
+  const getHandleContainerLayout = useMemo(
+    () =>
+      handleHeight.value === INITIAL_HANDLE_HEIGHT
+        ? function handleContainerLayout({
+            nativeEvent: {
+              layout: { height },
+            },
+          }: LayoutChangeEvent) {
+            if (height === handleHeight.value) {
+              return;
+            }
+            handleHeight.value = height;
+
+            print({
+              component: BottomSheetHandleContainer.displayName,
+              method: 'handleContainerLayout',
+              params: {
+                height,
+              },
+            });
+          }
+        : undefined,
+    [handleHeight]
   );
   //#endregion
 
@@ -79,12 +95,6 @@ const BottomSheetHandleContainerComponent = ({
     );
   }, [animatedIndex, animatedPosition, _providedHandleComponent]);
 
-  // console.log(
-  //   'BottomSheetHandleContainer',
-  //   'render',
-  //   shouldRenderHandle,
-  //   shouldMeasureHeight
-  // );
   return shouldRenderHandle ? (
     <PanGestureHandler
       enabled={enableHandlePanningGesture}
@@ -102,14 +112,14 @@ const BottomSheetHandleContainerComponent = ({
         accessibilityRole="adjustable"
         accessibilityLabel="Bottom Sheet handle"
         accessibilityHint="Drag up or down to extend or minimize the Bottom Sheet"
-        onLayout={shouldMeasureHeight ? handleOnLayout : undefined}
+        onLayout={getHandleContainerLayout}
       >
         {renderHandle()}
       </Animated.View>
     </PanGestureHandler>
   ) : null;
   //#endregion
-};
+}
 
 const BottomSheetHandleContainer = memo(BottomSheetHandleContainerComponent);
 BottomSheetHandleContainer.displayName = 'BottomSheetHandleContainer';
diff --git a/src/components/bottomSheetHandleContainer/types.d.ts b/src/components/bottomSheetHandleContainer/types.d.ts
index b5404fcb6..f9c69e2db 100644
--- a/src/components/bottomSheetHandleContainer/types.d.ts
+++ b/src/components/bottomSheetHandleContainer/types.d.ts
@@ -1,4 +1,5 @@
 import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
+import type Animated from 'react-native-reanimated';
 import type { BottomSheetProps } from '../bottomSheet';
 import type { BottomSheetHandleProps } from '../bottomSheetHandle';
 
@@ -7,7 +8,6 @@ export interface BottomSheetHandleContainerProps
     Pick<BottomSheetProps, 'handleComponent' | 'enableHandlePanningGesture'>,
     BottomSheetHandleProps {
   handlePanGestureHandler: any;
-  shouldMeasureHeight: boolean;
-  snapPoints: Array<number>;
-  onMeasureHeight: (height: number) => void;
+
+  handleHeight: Animated.SharedValue<number>;
 }
diff --git a/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx b/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx
index 75213c4d4..ba9f21109 100644
--- a/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx
+++ b/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx
@@ -1,11 +1,13 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
 import { PortalProvider } from '@gorhom/portal';
 import {
   BottomSheetModalProvider,
   BottomSheetModalInternalProvider,
 } from '../../contexts';
 import BottomSheetContainer from '../bottomSheetContainer';
-import { MODAL_STACK_BEHAVIOR, WINDOW_HEIGHT } from '../../constants';
+import { MODAL_STACK_BEHAVIOR } from '../../constants';
+import { INITIAL_CONTAINER_HEIGHT } from '../bottomSheet/constants';
 import type { BottomSheetModalStackBehavior } from '../bottomSheetModal';
 import type {
   BottomSheetModalProviderProps,
@@ -15,20 +17,14 @@ import type {
 const BottomSheetModalProviderWrapper = ({
   children,
 }: BottomSheetModalProviderProps) => {
-  //#region layout state
-  const [containerHeight, setContainerHeight] = useState(WINDOW_HEIGHT);
+  //#region layout variables
+  const animatedContainerHeight = useSharedValue(INITIAL_CONTAINER_HEIGHT);
   //#endregion
 
   //#region variables
   const sheetsQueueRef = useRef<BottomSheetModalRef[]>([]);
   //#endregion
 
-  //#region callback
-  const handleOnContainerMeasureHeight = useCallback((height: number) => {
-    setContainerHeight(height);
-  }, []);
-  //#endregion
-
   //#region private methods
   const handleMountSheet = useCallback(
     (key: string, ref: any, stackBehavior: BottomSheetModalStackBehavior) => {
@@ -160,13 +156,13 @@ const BottomSheetModalProviderWrapper = ({
   );
   const internalContextVariables = useMemo(
     () => ({
-      containerHeight,
+      containerHeight: animatedContainerHeight,
       mountSheet: handleMountSheet,
       unmountSheet: handleUnmountSheet,
       willUnmountSheet: handleWillUnmountSheet,
     }),
     [
-      containerHeight,
+      animatedContainerHeight,
       handleMountSheet,
       handleUnmountSheet,
       handleWillUnmountSheet,
@@ -179,8 +175,7 @@ const BottomSheetModalProviderWrapper = ({
     <BottomSheetModalProvider value={externalContextVariables}>
       <BottomSheetModalInternalProvider value={internalContextVariables}>
         <BottomSheetContainer
-          shouldMeasureHeight={true}
-          onMeasureHeight={handleOnContainerMeasureHeight}
+          containerHeight={animatedContainerHeight}
           children={null}
         />
         <PortalProvider>{children}</PortalProvider>
diff --git a/src/contexts/internal.ts b/src/contexts/internal.ts
index 41f39ad48..4c8a05394 100644
--- a/src/contexts/internal.ts
+++ b/src/contexts/internal.ts
@@ -19,7 +19,6 @@ export interface BottomSheetInternalContextType
     | 'simultaneousHandlers'
   > {
   enableContentPanningGesture: boolean;
-  snapPointsCount: number;
   animatedPosition: Animated.SharedValue<number>;
   animatedIndex: Animated.SharedValue<number>;
   animationState: Animated.SharedValue<ANIMATION_STATE>;
diff --git a/src/contexts/modal/internal.ts b/src/contexts/modal/internal.ts
index e6c674b57..2c73ab642 100644
--- a/src/contexts/modal/internal.ts
+++ b/src/contexts/modal/internal.ts
@@ -1,9 +1,10 @@
 import { createContext, Ref } from 'react';
+import type Animated from 'react-native-reanimated';
 import type BottomSheet from '../../components/bottomSheet';
 import type { BottomSheetModalStackBehavior } from '../../components/bottomSheetModal';
 
 export interface BottomSheetModalInternalContextType {
-  containerHeight: number;
+  containerHeight: Animated.SharedValue<number>;
   mountSheet: (
     key: string,
     ref: Ref<BottomSheet>,
diff --git a/src/hooks/useNormalizedSnapPoints.ts b/src/hooks/useNormalizedSnapPoints.ts
index ee9347ca1..7f480624c 100644
--- a/src/hooks/useNormalizedSnapPoints.ts
+++ b/src/hooks/useNormalizedSnapPoints.ts
@@ -1,29 +1,33 @@
-import { useMemo } from 'react';
-import { normalizeSnapPoints } from '../utilities';
+import Animated, { useDerivedValue } from 'react-native-reanimated';
+import { normalizeSnapPoint } from '../utilities';
+import type { BottomSheetProps } from '../components/bottomSheet';
+import {
+  INITIAL_CONTAINER_HEIGHT,
+  INITIAL_SNAP_POINT,
+} from '../components/bottomSheet/constants';
 
+/**
+ * Convert percentage snap points to pixels in screen and calculate
+ * the accurate snap points positions.
+ * @param providedSnapPoints provided snap points.
+ * @param containerHeight BottomSheetContainer height.
+ * @param topInset top inset.
+ * @returns {Animated.SharedValue<number[]>}
+ */
 export const useNormalizedSnapPoints = (
-  snapPoints: Array<number | string>,
-  topInset: number,
-  containerHeight: number = 0,
-  handleHeight: number = 0
-) =>
-  useMemo(() => {
-    const normalizedSnapPoints = normalizeSnapPoints(
-      snapPoints,
-      containerHeight,
-      topInset
-    );
-    return normalizedSnapPoints.map(normalizedSnapPoint => {
-      /**
-       * we subset handleHeight from the `normalizedSnapPoint` to make
-       * sure that sheets and its handle will be out of the screen.
-       */
-      if (normalizedSnapPoint === 0 && handleHeight !== 0) {
-        normalizedSnapPoint = normalizedSnapPoint - handleHeight;
+  providedSnapPoints: BottomSheetProps['snapPoints'],
+  containerHeight: Animated.SharedValue<number>,
+  topInset: number
+) => {
+  const normalizedSnapPoints = useDerivedValue(() =>
+    providedSnapPoints.map(snapPoint => {
+      if (containerHeight.value === INITIAL_CONTAINER_HEIGHT) {
+        return INITIAL_SNAP_POINT;
       }
-      return Math.max(
-        containerHeight - normalizedSnapPoint - handleHeight,
-        topInset
-      );
-    });
-  }, [snapPoints, topInset, containerHeight, handleHeight]);
+
+      return normalizeSnapPoint(snapPoint, containerHeight.value, topInset);
+    })
+  );
+
+  return normalizedSnapPoints;
+};
diff --git a/src/hooks/useReactiveSharedValue.ts b/src/hooks/useReactiveSharedValue.ts
index 6009be4e7..4aa6f3400 100644
--- a/src/hooks/useReactiveSharedValue.ts
+++ b/src/hooks/useReactiveSharedValue.ts
@@ -3,26 +3,34 @@ import Animated, {
   cancelAnimation,
   makeMutable,
 } from 'react-native-reanimated';
+import type { Primitive } from '../types';
 
 export const useReactiveSharedValue = <T>(
   value: T
-): Animated.SharedValue<T> => {
-  const ref = useRef<Animated.SharedValue<T>>(null);
+): T extends Primitive ? Animated.SharedValue<T> : T => {
+  const initialValueRef = useRef<T>(null);
+  const valueRef = useRef<Animated.SharedValue<T>>(null);
 
-  if (ref.current === null) {
+  if (typeof value === 'object' && 'value' in value) {
+    // if provided value is a shared value,
+    // then we do not initialize another one.
+  } else if (valueRef.current === null) {
     // @ts-ignore
-    ref.current = makeMutable(value);
-  } else if (ref.current.value !== value) {
-    ref.current.value = value;
+    initialValueRef.current = value;
+    // @ts-ignore
+    valueRef.current = makeMutable(value);
+  } else if (initialValueRef.current !== value) {
+    valueRef.current.value = value as T;
   }
 
   useEffect(() => {
     return () => {
-      if (ref.current) {
-        cancelAnimation(ref.current);
+      if (valueRef.current) {
+        cancelAnimation(valueRef.current);
       }
     };
   }, []);
 
-  return ref.current;
+  // @ts-ignore
+  return valueRef.current ?? value;
 };
diff --git a/src/index.ts b/src/index.ts
index 1d046bb64..99554cf75 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -37,3 +37,6 @@ export type { BottomSheetModalProps } from './components/bottomSheetModal';
 export type { BottomSheetHandleProps } from './components/bottomSheetHandle';
 export type { BottomSheetBackgroundProps } from './components/bottomSheetBackground';
 export type { BottomSheetBackdropProps } from './components/bottomSheetBackdrop';
+
+// logger
+export { enableLogging } from './utilities/logger';
diff --git a/src/types.d.ts b/src/types.d.ts
index 357c33bac..ded482ad9 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -78,3 +78,7 @@ export type ScrollableRef = {
   didResize: boolean;
 };
 //#endregion
+
+//#region utils
+export type Primitive = string | number | boolean;
+//#endregion
diff --git a/src/utilities/index.ts b/src/utilities/index.ts
index cfc012572..3539698b9 100644
--- a/src/utilities/index.ts
+++ b/src/utilities/index.ts
@@ -1,3 +1,4 @@
-export { normalizeSnapPoints } from './normalizeSnapPoints';
+export { normalizeSnapPoint } from './normalizeSnapPoint';
 export { animate } from './animate';
 export { getKeyboardAnimationConfigs } from './getKeyboardAnimationConfigs';
+export { print } from './logger';
diff --git a/src/utilities/logger.ts b/src/utilities/logger.ts
new file mode 100644
index 000000000..46263cfce
--- /dev/null
+++ b/src/utilities/logger.ts
@@ -0,0 +1,42 @@
+interface PrintOptions {
+  component?: string;
+  method?: string;
+  params?: Record<string, any> | string | number | boolean;
+}
+
+type Print = (options: PrintOptions) => void;
+
+let isLoggingEnabled = false;
+
+const enableLogging = () => {
+  if (!__DEV__) {
+    console.warn('[BottomSheet] could not enable logging on production!');
+    return;
+  }
+  isLoggingEnabled = true;
+};
+
+let print: Print = () => {};
+
+if (__DEV__) {
+  print = ({ component, method, params }) => {
+    if (!isLoggingEnabled) {
+      return;
+    }
+    let message = '';
+
+    if (typeof params === 'object') {
+      message = Object.keys(params)
+        .map(key => `${key}:${params[key]}`)
+        .join(' ');
+    } else {
+      message = `${params ?? ''}`;
+    }
+    // eslint-disable-next-line no-console
+    console.log(`[${[component, method].filter(Boolean).join('::')}]`, message);
+  };
+}
+
+Object.freeze(print);
+
+export { print, enableLogging };
diff --git a/src/utilities/normalizeSnapPoint.ts b/src/utilities/normalizeSnapPoint.ts
new file mode 100644
index 000000000..f61ecf477
--- /dev/null
+++ b/src/utilities/normalizeSnapPoint.ts
@@ -0,0 +1,20 @@
+/**
+ * Converts a snap point to fixed numbers.
+ */
+export const normalizeSnapPoint = (
+  snapPoint: number | string,
+  containerHeight: number,
+  topInset: number
+) => {
+  'worklet';
+
+  let normalizedSnapPoint = snapPoint;
+
+  // percentage snap point
+  if (typeof normalizedSnapPoint === 'string') {
+    normalizedSnapPoint =
+      (Number(normalizedSnapPoint.split('%')[0]) * containerHeight) / 100;
+  }
+
+  return Math.max(topInset, containerHeight - normalizedSnapPoint);
+};
diff --git a/src/utilities/normalizeSnapPoints.ts b/src/utilities/normalizeSnapPoints.ts
deleted file mode 100644
index 383ae9698..000000000
--- a/src/utilities/normalizeSnapPoints.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { validateSnapPoint } from './validateSnapPoint';
-
-/**
- * Converts snap points with percentage to fixed numbers.
- */
-export const normalizeSnapPoints = (
-  snapPoints: Array<number | string>,
-  containerHeight: number,
-  topInset: number
-) =>
-  snapPoints.map(snapPoint => {
-    validateSnapPoint(snapPoint);
-    return typeof snapPoint === 'number'
-      ? snapPoint
-      : (Number(snapPoint.split('%')[0]) * (containerHeight - topInset)) / 100;
-  });