feat: added dynamic snap point based on content height (#32)

example/ios/Podfile.lock

@@ -481,4 +481,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: aff15ad1e9bd5c910cdc2b575487ce8c56864ae7
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.9.3

example/src/components/contactList/ContactList.tsx

@@ -133,7 +133,7 @@ const ContactList = ({
     );
   } else if (type === 'View') {
     return (
-      <BottomSheetView style={styles.contentContainer}>
+      <BottomSheetView style={contentContainerStyle}>
         {header && header()}
         {data.map(renderScrollViewItem)}
       </BottomSheetView>

example/src/components/handle/Handle.tsx

@@ -10,26 +10,42 @@ interface HandleProps extends BottomSheetHandleProps {
 
 const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
   //#region animations
-  const borderTopRadius = interpolate(animatedPositionIndex, {
-    inputRange: [1, 2],
-    outputRange: [20, 0],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const indicatorTransformOriginY = interpolate(animatedPositionIndex, {
-    inputRange: [0, 1, 2],
-    outputRange: [-1, 0, 1],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const leftIndicatorRotate = interpolate(animatedPositionIndex, {
-    inputRange: [0, 1, 2],
-    outputRange: [toRad(-30), 0, toRad(30)],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const rightIndicatorRotate = interpolate(animatedPositionIndex, {
-    inputRange: [0, 1, 2],
-    outputRange: [toRad(30), 0, toRad(-30)],
-    extrapolate: Extrapolate.CLAMP,
-  });
+  const borderTopRadius = useMemo(
+    () =>
+      interpolate(animatedPositionIndex, {
+        inputRange: [1, 2],
+        outputRange: [20, 0],
+        extrapolate: Extrapolate.CLAMP,
+      }),
+    [animatedPositionIndex]
+  );
+  const indicatorTransformOriginY = useMemo(
+    () =>
+      interpolate(animatedPositionIndex, {
+        inputRange: [0, 1, 2],
+        outputRange: [-1, 0, 1],
+        extrapolate: Extrapolate.CLAMP,
+      }),
+    [animatedPositionIndex]
+  );
+  const leftIndicatorRotate = useMemo(
+    () =>
+      interpolate(animatedPositionIndex, {
+        inputRange: [0, 1, 2],
+        outputRange: [toRad(-30), 0, toRad(30)],
+        extrapolate: Extrapolate.CLAMP,
+      }),
+    [animatedPositionIndex]
+  );
+  const rightIndicatorRotate = useMemo(
+    () =>
+      interpolate(animatedPositionIndex, {
+        inputRange: [0, 1, 2],
+        outputRange: [toRad(30), 0, toRad(-30)],
+        extrapolate: Extrapolate.CLAMP,
+      }),
+    [animatedPositionIndex]
+  );
   //#endregion
 
   //#region styles
@@ -42,8 +58,7 @@ const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
         borderTopRightRadius: borderTopRadius,
       },
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [style]
+    [style, borderTopRadius]
   );
   const leftIndicatorStyle = useMemo(
     () => ({
@@ -57,8 +72,7 @@ const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
         }
       ),
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [indicatorTransformOriginY, leftIndicatorRotate]
   );
   const rightIndicatorStyle = useMemo(
     () => ({
@@ -72,8 +86,7 @@ const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
         }
       ),
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [indicatorTransformOriginY, rightIndicatorRotate]
   );
   //#endregion
 

example/src/screens/advanced/CustomHandleExample.tsx

@@ -15,7 +15,7 @@ const CustomHandleExample = () => {
   const headerHeight = useHeaderHeight();
 
   // variables
-  const snapPoints = useMemo(() => [150, 300, 450], []);
+  const snapPoints = useMemo(() => [100, 200], []);
   const enableButtonText = useMemo(() => (enabled ? 'Disable' : 'Enable'), [
     enabled,
   ]);
@@ -49,17 +49,17 @@ const CustomHandleExample = () => {
   return (
     <View style={styles.container}>
       <Button
-        label="Snap To 450"
+        label="Snap To Sheet Height"
         style={styles.buttonContainer}
         onPress={() => handleSnapPress(2)}
       />
       <Button
-        label="Snap To 300"
+        label="Snap To 200"
         style={styles.buttonContainer}
         onPress={() => handleSnapPress(1)}
       />
       <Button
-        label="Snap To 150"
+        label="Snap To 100"
         style={styles.buttonContainer}
         onPress={() => handleSnapPress(0)}
       />
@@ -87,9 +87,10 @@ const CustomHandleExample = () => {
         ref={bottomSheetRef}
         enabled={enabled}
         snapPoints={snapPoints}
-        initialSnapIndex={1}
+        initialSnapIndex={0}
         topInset={headerHeight}
         handleComponent={Handle}
+        shouldMeasureContentHeight={true}
       >
         <ContactList type="View" count={3} header={renderHeader} />
       </BottomSheet>

example/src/screens/modal/StackExample.tsx

@@ -34,12 +34,15 @@ const StackExample = () => {
     dismissB();
   }, [dismissB]);
   const handlePresentCPress = useCallback(() => {
-    presentC(<ContactListContainer title="Modal C" type="SectionList" />, {
-      snapPoints: ['25%', '50%'],
-      initialSnapIndex: 1,
-      animationDuration: 250,
-      dismissOnScrollDown: false,
-    });
+    presentC(
+      <ContactListContainer title="Modal C" type="SectionList" count={5} />,
+      {
+        snapPoints: ['25%', '50%'],
+        initialSnapIndex: 1,
+        animationDuration: 250,
+        dismissOnScrollDown: false,
+      }
+    );
   }, [presentC]);
   const handleDismissCPress = useCallback(() => {
     dismissC();