@swmansion/react-native-bottom-sheet 0.1.0

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

@@ -0,0 +1,4 @@
+import type { BottomSheetCommonProps } from './BottomSheetBase';
+export type BottomSheetProps = BottomSheetCommonProps;
+export declare const BottomSheet: (props: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BottomSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC;AAEtD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAElD,CAAC"}

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { SharedValue, WithSpringConfig } from 'react-native-reanimated';
+export type Detent = number | 'max';
+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;
+}
+export declare const BottomSheetBase: ({ children, detents, index, onIndexChange, position: externalPosition, openAnimationConfig, closeAnimationConfig, modal, renderScrim, }: BottomSheetBaseProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BottomSheetBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetBase.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAiB7E,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAEpC,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,mBAAmB,CAAC,EAAE,gBAAgB,CAAC;IACvC,oBAAoB,CAAC,EAAE,gBAAgB,CAAC;CACzC;AAED,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;CAC5D;AA8CD,eAAO,MAAM,eAAe,GAAI,yIAU7B,oBAAoB,4CA6RtB,CAAC"}

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

@@ -0,0 +1,17 @@
+import type { PanGesture } from 'react-native-gesture-handler';
+import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
+export interface BottomSheetContextType {
+    translateY: SharedValue<number>;
+    position: SharedValue<number>;
+    index: SharedValue<number>;
+    sheetHeight: SharedValue<number>;
+    scrollOffset: SharedValue<number>;
+    scrollableRef: AnimatedRef<any>;
+    hasScrollable: SharedValue<boolean>;
+    isScrollableGestureActive: SharedValue<boolean>;
+    isScrollableLocked: SharedValue<boolean>;
+    panGesture: PanGesture;
+}
+export declare const BottomSheetContextProvider: import("react").Provider<BottomSheetContextType | null>;
+export declare const useBottomSheetContext: () => BottomSheetContextType;
+//# sourceMappingURL=BottomSheetContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetContext.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAChC,aAAa,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACpC,yBAAyB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChD,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,CAAC;CACxB;AAID,eAAO,MAAM,0BAA0B,yDAA8B,CAAC;AAEtE,eAAO,MAAM,qBAAqB,8BAQjC,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { FlatListPropsWithLayout } from 'react-native-reanimated';
+export declare const BottomSheetFlatList: <T>(props: Omit<FlatListPropsWithLayout<T>, "onScroll">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BottomSheetFlatList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetFlatList.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetFlatList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAKvE,eAAO,MAAM,mBAAmB,GAAI,CAAC,EACnC,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,4CAgBpD,CAAC"}

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export declare const BottomSheetProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Portal: ({ children }: {
+    children: ReactNode;
+}) => null;
+//# sourceMappingURL=BottomSheetProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetProvider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAyBvC,eAAO,MAAM,mBAAmB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CA+BxE,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,SAgB3D,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { ScrollViewProps } from 'react-native';
+export declare const BottomSheetScrollView: (props: Omit<ScrollViewProps, "onScroll">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BottomSheetScrollView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetScrollView.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMpD,eAAO,MAAM,qBAAqB,GAChC,OAAO,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,4CAgBzC,CAAC"}

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { BottomSheetCommonProps } from './BottomSheetBase';
+export interface ModalBottomSheetProps extends BottomSheetCommonProps {
+    scrim?: (progress: SharedValue<number>) => ReactNode;
+}
+export declare const ModalBottomSheet: ({ scrim, ...props }: ModalBottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalBottomSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ModalBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;IACnE,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB,GAAI,qBAG9B,qBAAqB,4CAEvB,CAAC"}

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

@@ -0,0 +1,9 @@
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';
+export { ModalBottomSheet } from './ModalBottomSheet';
+export type { ModalBottomSheetProps } from './ModalBottomSheet';
+export { BottomSheetProvider } from './BottomSheetProvider';
+export { BottomSheetFlatList } from './BottomSheetFlatList';
+export { BottomSheetScrollView } from './BottomSheetScrollView';
+export type { Detent } from './BottomSheetBase';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type SharedValue } from 'react-native-reanimated';
+export declare const useBottomSheetScrollable: (baseScrollEnabled?: boolean | SharedValue<boolean | undefined>) => {
+    scrollHandler: import("react-native-reanimated").ScrollHandlerProcessed<Record<string, unknown>>;
+    scrollableRef: import("react-native-reanimated").AnimatedRef<any>;
+    nativeGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/nativeGesture").NativeGesture;
+    animatedProps: Partial<{
+        scrollEnabled: boolean;
+    }>;
+};
+//# sourceMappingURL=useBottomSheetScrollable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomSheetScrollable.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetScrollable.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,WAAW,EAGjB,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,wBAAwB,GACnC,oBAAmB,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,SAAS,CAAQ;;;;;;;CAkDrE,CAAC"}

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@swmansion/react-native-bottom-sheet",
+  "version": "0.1.0",
+  "description": "Provides bottom-sheet components for React Native.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @swmansion/react-native-bottom-sheet-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "android",
+    "ios"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/software-mansion-labs/react-native-bottom-sheet.git"
+  },
+  "author": "Software Mansion",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/software-mansion-labs/react-native-bottom-sheet/issues"
+  },
+  "homepage": "https://github.com/software-mansion-labs/react-native-bottom-sheet",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "devDependencies": {
+    "@eslint/compat": "1.4.1",
+    "@eslint/eslintrc": "3.3.3",
+    "@eslint/js": "9.39.2",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@types/react": "19.2.14",
+    "del-cli": "6.0.0",
+    "eslint": "9.39.2",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-prettier": "5.5.5",
+    "prettier": "2.8.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "0.40.18",
+    "react-native-gesture-handler": "2.28.0",
+    "react-native-reanimated": "4.1.6",
+    "react-native-safe-area-context": "5.6.2",
+    "react-native-worklets": "0.5.1",
+    "typescript": "5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-gesture-handler": ">=2.14.0",
+    "react-native-reanimated": ">=3.16.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-worklets": ">=0.4.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  }
+}

package/src/BottomSheet.tsx

@@ -0,0 +1,8 @@
+import type { BottomSheetCommonProps } from './BottomSheetBase';
+import { BottomSheetBase } from './BottomSheetBase';
+
+export type BottomSheetProps = BottomSheetCommonProps;
+
+export const BottomSheet = (props: BottomSheetProps) => (
+  <BottomSheetBase {...props} />
+);

package/src/BottomSheetBase.tsx

@@ -0,0 +1,378 @@
+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, {
+  measure,
+  scrollTo,
+  useAnimatedRef,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { scheduleOnRN, scheduleOnUI } from 'react-native-worklets';
+import { Gesture, 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';
+
+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 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 (
+    <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((point) => {
+    const resolved = resolveDetent(point, contentHeight, maxHeight);
+    return Math.max(0, Math.min(resolved, maxHeight));
+  });
+  const initialMaxSnap = Math.max(0, ...normalizedDetents);
+  const translateY = useSharedValue(initialMaxSnap);
+  const animationTarget = useSharedValue(NaN);
+  const sheetHeight = useSharedValue(initialMaxSnap);
+  const scrollOffset = useSharedValue(0);
+  const hasScrollable = useSharedValue(false);
+  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 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 maxSnap = sheetHeight.value;
+    if (maxSnap <= 0) return 0;
+    const progress = internalPosition.value / maxSnap;
+    return Math.min(1, Math.max(0, progress));
+  });
+  const handleIndexChange = (nextIndex: number) => {
+    onIndexChange?.(nextIndex);
+  };
+  useEffect(() => {
+    const maxSnap = Math.max(0, ...normalizedDetents);
+    detentsValue.set(normalizedDetents);
+    sheetHeight.set(maxSnap);
+  }, [normalizedDetents, sheetHeight, detentsValue]);
+  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 = 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) panStartY.set(touch.absoluteY);
+      if (touch && hasScrollable.value) {
+        const layout = measure(scrollableRef);
+        if (layout) {
+          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);
+        }
+        const nextTranslate = Math.min(
+          Math.max(dragStartTranslateY.value + event.translationY, 0),
+          sheetHeight.value
+        );
+        translateY.set(nextTranslate);
+        return;
+      }
+      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);
+    })
+    .onEnd((event) => {
+      'worklet';
+      const wasDragging = isDraggingSheet.value;
+      isScrollableLocked.set(false);
+      isDraggingSheet.set(false);
+      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);
+          if (lower.length > 0) targetIndex = lower[0]!.index;
+        } else {
+          const upper = allPositions
+            .filter((pos) => pos.translateY < currentTranslate - 1)
+            .sort((a, b) => b.translateY - a.translateY);
+          if (upper.length > 0) targetIndex = upper[0]!.index;
+        }
+      }
+      const hasIndexChanged = targetIndex !== currentIndex.value;
+      if (hasIndexChanged) scheduleOnRN(handleIndexChange, targetIndex);
+      const shouldApplyVelocity = hasIndexChanged && Number.isFinite(velocityY);
+      animateToIndex(targetIndex, shouldApplyVelocity ? velocityY : undefined);
+    });
+  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) {
+    scrimElement = renderScrim(scrimProgress);
+  } else if (modal) {
+    scrimElement = <DefaultScrim progress={scrimProgress} />;
+  }
+  const sheetContent = (
+    <BottomSheetContextProvider
+      value={{
+        translateY,
+        position: internalPosition,
+        index: currentIndex,
+        sheetHeight,
+        scrollOffset,
+        scrollableRef,
+        hasScrollable,
+        isScrollableGestureActive,
+        isScrollableLocked,
+        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 ? (
+        <Pressable style={StyleSheet.absoluteFill} onPress={handleScrimPress}>
+          {scrimElement}
+        </Pressable>
+      ) : null}
+      {sheetContent}
+    </Animated.View>
+  );
+  if (modal) return <Portal>{sheetContainer}</Portal>;
+  return sheetContainer;
+};

package/src/BottomSheetContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+import type { PanGesture } from 'react-native-gesture-handler';
+import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
+
+export interface BottomSheetContextType {
+  translateY: SharedValue<number>;
+  position: SharedValue<number>;
+  index: SharedValue<number>;
+  sheetHeight: SharedValue<number>;
+  scrollOffset: SharedValue<number>;
+  scrollableRef: AnimatedRef<any>;
+  hasScrollable: SharedValue<boolean>;
+  isScrollableGestureActive: SharedValue<boolean>;
+  isScrollableLocked: SharedValue<boolean>;
+  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;
+};