@swmansion/react-native-bottom-sheet 0.5.5 → 0.6.0

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

@@ -1,17 +1,10 @@
-import { type Ref } from 'react';
-import type { NativeScrollEvent, ScrollViewProps } from 'react-native';
-type ScrollToOptions = {
-    x?: number;
-    y?: number;
-    animated?: boolean;
-};
-export interface BottomSheetScrollViewProps extends Omit<ScrollViewProps, 'onScroll' | 'ref'> {
+import type { Ref, ReactElement } from 'react';
+import { ScrollView, type NativeScrollEvent, type ScrollViewProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+export type BottomSheetScrollViewProps = Omit<ScrollViewProps, 'onScroll' | 'scrollEnabled' | 'ref'> & {
+    scrollEnabled?: boolean | SharedValue<boolean | undefined>;
     onScroll?: (event: NativeScrollEvent) => void;
-    ref?: Ref<BottomSheetScrollViewMethods>;
-}
-export declare const BottomSheetScrollView: ({ scrollEnabled, onScroll, ref, ...rest }: BottomSheetScrollViewProps) => import("react/jsx-runtime").JSX.Element;
-export type BottomSheetScrollViewMethods = {
-    scrollTo: (options: ScrollToOptions) => void;
+    ref?: Ref<ScrollView>;
 };
-export {};
+export declare const BottomSheetScrollView: (props: BottomSheetScrollViewProps) => ReactElement;
 //# sourceMappingURL=BottomSheetScrollView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetScrollView.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAOvE,KAAK,eAAe,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEtE,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,KAAK,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,4BAA4B,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,qBAAqB,GAAI,2CAKnC,0BAA0B,4CAwC5B,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAC9C,CAAC"}
+{"version":3,"file":"BottomSheetScrollView.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EACL,UAAU,EACV,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,eAAe,EACf,UAAU,GAAG,eAAe,GAAG,KAAK,CACrC,GAAG;IACF,aAAa,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAwC,CACxE,KAAK,EAAE,0BAA0B,KAC9B,YAAY,CAAC"}

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

@@ -0,0 +1,9 @@
+import { type ComponentType, type Ref } from 'react';
+import type { NativeScrollEvent } from 'react-native';
+import { type SharedValue } from 'react-native-reanimated';
+export declare function bottomSheetScrollable<P extends Record<string, any>, R = unknown>(ScrollableComponent: ComponentType<P>): ({ scrollEnabled, onScroll, ref, ...rest }: Omit<P, "onScroll" | "scrollEnabled" | "ref"> & {
+    scrollEnabled?: boolean | SharedValue<boolean | undefined>;
+    onScroll?: (event: NativeScrollEvent) => void;
+    ref?: Ref<R>;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=bottomSheetScrollable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bottomSheetScrollable.d.ts","sourceRoot":"","sources":["../../../src/bottomSheetScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,GAAG,EAAuB,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIrE,wBAAgB,qBAAqB,CACnC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,GAAG,OAAO,EACX,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAC,IAI7B,2CAKL,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,GAAG,KAAK,CAAC,GAAG;IACjD,aAAa,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd,6CAkBF"}

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

@@ -4,10 +4,10 @@ export { ModalBottomSheet } from './ModalBottomSheet';
 export type { ModalBottomSheetProps } from './ModalBottomSheet';
 export { BottomSheetProvider } from './BottomSheetProvider';
 export { BottomSheetFlatList } from './BottomSheetFlatList';
-export type { BottomSheetFlatListMethods, BottomSheetFlatListProps, } from './BottomSheetFlatList';
+export type { BottomSheetFlatListProps } from './BottomSheetFlatList';
 export { BottomSheetScrollView } from './BottomSheetScrollView';
-export type { BottomSheetScrollViewMethods, BottomSheetScrollViewProps, } from './BottomSheetScrollView';
+export type { BottomSheetScrollViewProps } from './BottomSheetScrollView';
 export type { Detent, DetentValue } from './BottomSheetBase';
 export { programmatic } from './BottomSheetBase';
-export { useBottomSheetScrollable } from './useBottomSheetScrollable';
+export { bottomSheetScrollable } from './bottomSheetScrollable';
 //# sourceMappingURL=index.d.ts.map

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,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,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,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -1,5 +1,6 @@
 import type { PanGesture } from 'react-native-gesture-handler';
-import { type AnimatedRef, type SharedValue } from 'react-native-reanimated';
+import { type SharedValue } from 'react-native-reanimated';
+import type { ScrollableEntry } from './BottomSheetContext';
 interface BottomSheetPanGestureParams {
     animationTarget: SharedValue<number>;
     translateY: SharedValue<number>;
@@ -7,14 +8,11 @@ interface BottomSheetPanGestureParams {
     detentsValue: SharedValue<number[]>;
     isDraggableValue: SharedValue<boolean[]>;
     currentIndex: SharedValue<number>;
-    scrollOffset: SharedValue<number>;
-    hasScrollable: SharedValue<boolean>;
-    isScrollableGestureActive: SharedValue<boolean>;
+    scrollableEntries: ScrollableEntry[];
     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 declare const useBottomSheetPanGesture: ({ animationTarget, translateY, sheetHeight, detentsValue, isDraggableValue, currentIndex, scrollableEntries, isScrollableLocked, handleIndexChange, animateToIndex, }: BottomSheetPanGestureParams) => PanGesture;
 export {};
 //# sourceMappingURL=useBottomSheetPanGesture.d.ts.map

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

@@ -1 +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,UAgMhC,CAAC"}
+{"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,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,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,iBAAiB,EAAE,eAAe,EAAE,CAAC;IACrC,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACzC,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,uKAWtC,2BAA2B,KAAG,UA6LhC,CAAC"}

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

@@ -3,7 +3,7 @@ import { type SharedValue } from 'react-native-reanimated';
 type ScrollHandler = (event: NativeScrollEvent) => void;
 export declare const useBottomSheetScrollable: (baseScrollEnabled?: boolean | SharedValue<boolean | undefined>, onScroll?: ScrollHandler) => {
     scrollHandler: import("react-native-reanimated").ScrollHandlerProcessed<Record<string, unknown>>;
-    scrollableRef: import("react-native-reanimated").AnimatedRef<any>;
+    scrollableRef: import("react-native-reanimated").AnimatedRef<import("react").Component<{}, {}, any>>;
     nativeGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/nativeGesture").NativeGesture;
     animatedProps: Partial<{
         scrollEnabled: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"useBottomSheetScrollable.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetScrollable.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EACL,KAAK,WAAW,EAGjB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAExD,eAAO,MAAM,wBAAwB,GACnC,oBAAmB,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,SAAS,CAAQ,EACpE,WAAW,aAAa;;;;;;;CA0DzB,CAAC"}
+{"version":3,"file":"useBottomSheetScrollable.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetScrollable.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EACL,KAAK,WAAW,EAKjB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAExD,eAAO,MAAM,wBAAwB,GACnC,oBAAmB,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,SAAS,CAAQ,EACpE,WAAW,aAAa;;;;;;;CAiDzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -63,6 +63,7 @@
     "@react-native/babel-preset": "0.83.0",
     "@react-native/eslint-config": "0.83.0",
     "@types/react": "19.2.14",
+    "babel-plugin-react-compiler": "1.0.0",
     "del-cli": "6.0.0",
     "eslint": "9.39.2",
     "eslint-config-prettier": "10.1.8",

package/src/BottomSheetBase.tsx

@@ -4,7 +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, {
-  useAnimatedRef,
   useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
@@ -15,7 +14,10 @@ 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';
+import {
+  BottomSheetContextProvider,
+  type ScrollableEntry,
+} from './BottomSheetContext';
 import {
   clampIndex,
   isDetentProgrammatic,
@@ -97,11 +99,17 @@ export const BottomSheetBase = ({
   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 [scrollableEntries, setScrollableEntries] = useState<ScrollableEntry[]>(
+    []
+  );
   const isScrollableLocked = useSharedValue(false);
-  const scrollableRef = useAnimatedRef();
+
+  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);
@@ -185,11 +193,8 @@ export const BottomSheetBase = ({
     detentsValue,
     isDraggableValue,
     currentIndex,
-    scrollOffset,
-    hasScrollable,
-    isScrollableGestureActive,
+    scrollableEntries,
     isScrollableLocked,
-    scrollableRef,
     handleIndexChange,
     animateToIndex,
   });
@@ -225,11 +230,8 @@ export const BottomSheetBase = ({
         position: internalPosition,
         index: currentIndex,
         sheetHeight,
-        scrollOffset,
-        scrollableRef,
-        hasScrollable,
-        isScrollableGestureActive,
         isScrollableLocked,
+        registerScrollable,
         panGesture,
       }}
     >

package/src/BottomSheetContext.tsx

@@ -2,16 +2,19 @@ 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>;
-  scrollOffset: SharedValue<number>;
-  scrollableRef: AnimatedRef<any>;
-  hasScrollable: SharedValue<boolean>;
-  isScrollableGestureActive: SharedValue<boolean>;
   isScrollableLocked: SharedValue<boolean>;
+  registerScrollable: (entry: ScrollableEntry) => () => void;
   panGesture: PanGesture;
 }
 

package/src/BottomSheetFlatList.tsx

@@ -1,63 +1,21 @@
-import { useImperativeHandle, type Ref } from 'react';
-import type { NativeScrollEvent } from 'react-native';
-import { GestureDetector } from 'react-native-gesture-handler';
-import type { FlatListPropsWithLayout } from 'react-native-reanimated';
-import Animated, { scrollTo } from 'react-native-reanimated';
-import { scheduleOnUI } from 'react-native-worklets';
+import { FlatList, type NativeScrollEvent } from 'react-native';
+import type {
+  FlatListPropsWithLayout,
+  SharedValue,
+} from 'react-native-reanimated';
+import type { Ref, ReactElement } from 'react';
 
-import { useBottomSheetScrollable } from './useBottomSheetScrollable';
+import { bottomSheetScrollable } from './bottomSheetScrollable';
 
-export interface BottomSheetFlatListProps<T>
-  extends Omit<FlatListPropsWithLayout<T>, 'onScroll' | 'ref'> {
+export type BottomSheetFlatListProps<T> = Omit<
+  FlatListPropsWithLayout<T>,
+  'onScroll' | 'scrollEnabled' | 'ref'
+> & {
+  scrollEnabled?: boolean | SharedValue<boolean | undefined>;
   onScroll?: (event: NativeScrollEvent) => void;
-  ref?: Ref<BottomSheetFlatListMethods>;
-}
-
-export const BottomSheetFlatList = <T,>({
-  scrollEnabled,
-  onScroll,
-  ref,
-  ...rest
-}: BottomSheetFlatListProps<T>) => {
-  const { scrollHandler, scrollableRef, nativeGesture, animatedProps } =
-    useBottomSheetScrollable(scrollEnabled, onScroll);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      scrollToOffset: ({ offset, animated }) => {
-        const resolvedAnimated = animated ?? true;
-        scheduleOnUI(
-          (
-            animatedRef: Parameters<typeof scrollTo>[0],
-            y: number,
-            shouldAnimate: boolean
-          ) => {
-            'worklet';
-            scrollTo(animatedRef, 0, y, shouldAnimate);
-          },
-          scrollableRef,
-          offset,
-          resolvedAnimated
-        );
-      },
-    }),
-    [scrollableRef]
-  );
-
-  return (
-    <GestureDetector gesture={nativeGesture}>
-      <Animated.FlatList
-        {...rest}
-        animatedProps={animatedProps}
-        ref={scrollableRef}
-        onScroll={scrollHandler}
-        scrollEventThrottle={16}
-      />
-    </GestureDetector>
-  );
+  ref?: Ref<FlatList<T>>;
 };
 
-export type BottomSheetFlatListMethods = {
-  scrollToOffset: (params: { offset: number; animated?: boolean }) => void;
-};
+export const BottomSheetFlatList = bottomSheetScrollable(FlatList) as <T>(
+  props: BottomSheetFlatListProps<T>
+) => ReactElement;

package/src/BottomSheetScrollView.tsx

@@ -1,66 +1,22 @@
-import { useImperativeHandle, type Ref } from 'react';
-import type { NativeScrollEvent, ScrollViewProps } from 'react-native';
-import { GestureDetector } from 'react-native-gesture-handler';
-import Animated, { scrollTo } from 'react-native-reanimated';
-import { scheduleOnUI } from 'react-native-worklets';
+import type { Ref, ReactElement } from 'react';
+import {
+  ScrollView,
+  type NativeScrollEvent,
+  type ScrollViewProps,
+} from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 
-import { useBottomSheetScrollable } from './useBottomSheetScrollable';
+import { bottomSheetScrollable } from './bottomSheetScrollable';
 
-type ScrollToOptions = { x?: number; y?: number; animated?: boolean };
-
-export interface BottomSheetScrollViewProps
-  extends Omit<ScrollViewProps, 'onScroll' | 'ref'> {
+export type BottomSheetScrollViewProps = Omit<
+  ScrollViewProps,
+  'onScroll' | 'scrollEnabled' | 'ref'
+> & {
+  scrollEnabled?: boolean | SharedValue<boolean | undefined>;
   onScroll?: (event: NativeScrollEvent) => void;
-  ref?: Ref<BottomSheetScrollViewMethods>;
-}
-
-export const BottomSheetScrollView = ({
-  scrollEnabled,
-  onScroll,
-  ref,
-  ...rest
-}: BottomSheetScrollViewProps) => {
-  const { scrollHandler, scrollableRef, nativeGesture, animatedProps } =
-    useBottomSheetScrollable(scrollEnabled, onScroll);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      scrollTo: ({ x = 0, y = 0, animated }) => {
-        const resolvedAnimated = animated ?? true;
-        scheduleOnUI(
-          (
-            animatedRef: Parameters<typeof scrollTo>[0],
-            xValue: number,
-            yValue: number,
-            shouldAnimate: boolean
-          ) => {
-            'worklet';
-            scrollTo(animatedRef, xValue, yValue, shouldAnimate);
-          },
-          scrollableRef,
-          x,
-          y,
-          resolvedAnimated
-        );
-      },
-    }),
-    [scrollableRef]
-  );
-
-  return (
-    <GestureDetector gesture={nativeGesture}>
-      <Animated.ScrollView
-        {...rest}
-        animatedProps={animatedProps}
-        ref={scrollableRef}
-        onScroll={scrollHandler}
-        scrollEventThrottle={16}
-      />
-    </GestureDetector>
-  );
+  ref?: Ref<ScrollView>;
 };
 
-export type BottomSheetScrollViewMethods = {
-  scrollTo: (options: ScrollToOptions) => void;
-};
+export const BottomSheetScrollView = bottomSheetScrollable(ScrollView) as (
+  props: BottomSheetScrollViewProps
+) => ReactElement;

package/src/bottomSheetScrollable.tsx

@@ -0,0 +1,42 @@
+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/index.tsx

@@ -4,15 +4,9 @@ export { ModalBottomSheet } from './ModalBottomSheet';
 export type { ModalBottomSheetProps } from './ModalBottomSheet';
 export { BottomSheetProvider } from './BottomSheetProvider';
 export { BottomSheetFlatList } from './BottomSheetFlatList';
-export type {
-  BottomSheetFlatListMethods,
-  BottomSheetFlatListProps,
-} from './BottomSheetFlatList';
+export type { BottomSheetFlatListProps } from './BottomSheetFlatList';
 export { BottomSheetScrollView } from './BottomSheetScrollView';
-export type {
-  BottomSheetScrollViewMethods,
-  BottomSheetScrollViewProps,
-} from './BottomSheetScrollView';
+export type { BottomSheetScrollViewProps } from './BottomSheetScrollView';
 export type { Detent, DetentValue } from './BottomSheetBase';
 export { programmatic } from './BottomSheetBase';
-export { useBottomSheetScrollable } from './useBottomSheetScrollable';
+export { bottomSheetScrollable } from './bottomSheetScrollable';

package/src/useBottomSheetPanGesture.ts

@@ -4,11 +4,11 @@ import { scheduleOnRN } from 'react-native-worklets';
 import {
   measure,
   scrollTo,
-  type AnimatedRef,
   type SharedValue,
   useSharedValue,
 } from 'react-native-reanimated';
 
+import type { ScrollableEntry } from './BottomSheetContext';
 import { findSnapTarget } from './bottomSheetUtils';
 
 interface BottomSheetPanGestureParams {
@@ -18,11 +18,8 @@ interface BottomSheetPanGestureParams {
   detentsValue: SharedValue<number[]>;
   isDraggableValue: SharedValue<boolean[]>;
   currentIndex: SharedValue<number>;
-  scrollOffset: SharedValue<number>;
-  hasScrollable: SharedValue<boolean>;
-  isScrollableGestureActive: SharedValue<boolean>;
+  scrollableEntries: ScrollableEntry[];
   isScrollableLocked: SharedValue<boolean>;
-  scrollableRef: AnimatedRef<any>;
   handleIndexChange: (nextIndex: number) => void;
   animateToIndex: (targetIndex: number, velocity?: number) => void;
 }
@@ -34,11 +31,8 @@ export const useBottomSheetPanGesture = ({
   detentsValue,
   isDraggableValue,
   currentIndex,
-  scrollOffset,
-  hasScrollable,
-  isScrollableGestureActive,
+  scrollableEntries,
   isScrollableLocked,
-  scrollableRef,
   handleIndexChange,
   animateToIndex,
 }: BottomSheetPanGestureParams): PanGesture => {
@@ -48,7 +42,7 @@ export const useBottomSheetPanGesture = ({
   const panStartY = useSharedValue(0);
   const panActivated = useSharedValue(false);
   const dragStartTranslateY = useSharedValue(0);
-  const isTouchWithinScrollable = useSharedValue(false);
+  const activeScrollableIndex = useSharedValue(-1);
 
   return Gesture.Pan()
     .manualActivation(true)
@@ -58,21 +52,26 @@ export const useBottomSheetPanGesture = ({
       isDraggingSheet.set(false);
       isDraggingFromScrollable.set(false);
       isScrollableLocked.set(false);
-      isTouchWithinScrollable.set(false);
+      activeScrollableIndex.set(-1);
       const touch = event.changedTouches[0] ?? event.allTouches[0];
       if (touch !== undefined) {
         panStartX.set(touch.absoluteX);
         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);
+        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;
           }
         }
       }
@@ -84,13 +83,16 @@ export const useBottomSheetPanGesture = ({
       if (!touch) return;
       const deltaX = touch.absoluteX - panStartX.value;
       const deltaY = touch.absoluteY - panStartY.value;
-      if (
-        hasScrollable.value &&
-        scrollOffset.value > 0 &&
-        isTouchWithinScrollable.value &&
-        translateY.value <= 0
-      ) {
-        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();
@@ -113,36 +115,30 @@ export const useBottomSheetPanGesture = ({
     })
     .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) {
-          scrollTo(scrollableRef, 0, 0, false);
+        if (isDraggingFromScrollable.value && active !== undefined) {
+          scrollTo(active.ref, 0, 0, false);
         }
       } else {
         const isDraggingDown = event.translationY > 0;
         const canStartDrag =
-          !hasScrollable.value ||
-          scrollOffset.value <= 0 ||
-          translateY.value > 0 ||
-          !isTouchWithinScrollable.value;
+          !hasActive || activeOffset <= 0 || translateY.value > 0;
         if (!canStartDrag || (!isDraggingDown && translateY.value <= 0)) {
           return;
         }
         const isScrollableActive =
-          hasScrollable.value && isScrollableGestureActive.value;
+          hasActive && active !== undefined && active.isGestureActive.value;
         isDraggingSheet.set(true);
-        isDraggingFromScrollable.set(
-          isScrollableActive &&
-            isTouchWithinScrollable.value &&
-            scrollOffset.value <= 0
-        );
+        isDraggingFromScrollable.set(isScrollableActive && activeOffset <= 0);
         dragStartTranslateY.set(translateY.value - event.translationY);
-        isScrollableLocked.set(hasScrollable.value);
-        if (
-          isTouchWithinScrollable.value &&
-          hasScrollable.value &&
-          scrollOffset.value <= 0
-        ) {
-          scrollTo(scrollableRef, 0, 0, false);
+        isScrollableLocked.set(hasActive);
+        if (hasActive && active !== undefined && activeOffset <= 0) {
+          scrollTo(active.ref, 0, 0, false);
         }
       }
       const rawTranslate = dragStartTranslateY.value + event.translationY;
@@ -163,12 +159,7 @@ export const useBottomSheetPanGesture = ({
         maxDraggableTranslateY
       );
       translateY.set(nextTranslate);
-      if (
-        isDraggingSheet.value &&
-        rawTranslate < 0 &&
-        isTouchWithinScrollable.value &&
-        hasScrollable.value
-      ) {
+      if (isDraggingSheet.value && rawTranslate < 0 && hasActive) {
         isDraggingSheet.set(false);
         isScrollableLocked.set(false);
         let targetSnapIndex = -1;