@swmansion/react-native-bottom-sheet 0.3.1 → 0.4.0

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EACV,0BAA0B,EAC1B,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EACV,0BAA0B,EAC1B,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/typescript/src/useBottomSheetPanGesture.d.ts

@@ -0,0 +1,20 @@
+import type { PanGesture } from 'react-native-gesture-handler';
+import { type AnimatedRef, type SharedValue } from 'react-native-reanimated';
+interface BottomSheetPanGestureParams {
+    animationTarget: SharedValue<number>;
+    translateY: SharedValue<number>;
+    sheetHeight: SharedValue<number>;
+    detentsValue: SharedValue<number[]>;
+    isDraggableValue: SharedValue<boolean[]>;
+    currentIndex: SharedValue<number>;
+    scrollOffset: SharedValue<number>;
+    hasScrollable: SharedValue<boolean>;
+    isScrollableGestureActive: SharedValue<boolean>;
+    isScrollableLocked: SharedValue<boolean>;
+    scrollableRef: AnimatedRef<any>;
+    handleIndexChange: (nextIndex: number) => void;
+    animateToIndex: (targetIndex: number, velocity?: number) => void;
+}
+export declare const useBottomSheetPanGesture: ({ animationTarget, translateY, sheetHeight, detentsValue, isDraggableValue, currentIndex, scrollOffset, hasScrollable, isScrollableGestureActive, isScrollableLocked, scrollableRef, handleIndexChange, animateToIndex, }: BottomSheetPanGestureParams) => PanGesture;
+export {};
+//# sourceMappingURL=useBottomSheetPanGesture.d.ts.map

package/lib/typescript/src/useBottomSheetPanGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomSheetPanGesture.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetPanGesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAG/D,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,WAAW,EAEjB,MAAM,yBAAyB,CAAC;AAIjC,UAAU,2BAA2B;IACnC,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,YAAY,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;IACpC,gBAAgB,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IACzC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACpC,yBAAyB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChD,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACzC,aAAa,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAChC,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAED,eAAO,MAAM,wBAAwB,GAAI,2NActC,2BAA2B,KAAG,UAoKhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/BottomSheetBase.tsx

@@ -4,8 +4,6 @@ import type { LayoutChangeEvent } from 'react-native';
 import { Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
 import type { SharedValue, WithSpringConfig } from 'react-native-reanimated';
 import Animated, {
-  measure,
-  scrollTo,
   useAnimatedRef,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -13,13 +11,20 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import { scheduleOnRN, scheduleOnUI } from 'react-native-worklets';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { scheduleOnUI } from 'react-native-worklets';
+import { GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from './BottomSheetProvider';
 import { BottomSheetContextProvider } from './BottomSheetContext';
-
-export type Detent = number | 'max';
+import {
+  clampIndex,
+  isDetentProgrammatic,
+  resolveDetent,
+} from './bottomSheetUtils';
+import type { Detent } from './bottomSheetUtils';
+import { useBottomSheetPanGesture } from './useBottomSheetPanGesture';
+export type { Detent, DetentValue } from './bottomSheetUtils';
+export { programmatic } from './bottomSheetUtils';
 
 export interface BottomSheetCommonProps {
   children: ReactNode;
@@ -48,25 +53,6 @@ const DEFAULT_CLOSE_ANIMATION_CONFIG: WithSpringConfig = {
   overshootClamping: true,
 };
 
-const VELOCITY_THRESHOLD = 800;
-
-const resolveDetent = (
-  detent: Detent,
-  contentHeight: number,
-  maxHeight: number
-) => {
-  if (typeof detent === 'number') return detent;
-  if (detent === 'max') {
-    return contentHeight > 0 ? Math.min(contentHeight, maxHeight) : maxHeight;
-  }
-  throw new Error(`Invalid detent: \`${detent}\`.`);
-};
-
-const clampIndex = (index: number, detentCount: number) => {
-  if (detentCount <= 0) return 0;
-  return Math.min(Math.max(index, 0), detentCount - 1);
-};
-
 const DefaultScrim = ({ progress }: { progress: SharedValue<number> }) => {
   const style = useAnimatedStyle(() => ({ opacity: progress.value }));
   return (
@@ -96,14 +82,18 @@ export const BottomSheetBase = ({
   const maxHeight = screenHeight - insets.top;
   const resolvedIndex = clampIndex(index, detents.length);
   const [contentHeight, setContentHeight] = useState(0);
+
   if (detents.length === 0) {
     throw new Error('detents must include at least one value.');
   }
-  const normalizedDetents = detents.map((point) => {
-    const resolved = resolveDetent(point, contentHeight, maxHeight);
+
+  const normalizedDetents = detents.map((detent) => {
+    const resolved = resolveDetent(detent, contentHeight, maxHeight);
     return Math.max(0, Math.min(resolved, maxHeight));
   });
+  const isDraggable = detents.map((detent) => !isDetentProgrammatic(detent));
   const initialMaxSnap = Math.max(0, ...normalizedDetents);
+
   const translateY = useSharedValue(initialMaxSnap);
   const animationTarget = useSharedValue(NaN);
   const sheetHeight = useSharedValue(initialMaxSnap);
@@ -112,41 +102,50 @@ export const BottomSheetBase = ({
   const isScrollableGestureActive = useSharedValue(false);
   const isScrollableLocked = useSharedValue(false);
   const scrollableRef = useAnimatedRef();
-  const isDraggingSheet = useSharedValue(false);
-  const isDraggingFromScrollable = useSharedValue(false);
-  const panStartY = useSharedValue(0);
-  const panActivated = useSharedValue(false);
-  const dragStartTranslateY = useSharedValue(0);
-  const isTouchWithinScrollable = useSharedValue(false);
+
   const detentsValue = useSharedValue(normalizedDetents);
+  const isDraggableValue = useSharedValue(isDraggable);
   const firstNonzeroDetent = useSharedValue(
-    normalizedDetents.find((d) => d > 0) ?? 0
+    normalizedDetents.find((detent) => detent > 0) ?? 0
   );
   const currentIndex = useSharedValue(resolvedIndex);
   const internalPosition = useDerivedValue(() =>
     Math.max(0, sheetHeight.value - translateY.value)
   );
+
   useAnimatedReaction(
     () => internalPosition.value,
     (value) => {
       if (externalPosition !== undefined) externalPosition.set(value);
     }
   );
+
   const scrimProgress = useDerivedValue(() => {
     const target = firstNonzeroDetent.value;
     if (target <= 0) return 0;
     const progress = internalPosition.value / target;
     return Math.min(1, Math.max(0, progress));
   });
+
   const handleIndexChange = (nextIndex: number) => {
     onIndexChange?.(nextIndex);
   };
+
   useEffect(() => {
     const maxSnap = Math.max(0, ...normalizedDetents);
     detentsValue.set(normalizedDetents);
+    isDraggableValue.set(isDraggable);
     sheetHeight.set(maxSnap);
-    firstNonzeroDetent.set(normalizedDetents.find((d) => d > 0) ?? 0);
-  }, [normalizedDetents, sheetHeight, detentsValue, firstNonzeroDetent]);
+    firstNonzeroDetent.set(normalizedDetents.find((detent) => detent > 0) ?? 0);
+  }, [
+    normalizedDetents,
+    isDraggable,
+    sheetHeight,
+    detentsValue,
+    isDraggableValue,
+    firstNonzeroDetent,
+  ]);
+
   const animateToIndex = useCallback(
     (targetIndex: number, velocity?: number) => {
       'worklet';
@@ -174,154 +173,27 @@ export const BottomSheetBase = ({
       translateY,
     ]
   );
+
   useEffect(() => {
     scheduleOnUI(animateToIndex, resolvedIndex);
   }, [animateToIndex, resolvedIndex, normalizedDetents]);
-  const panGesture = Gesture.Pan()
-    .manualActivation(true)
-    .onTouchesDown((event) => {
-      'worklet';
-      panActivated.set(false);
-      isDraggingSheet.set(false);
-      isDraggingFromScrollable.set(false);
-      isScrollableLocked.set(false);
-      isTouchWithinScrollable.set(false);
-      const touch = event.changedTouches[0] ?? event.allTouches[0];
-      if (touch !== undefined) {
-        panStartY.set(touch.absoluteY);
-        if (hasScrollable.value) {
-          const layout = measure(scrollableRef);
-          if (layout !== null) {
-            const withinX =
-              touch.absoluteX >= layout.pageX &&
-              touch.absoluteX <= layout.pageX + layout.width;
-            const withinY =
-              touch.absoluteY >= layout.pageY &&
-              touch.absoluteY <= layout.pageY + layout.height;
-            isTouchWithinScrollable.set(withinX && withinY);
-          }
-        }
-      }
-    })
-    .onTouchesMove((event, stateManager) => {
-      'worklet';
-      if (panActivated.value) return;
-      const touch = event.changedTouches[0] ?? event.allTouches[0];
-      if (!touch) return;
-      const deltaY = touch.absoluteY - panStartY.value;
-      if (
-        hasScrollable.value &&
-        scrollOffset.value > 0 &&
-        isTouchWithinScrollable.value
-      ) {
-        return;
-      }
-      if (deltaY > 0 || translateY.value > 0) {
-        panActivated.set(true);
-        stateManager.activate();
-      }
-    })
-    .onBegin(() => {
-      'worklet';
-      animationTarget.set(NaN);
-      isDraggingSheet.set(false);
-      isDraggingFromScrollable.set(false);
-      dragStartTranslateY.set(translateY.value);
-    })
-    .onUpdate((event) => {
-      'worklet';
-      if (isDraggingSheet.value) {
-        if (isDraggingFromScrollable.value) {
-          scrollTo(scrollableRef, 0, 0, false);
-        }
-      } else {
-        const isDraggingDown = event.translationY > 0;
-        const canStartDrag =
-          !hasScrollable.value ||
-          scrollOffset.value <= 0 ||
-          !isTouchWithinScrollable.value;
-        if (!canStartDrag || (!isDraggingDown && translateY.value <= 0)) {
-          return;
-        }
-        const isScrollableActive =
-          hasScrollable.value && isScrollableGestureActive.value;
-        isDraggingSheet.set(true);
-        isDraggingFromScrollable.set(
-          isScrollableActive && isTouchWithinScrollable.value
-        );
-        isScrollableLocked.set(hasScrollable.value);
-        if (isTouchWithinScrollable.value && hasScrollable.value) {
-          scrollTo(scrollableRef, 0, 0, false);
-        }
-      }
-      const nextTranslate = Math.min(
-        Math.max(dragStartTranslateY.value + event.translationY, 0),
-        sheetHeight.value
-      );
-      translateY.set(nextTranslate);
-      if (
-        isDraggingSheet.value &&
-        nextTranslate <= 0 &&
-        isTouchWithinScrollable.value &&
-        hasScrollable.value
-      ) {
-        isDraggingSheet.set(false);
-        isScrollableLocked.set(false);
-        const resolvedDetents = detentsValue.value;
-        const maxSnap = sheetHeight.value;
-        for (let i = resolvedDetents.length - 1; i >= 0; i--) {
-          if (resolvedDetents[i] === maxSnap) {
-            if (i !== currentIndex.value) scheduleOnRN(handleIndexChange, i);
-            animateToIndex(i);
-            break;
-          }
-        }
-      }
-    })
-    .onEnd((event) => {
-      'worklet';
-      const wasDragging = isDraggingSheet.value;
-      isScrollableLocked.set(false);
-      isDraggingSheet.set(false);
-      animationTarget.set(NaN);
-      if (!wasDragging) {
-        animateToIndex(currentIndex.value);
-        return;
-      }
-      const maxSnap = sheetHeight.value;
-      const allPositions = detentsValue.value.map((point, snapIndex) => ({
-        index: snapIndex,
-        translateY: maxSnap - point,
-      }));
-      const currentTranslate = translateY.value;
-      const velocityY = event.velocityY;
-      let targetIndex = currentIndex.value;
-      let minDistance = Infinity;
-      for (const pos of allPositions) {
-        const distance = Math.abs(currentTranslate - pos.translateY);
-        if (distance < minDistance) {
-          minDistance = distance;
-          targetIndex = pos.index;
-        }
-      }
-      if (Math.abs(velocityY) > VELOCITY_THRESHOLD) {
-        if (velocityY > 0) {
-          const lower = allPositions
-            .filter((pos) => pos.translateY > currentTranslate + 1)
-            .sort((a, b) => a.translateY - b.translateY)[0];
-          if (lower !== undefined) targetIndex = lower.index;
-        } else {
-          const upper = allPositions
-            .filter((pos) => pos.translateY < currentTranslate - 1)
-            .sort((a, b) => b.translateY - a.translateY)[0];
-          if (upper !== undefined) targetIndex = upper.index;
-        }
-      }
-      const hasIndexChanged = targetIndex !== currentIndex.value;
-      if (hasIndexChanged) scheduleOnRN(handleIndexChange, targetIndex);
-      const shouldApplyVelocity = hasIndexChanged && Number.isFinite(velocityY);
-      animateToIndex(targetIndex, shouldApplyVelocity ? velocityY : undefined);
-    });
+
+  const panGesture = useBottomSheetPanGesture({
+    animationTarget,
+    translateY,
+    sheetHeight,
+    detentsValue,
+    isDraggableValue,
+    currentIndex,
+    scrollOffset,
+    hasScrollable,
+    isScrollableGestureActive,
+    isScrollableLocked,
+    scrollableRef,
+    handleIndexChange,
+    animateToIndex,
+  });
+
   const handleSentinelLayout = (event: LayoutChangeEvent) => {
     setContentHeight(event.nativeEvent.layout.y);
   };
@@ -331,6 +203,7 @@ export const BottomSheetBase = ({
     handleIndexChange(closedIndex);
     scheduleOnUI(animateToIndex, closedIndex);
   };
+
   const wrapperStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: translateY.value }],
     height: sheetHeight.value,
@@ -344,6 +217,7 @@ export const BottomSheetBase = ({
   } else if (modal) {
     scrimElement = <DefaultScrim progress={scrimProgress} />;
   }
+
   const sheetContent = (
     <BottomSheetContextProvider
       value={{
@@ -380,6 +254,7 @@ export const BottomSheetBase = ({
       </Animated.View>
     </BottomSheetContextProvider>
   );
+
   const sheetContainer = (
     <Animated.View
       style={StyleSheet.absoluteFill}
@@ -394,5 +269,6 @@ export const BottomSheetBase = ({
     </Animated.View>
   );
   if (modal) return <Portal>{sheetContainer}</Portal>;
+
   return sheetContainer;
 };

package/src/BottomSheetProvider.tsx

@@ -24,6 +24,7 @@ const PortalHost = () => {
   useEffect(() => {
     return context.subscribe(forceRender);
   }, [context]);
+
   return Array.from(context.getPortals().entries()).map(([key, element]) => (
     <View key={key} style={StyleSheet.absoluteFill} pointerEvents="box-none">
       {element}
@@ -56,6 +57,7 @@ export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
       getPortals: () => portals,
     };
   });
+
   return (
     <PortalContext.Provider value={context}>
       {children}
@@ -69,8 +71,10 @@ export const Portal = ({ children }: { children: ReactNode }) => {
   if (context === null) {
     throw new Error('`Portal` must be used within `BottomSheetProvider`.');
   }
+
   const { addPortal, removePortal } = context;
   const id = useId();
+
   useEffect(() => {
     addPortal(id, children);
   }, [id, children, addPortal]);

package/src/bottomSheetUtils.ts

@@ -0,0 +1,82 @@
+export type DetentValue = number | 'max';
+
+export type Detent =
+  | DetentValue
+  | { value: DetentValue; programmatic?: boolean };
+
+export const programmatic = (value: DetentValue): Detent => ({
+  value,
+  programmatic: true,
+});
+
+export const detentValue = (detent: Detent): DetentValue => {
+  if (typeof detent === 'object' && detent !== null) return detent.value;
+  return detent;
+};
+
+export const isDetentProgrammatic = (detent: Detent): boolean => {
+  if (typeof detent === 'object' && detent !== null) {
+    return detent.programmatic === true;
+  }
+  return false;
+};
+
+const VELOCITY_THRESHOLD = 800;
+
+export const findSnapTarget = (
+  currentTranslate: number,
+  velocityY: number,
+  currentIndex: number,
+  allPositions: { index: number; translateY: number; isDraggable: boolean }[]
+) => {
+  'worklet';
+  const draggablePositions = allPositions.filter(
+    (position) => position.isDraggable
+  );
+  const effectivePositions =
+    draggablePositions.length > 0 ? draggablePositions : allPositions;
+
+  let targetIndex = currentIndex;
+  let minDistance = Infinity;
+
+  for (const position of effectivePositions) {
+    const distance = Math.abs(currentTranslate - position.translateY);
+    if (distance < minDistance) {
+      minDistance = distance;
+      targetIndex = position.index;
+    }
+  }
+
+  if (Math.abs(velocityY) > VELOCITY_THRESHOLD) {
+    if (velocityY > 0) {
+      const lowerPosition = effectivePositions
+        .filter((position) => position.translateY > currentTranslate + 1)
+        .sort((a, b) => a.translateY - b.translateY)[0];
+      if (lowerPosition !== undefined) targetIndex = lowerPosition.index;
+    } else {
+      const upperPosition = effectivePositions
+        .filter((position) => position.translateY < currentTranslate - 1)
+        .sort((a, b) => b.translateY - a.translateY)[0];
+      if (upperPosition !== undefined) targetIndex = upperPosition.index;
+    }
+  }
+  return targetIndex;
+};
+
+export const resolveDetent = (
+  detent: Detent,
+  contentHeight: number,
+  maxHeight: number
+) => {
+  const detentValueInput = detentValue(detent);
+  if (typeof detentValueInput === 'number') return detentValueInput;
+  if (detentValueInput === 'max') {
+    return contentHeight > 0 ? Math.min(contentHeight, maxHeight) : maxHeight;
+  }
+  throw new Error(`Invalid detent: \`${detentValueInput}\`.`);
+};
+
+export const clampIndex = (index: number, detentCount: number) => {
+  if (detentCount <= 0) return 0;
+  return Math.min(Math.max(index, 0), detentCount - 1);
+};

package/src/index.tsx

@@ -13,4 +13,5 @@ export type {
   BottomSheetScrollViewMethods,
   BottomSheetScrollViewProps,
 } from './BottomSheetScrollView';
-export type { Detent } from './BottomSheetBase';
+export type { Detent, DetentValue } from './BottomSheetBase';
+export { programmatic } from './BottomSheetBase';