@swmansion/react-native-bottom-sheet 0.7.0-next.2 → 0.7.0-next.4

package/src/BottomSheetBase.tsx

@@ -1,276 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import type { ReactNode } from 'react';
-import type { LayoutChangeEvent } from 'react-native';
-import { Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
-import type { SharedValue, WithSpringConfig } from 'react-native-reanimated';
-import Animated, {
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
-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,
-  type ScrollableEntry,
-} from './BottomSheetContext';
-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;
-  detents?: Detent[];
-  index: number;
-  onIndexChange?: (index: number) => void;
-  position?: SharedValue<number>;
-  openAnimationConfig?: WithSpringConfig;
-  closeAnimationConfig?: WithSpringConfig;
-}
-
-export interface BottomSheetBaseProps extends BottomSheetCommonProps {
-  modal?: boolean;
-  renderScrim?: (progress: SharedValue<number>) => ReactNode;
-}
-
-const DEFAULT_OPEN_ANIMATION_CONFIG: WithSpringConfig = {
-  dampingRatio: 1,
-  duration: 300,
-  overshootClamping: true,
-};
-
-const DEFAULT_CLOSE_ANIMATION_CONFIG: WithSpringConfig = {
-  dampingRatio: 1,
-  duration: 250,
-  overshootClamping: true,
-};
-
-const DefaultScrim = ({ progress }: { progress: SharedValue<number> }) => {
-  const style = useAnimatedStyle(() => ({ opacity: progress.value }));
-  return (
-    <Animated.View
-      style={[
-        StyleSheet.absoluteFill,
-        { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)' },
-        style,
-      ]}
-    />
-  );
-};
-
-export const BottomSheetBase = ({
-  children,
-  detents = [0, 'max'],
-  index,
-  onIndexChange,
-  position: externalPosition,
-  openAnimationConfig = DEFAULT_OPEN_ANIMATION_CONFIG,
-  closeAnimationConfig = DEFAULT_CLOSE_ANIMATION_CONFIG,
-  modal = false,
-  renderScrim,
-}: BottomSheetBaseProps) => {
-  const { height: screenHeight } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-  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((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);
-  const [scrollableEntries, setScrollableEntries] = useState<ScrollableEntry[]>(
-    []
-  );
-  const isScrollableLocked = useSharedValue(false);
-
-  const registerScrollable = useCallback((entry: ScrollableEntry) => {
-    setScrollableEntries((prev) => [...prev, entry]);
-    return () => {
-      setScrollableEntries((prev) => prev.filter((e) => e !== entry));
-    };
-  }, []);
-
-  const detentsValue = useSharedValue(normalizedDetents);
-  const isDraggableValue = useSharedValue(isDraggable);
-  const firstNonzeroDetent = useSharedValue(
-    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((detent) => detent > 0) ?? 0);
-  }, [
-    normalizedDetents,
-    isDraggable,
-    sheetHeight,
-    detentsValue,
-    isDraggableValue,
-    firstNonzeroDetent,
-  ]);
-
-  const animateToIndex = useCallback(
-    (targetIndex: number, velocity?: number) => {
-      'worklet';
-      const maxSnap = sheetHeight.value;
-      const targetTranslate = maxSnap - (detentsValue.value[targetIndex] ?? 0);
-      if (animationTarget.value === targetTranslate && velocity === undefined) {
-        currentIndex.set(targetIndex);
-        return;
-      }
-      animationTarget.set(targetTranslate);
-      const isOpening = targetTranslate < translateY.value;
-      const baseConfig = isOpening ? openAnimationConfig : closeAnimationConfig;
-      const springConfig =
-        velocity === undefined ? baseConfig : { ...baseConfig, velocity };
-      translateY.set(withSpring(targetTranslate, springConfig));
-      currentIndex.set(targetIndex);
-    },
-    [
-      animationTarget,
-      closeAnimationConfig,
-      currentIndex,
-      detentsValue,
-      openAnimationConfig,
-      sheetHeight,
-      translateY,
-    ]
-  );
-
-  useEffect(() => {
-    scheduleOnUI(animateToIndex, resolvedIndex);
-  }, [animateToIndex, resolvedIndex, normalizedDetents]);
-
-  const panGesture = useBottomSheetPanGesture({
-    animationTarget,
-    translateY,
-    sheetHeight,
-    detentsValue,
-    isDraggableValue,
-    currentIndex,
-    scrollableEntries,
-    isScrollableLocked,
-    handleIndexChange,
-    animateToIndex,
-  });
-
-  const handleSentinelLayout = (event: LayoutChangeEvent) => {
-    setContentHeight(event.nativeEvent.layout.y);
-  };
-  const closedIndex = normalizedDetents.indexOf(0);
-  const handleScrimPress = () => {
-    if (closedIndex === -1 || resolvedIndex === closedIndex) return;
-    handleIndexChange(closedIndex);
-    scheduleOnUI(animateToIndex, closedIndex);
-  };
-
-  const wrapperStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateY.value }],
-    height: sheetHeight.value,
-    opacity: translateY.value >= sheetHeight.value ? 0 : 1,
-  }));
-  const isCollapsed = normalizedDetents[resolvedIndex] === 0;
-  const pointerEvents = modal ? (isCollapsed ? 'none' : 'auto') : 'box-none';
-  let scrimElement: ReactNode | null = null;
-  if (renderScrim !== undefined) {
-    scrimElement = renderScrim(scrimProgress);
-  } else if (modal) {
-    scrimElement = <DefaultScrim progress={scrimProgress} />;
-  }
-
-  const sheetContent = (
-    <BottomSheetContextProvider
-      value={{
-        translateY,
-        position: internalPosition,
-        index: currentIndex,
-        sheetHeight,
-        isScrollableLocked,
-        registerScrollable,
-        panGesture,
-      }}
-    >
-      <Animated.View
-        style={[
-          {
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-          },
-          wrapperStyle,
-        ]}
-        pointerEvents="box-none"
-      >
-        <GestureDetector gesture={panGesture}>
-          <View style={{ flex: 1 }} pointerEvents="box-none">
-            {children}
-            <View onLayout={handleSentinelLayout} pointerEvents="none" />
-          </View>
-        </GestureDetector>
-      </Animated.View>
-    </BottomSheetContextProvider>
-  );
-
-  const sheetContainer = (
-    <Animated.View
-      style={StyleSheet.absoluteFill}
-      pointerEvents={pointerEvents}
-    >
-      {modal && scrimElement !== null ? (
-        <Pressable style={StyleSheet.absoluteFill} onPress={handleScrimPress}>
-          {scrimElement}
-        </Pressable>
-      ) : null}
-      {sheetContent}
-    </Animated.View>
-  );
-  if (modal) return <Portal>{sheetContainer}</Portal>;
-
-  return sheetContainer;
-};

package/src/BottomSheetContext.tsx

@@ -1,33 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { PanGesture } from 'react-native-gesture-handler';
-import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
-
-export interface ScrollableEntry {
-  ref: AnimatedRef<any>;
-  scrollOffset: SharedValue<number>;
-  isGestureActive: SharedValue<boolean>;
-}
-
-export interface BottomSheetContextType {
-  translateY: SharedValue<number>;
-  position: SharedValue<number>;
-  index: SharedValue<number>;
-  sheetHeight: SharedValue<number>;
-  isScrollableLocked: SharedValue<boolean>;
-  registerScrollable: (entry: ScrollableEntry) => () => void;
-  panGesture: PanGesture;
-}
-
-const BottomSheetContext = createContext<BottomSheetContextType | null>(null);
-
-export const BottomSheetContextProvider = BottomSheetContext.Provider;
-
-export const useBottomSheetContext = () => {
-  const context = useContext(BottomSheetContext);
-  if (context === null) {
-    throw new Error(
-      '`useBottomSheetContext` must be used within `BottomSheet`.'
-    );
-  }
-  return context;
-};

package/src/BottomSheetFlatList.tsx

@@ -1,21 +0,0 @@
-import { FlatList, type NativeScrollEvent } from 'react-native';
-import type {
-  FlatListPropsWithLayout,
-  SharedValue,
-} from 'react-native-reanimated';
-import type { Ref, ReactElement } from 'react';
-
-import { bottomSheetScrollable } from './bottomSheetScrollable';
-
-export type BottomSheetFlatListProps<T> = Omit<
-  FlatListPropsWithLayout<T>,
-  'onScroll' | 'scrollEnabled' | 'ref'
-> & {
-  scrollEnabled?: boolean | SharedValue<boolean | undefined>;
-  onScroll?: (event: NativeScrollEvent) => void;
-  ref?: Ref<FlatList<T>>;
-};
-
-export const BottomSheetFlatList = bottomSheetScrollable(FlatList) as <T>(
-  props: BottomSheetFlatListProps<T>
-) => ReactElement;

package/src/BottomSheetScrollView.tsx

@@ -1,22 +0,0 @@
-import type { Ref, ReactElement } from 'react';
-import {
-  ScrollView,
-  type NativeScrollEvent,
-  type ScrollViewProps,
-} from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-
-import { bottomSheetScrollable } from './bottomSheetScrollable';
-
-export type BottomSheetScrollViewProps = Omit<
-  ScrollViewProps,
-  'onScroll' | 'scrollEnabled' | 'ref'
-> & {
-  scrollEnabled?: boolean | SharedValue<boolean | undefined>;
-  onScroll?: (event: NativeScrollEvent) => void;
-  ref?: Ref<ScrollView>;
-};
-
-export const BottomSheetScrollView = bottomSheetScrollable(ScrollView) as (
-  props: BottomSheetScrollViewProps
-) => ReactElement;

package/src/bottomSheetScrollable.tsx

@@ -1,42 +0,0 @@
-import { type ComponentType, type Ref, useImperativeHandle } from 'react';
-import type { NativeScrollEvent } from 'react-native';
-import { GestureDetector } from 'react-native-gesture-handler';
-import Animated, { type SharedValue } from 'react-native-reanimated';
-
-import { useBottomSheetScrollable } from './useBottomSheetScrollable';
-
-export function bottomSheetScrollable<
-  P extends Record<string, any>,
-  R = unknown
->(ScrollableComponent: ComponentType<P>) {
-  const AnimatedComponent =
-    Animated.createAnimatedComponent(ScrollableComponent);
-
-  return ({
-    scrollEnabled,
-    onScroll,
-    ref,
-    ...rest
-  }: Omit<P, 'onScroll' | 'scrollEnabled' | 'ref'> & {
-    scrollEnabled?: boolean | SharedValue<boolean | undefined>;
-    onScroll?: (event: NativeScrollEvent) => void;
-    ref?: Ref<R>;
-  }) => {
-    const { scrollHandler, scrollableRef, nativeGesture, animatedProps } =
-      useBottomSheetScrollable(scrollEnabled, onScroll);
-
-    useImperativeHandle(ref, () => scrollableRef.current as R, [scrollableRef]);
-
-    return (
-      <GestureDetector gesture={nativeGesture}>
-        <AnimatedComponent
-          {...(rest as any)}
-          animatedProps={animatedProps}
-          ref={scrollableRef}
-          onScroll={scrollHandler}
-          scrollEventThrottle={16}
-        />
-      </GestureDetector>
-    );
-  };
-}

package/src/useBottomSheetPanGesture.ts

@@ -1,253 +0,0 @@
-import type { PanGesture } from 'react-native-gesture-handler';
-import { Gesture } from 'react-native-gesture-handler';
-import { scheduleOnRN } from 'react-native-worklets';
-import {
-  measure,
-  scrollTo,
-  type SharedValue,
-  useSharedValue,
-} from 'react-native-reanimated';
-
-import type { ScrollableEntry } from './BottomSheetContext';
-import { findSnapTarget } from './bottomSheetUtils';
-
-interface BottomSheetPanGestureParams {
-  animationTarget: SharedValue<number>;
-  translateY: SharedValue<number>;
-  sheetHeight: SharedValue<number>;
-  detentsValue: SharedValue<number[]>;
-  isDraggableValue: SharedValue<boolean[]>;
-  currentIndex: SharedValue<number>;
-  scrollableEntries: ScrollableEntry[];
-  isScrollableLocked: SharedValue<boolean>;
-  handleIndexChange: (nextIndex: number) => void;
-  animateToIndex: (targetIndex: number, velocity?: number) => void;
-}
-
-export const useBottomSheetPanGesture = ({
-  animationTarget,
-  translateY,
-  sheetHeight,
-  detentsValue,
-  isDraggableValue,
-  currentIndex,
-  scrollableEntries,
-  isScrollableLocked,
-  handleIndexChange,
-  animateToIndex,
-}: BottomSheetPanGestureParams): PanGesture => {
-  const isDraggingSheet = useSharedValue(false);
-  const isDraggingFromScrollable = useSharedValue(false);
-  const panStartX = useSharedValue(0);
-  const panStartY = useSharedValue(0);
-  const panActivated = useSharedValue(false);
-  const dragStartTranslateY = useSharedValue(0);
-  const activeScrollableIndex = useSharedValue(-1);
-
-  return Gesture.Pan()
-    .manualActivation(true)
-    .onTouchesDown((event) => {
-      'worklet';
-      panActivated.set(false);
-      isDraggingSheet.set(false);
-      isDraggingFromScrollable.set(false);
-      isScrollableLocked.set(false);
-      activeScrollableIndex.set(-1);
-      const touch = event.changedTouches[0] ?? event.allTouches[0];
-      if (touch !== undefined) {
-        panStartX.set(touch.absoluteX);
-        panStartY.set(touch.absoluteY);
-        const entries = scrollableEntries;
-        for (let i = 0; i < entries.length; i++) {
-          const entry = entries[i];
-          if (entry === undefined) continue;
-          const layout = measure(entry.ref);
-          if (layout === null) continue;
-          const withinX =
-            touch.absoluteX >= layout.pageX &&
-            touch.absoluteX <= layout.pageX + layout.width;
-          const withinY =
-            touch.absoluteY >= layout.pageY &&
-            touch.absoluteY <= layout.pageY + layout.height;
-          if (withinX && withinY) {
-            activeScrollableIndex.set(i);
-            break;
-          }
-        }
-      }
-    })
-    .onTouchesMove((event, stateManager) => {
-      'worklet';
-      if (panActivated.value) return;
-      const touch = event.changedTouches[0] ?? event.allTouches[0];
-      if (!touch) return;
-      const deltaX = touch.absoluteX - panStartX.value;
-      const deltaY = touch.absoluteY - panStartY.value;
-      // When multiple scrollables overlap (e.g. stacked views), the hit-test
-      // in onTouchesDown may pick the wrong one. Prefer the scrollable whose
-      // native gesture is already active — that is definitively the one
-      // receiving touches (respects pointerEvents, z-order, etc.).
-      // If multiple scrollables are registered but none has confirmed via
-      // isGestureActive yet, defer the decision to avoid acting on a
-      // potentially incorrect hit-test result.
-      const entries = scrollableEntries;
-      let gestureActiveIdx = -1;
-      for (let i = 0; i < entries.length; i++) {
-        const entry = entries[i];
-        if (entry !== undefined && entry.isGestureActive.value) {
-          gestureActiveIdx = i;
-          break;
-        }
-      }
-      if (gestureActiveIdx !== -1) {
-        activeScrollableIndex.set(gestureActiveIdx);
-      } else if (entries.length > 1 && activeScrollableIndex.value !== -1) {
-        return;
-      }
-      const activeIdx = activeScrollableIndex.value;
-      if (activeIdx !== -1) {
-        const active = scrollableEntries[activeIdx];
-        if (
-          active !== undefined &&
-          active.scrollOffset.value > 0 &&
-          translateY.value <= 0
-        ) {
-          return;
-        }
-      }
-      if (Math.abs(deltaX) > Math.abs(deltaY)) {
-        stateManager.fail();
-        return;
-      }
-      if (
-        Math.abs(deltaY) > Math.abs(deltaX) &&
-        (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';
-      const activeIdx = activeScrollableIndex.value;
-      const hasActive = activeIdx !== -1;
-      const active = hasActive ? scrollableEntries[activeIdx] : undefined;
-      const activeOffset = active !== undefined ? active.scrollOffset.value : 0;
-
-      if (isDraggingSheet.value) {
-        if (isDraggingFromScrollable.value && active !== undefined) {
-          scrollTo(active.ref, 0, 0, false);
-        }
-      } else {
-        const isDraggingDown = event.translationY > 0;
-        const canStartDrag =
-          !hasActive || activeOffset <= 0 || translateY.value > 0;
-        if (!canStartDrag || (!isDraggingDown && translateY.value <= 0)) {
-          return;
-        }
-        const isScrollableActive =
-          hasActive && active !== undefined && active.isGestureActive.value;
-        isDraggingSheet.set(true);
-        isDraggingFromScrollable.set(isScrollableActive && activeOffset <= 0);
-        dragStartTranslateY.set(translateY.value - event.translationY);
-        isScrollableLocked.set(hasActive);
-        if (hasActive && active !== undefined && activeOffset <= 0) {
-          scrollTo(active.ref, 0, 0, false);
-        }
-      }
-      const rawTranslate = dragStartTranslateY.value + event.translationY;
-      const resolvedDetents = detentsValue.value;
-      const draggable = isDraggableValue.value;
-      let maxDraggableTranslateY = sheetHeight.value;
-      let minDraggableTranslateY = 0;
-      let foundDraggable = false;
-      for (let i = 0; i < resolvedDetents.length; i++) {
-        if (!(draggable[i] ?? true)) continue;
-        const t = sheetHeight.value - (resolvedDetents[i] ?? 0);
-        if (!foundDraggable) {
-          maxDraggableTranslateY = t;
-          minDraggableTranslateY = t;
-          foundDraggable = true;
-        } else {
-          if (t > maxDraggableTranslateY) maxDraggableTranslateY = t;
-          if (t < minDraggableTranslateY) minDraggableTranslateY = t;
-        }
-      }
-      const nextTranslate = Math.min(
-        Math.max(rawTranslate, minDraggableTranslateY),
-        maxDraggableTranslateY
-      );
-      translateY.set(nextTranslate);
-      if (isDraggingSheet.value && rawTranslate < 0 && hasActive) {
-        isDraggingSheet.set(false);
-        isScrollableLocked.set(false);
-        let targetSnapIndex = -1;
-        let targetSnapValue = -1;
-        for (let i = resolvedDetents.length - 1; i >= 0; i--) {
-          const detentValue = resolvedDetents[i];
-          if (
-            detentValue !== undefined &&
-            (draggable[i] ?? true) &&
-            detentValue > targetSnapValue
-          ) {
-            targetSnapValue = detentValue;
-            targetSnapIndex = i;
-          }
-        }
-        if (targetSnapIndex === -1) {
-          const maxSnap = sheetHeight.value;
-          for (let i = resolvedDetents.length - 1; i >= 0; i--) {
-            if (resolvedDetents[i] === maxSnap) {
-              targetSnapIndex = i;
-              break;
-            }
-          }
-        }
-        if (targetSnapIndex !== -1) {
-          if (targetSnapIndex !== currentIndex.value) {
-            scheduleOnRN(handleIndexChange, targetSnapIndex);
-          }
-          animateToIndex(targetSnapIndex);
-        }
-      }
-    })
-    .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 draggable = isDraggableValue.value;
-      const allPositions = detentsValue.value.map((detentValue, snapIndex) => ({
-        index: snapIndex,
-        translateY: maxSnap - detentValue,
-        isDraggable: draggable[snapIndex] ?? true,
-      }));
-      const targetIndex = findSnapTarget(
-        translateY.value,
-        event.velocityY,
-        currentIndex.value,
-        allPositions
-      );
-      const hasIndexChanged = targetIndex !== currentIndex.value;
-      if (hasIndexChanged) scheduleOnRN(handleIndexChange, targetIndex);
-      const shouldApplyVelocity =
-        hasIndexChanged && Number.isFinite(event.velocityY);
-      animateToIndex(
-        targetIndex,
-        shouldApplyVelocity ? event.velocityY : undefined
-      );
-    });
-};