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

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

@@ -1,15 +1,10 @@
-import { type Ref } from 'react';
-import type { NativeScrollEvent } from 'react-native';
-import type { FlatListPropsWithLayout } from 'react-native-reanimated';
-export interface BottomSheetFlatListProps<T> extends Omit<FlatListPropsWithLayout<T>, 'onScroll' | 'ref'> {
+import { FlatList, type NativeScrollEvent } from 'react-native';
+import type { FlatListPropsWithLayout, SharedValue } from 'react-native-reanimated';
+import type { Ref, ReactElement } from 'react';
+export type BottomSheetFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, 'onScroll' | 'scrollEnabled' | 'ref'> & {
+    scrollEnabled?: boolean | SharedValue<boolean | undefined>;
     onScroll?: (event: NativeScrollEvent) => void;
-    ref?: Ref<BottomSheetFlatListMethods>;
-}
-export declare const BottomSheetFlatList: <T>({ scrollEnabled, onScroll, ref, ...rest }: BottomSheetFlatListProps<T>) => import("react/jsx-runtime").JSX.Element;
-export type BottomSheetFlatListMethods = {
-    scrollToOffset: (params: {
-        offset: number;
-        animated?: boolean;
-    }) => void;
+    ref?: Ref<FlatList<T>>;
 };
+export declare const BottomSheetFlatList: <T>(props: BottomSheetFlatListProps<T>) => ReactElement;
 //# sourceMappingURL=BottomSheetFlatList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetFlatList.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAMvE,MAAM,WAAW,wBAAwB,CAAC,CAAC,CACzC,SAAQ,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,0BAA0B,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAG,2CAKrC,wBAAwB,CAAC,CAAC,CAAC,4CAsC7B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,cAAc,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E,CAAC"}
+{"version":3,"file":"BottomSheetFlatList.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,KAAK,EACV,uBAAuB,EACvB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI/C,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI,IAAI,CAC5C,uBAAuB,CAAC,CAAC,CAAC,EAC1B,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,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAsC,CAAC,CAAC,EACtE,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAC/B,YAAY,CAAC"}

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,UA8KhC,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.1",
+  "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';