Adjust onSettle index of BottomSheet (#946)

* adjust onchange index bottomsheet

* support enableDynamicSizing for bottomsheet

* update example

Author: sieu-db

example/src/BottomSheetExample.tsx

@@ -5,9 +5,22 @@ import { Button } from "@draftbit/core";
 
 const BottomSheetExample: React.FC = () => {
   const bottomSheetRef = React.useRef<any>();
+  const [snapIndex, setSnapIndex] = React.useState(0);
   return (
     <View style={{ flex: 1 }}>
-      <BottomSheet style={{ alignItems: "center" }} ref={bottomSheetRef}>
+      <BottomSheet
+        enableDynamicSizing={false}
+        style={{ alignItems: "center" }}
+        ref={bottomSheetRef}
+        onSettle={(newIndex: number) => {
+          try {
+            console.log("onSettle", newIndex);
+            setSnapIndex(newIndex);
+          } catch (error) {
+            console.error("Error in onSettle:", error);
+          }
+        }}
+      >
         <Text>This is a bottom Sheet</Text>
       </BottomSheet>
       <Button
@@ -42,6 +55,7 @@ const BottomSheetExample: React.FC = () => {
           }
         }}
       />
+      <Text>Snap index: {snapIndex}</Text>
     </View>
   );
 };

packages/core/src/components/BottomSheet/BottomSheet.tsx

@@ -35,6 +35,7 @@ export interface BottomSheetProps extends ScrollViewProps {
   topBorderRadius?: number;
   borderWidth?: number;
   borderColor?: string;
+  enableDynamicSizing?: boolean;
   onSettle?: (index: number) => void;
   style?: StyleProp<ViewStyle>;
 }
@@ -56,6 +57,7 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
       topBorderRadius = 20,
       borderWidth = 1,
       borderColor,
+      enableDynamicSizing = true,
       onSettle,
       style,
       children,
@@ -92,6 +94,7 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
     return (
       <BottomSheetComponent
         ref={ref}
+        enableDynamicSizing={enableDynamicSizing}
         snapPoints={mappedSnapPoints}
         index={
           initialSnapIndex !== undefined
@@ -109,7 +112,13 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
           borderWidth,
           borderColor: borderColor ?? theme.colors.border.brand,
         }}
-        onChange={(index) => onSettle?.(mappedSnapPoints.length - index - 1)}
+        onChange={(index) =>
+          // Convert bottom-sheet index to match our top-to-bottom ordering
+          // When dynamic sizing is enabled, we don't need to subtract 1 since an extra snap point may be added
+          enableDynamicSizing
+            ? onSettle?.(mappedSnapPoints.length - index)
+            : onSettle?.(mappedSnapPoints.length - index - 1)
+        }
       >
         <BottomSheetScrollView
           contentContainerStyle={[styles.contentContainerStyle, style]}