feat: allow scrollable events (#1019)

* chore: updated example deps * feat: allow scrollable events
gorhom · Jul 4, 2022 · 2be6498 · 2be6498
1 parent 151b2d0
commit 2be6498
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 17 deletions.
diff --git a/example/bare/ios/Podfile.lock b/example/bare/ios/Podfile.lock
@@ -304,7 +304,7 @@ PODS:
     - React
   - react-native-maps (0.30.2):
     - React-Core
-  - react-native-pager-view (5.4.22):
+  - react-native-pager-view (5.4.24):
     - React-Core
   - react-native-safe-area-context (4.2.4):
     - RCT-Folly
@@ -379,9 +379,9 @@ PODS:
     - React-perflogger (= 0.68.1)
   - RNCMaskedView (0.1.11):
     - React
-  - RNGestureHandler (2.4.2):
+  - RNGestureHandler (2.5.0):
     - React-Core
-  - RNReanimated (2.8.0):
+  - RNReanimated (2.9.1):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -621,7 +621,7 @@ SPEC CHECKSUMS:
   React-logger: f79dd3cc0f9b44f5611c6c7862badd891a862cf8
   react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-maps: df7b9fca1b1c8d356fadbf5b8a63a5f8cf32fc73
-  react-native-pager-view: c0ff94cb1e670bcba387bdf575515c58dfa85f04
+  react-native-pager-view: 95d0418c3c74279840abec6926653d32447bafb6
   react-native-safe-area-context: f98b0b16d1546d208fc293b4661e3f81a895afd9
   React-perflogger: 30ab8d6db10e175626069e742eead3ebe8f24fd5
   React-RCTActionSheet: 4b45da334a175b24dabe75f856b98fed3dfd6201
@@ -636,8 +636,8 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 7285b499d0339104b2813a1f58ad1ada4adbd6c0
   ReactCommon: bf2888a826ceedf54b99ad1b6182d1bc4a8a3984
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
-  RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f
-  RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393
+  RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
+  RNReanimated: 5c8c17e26787fd8984cd5accdc70fef2ca70aafd
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 17cd9a50243093b547c1e539c749928dd68152da

diff --git a/example/bare/package.json b/example/bare/package.json
@@ -24,10 +24,10 @@
     "nanoid": "^3.3.3",
     "react": "17.0.2",
     "react-native": "0.68.1",
-    "react-native-gesture-handler": "^2.4.2",
+    "react-native-gesture-handler": "^2.5.0",
     "react-native-maps": "^0.30.1",
     "react-native-pager-view": "^5.4.9",
-    "react-native-reanimated": "^2.8.0",
+    "react-native-reanimated": "^2.9.1",
     "react-native-redash": "^16.0.11",
     "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "^3.10.1",

diff --git a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
@@ -37,6 +37,10 @@ export function createBottomSheetScrollableComponent<T, P>(
       onRefresh,
       progressViewOffset,
       refreshControl,
+      // events
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
       ...rest
     }: any = props;
 
@@ -47,7 +51,12 @@ export function createBottomSheetScrollableComponent<T, P>(
 
     //#region hooks
     const { scrollableRef, scrollableContentOffsetY, scrollHandler } =
-      useScrollHandler(scrollEventsHandlersHook);
+      useScrollHandler(
+        scrollEventsHandlersHook,
+        onScroll,
+        onScrollBeginDrag,
+        onScrollEndDrag
+      );
     const {
       enableContentPanningGesture,
       animatedFooterHeight,

diff --git a/src/components/bottomSheetScrollable/types.d.ts b/src/components/bottomSheetScrollable/types.d.ts
@@ -135,7 +135,7 @@ export interface BottomSheetFlatListMethods {
 //#region ScrollView
 export type BottomSheetScrollViewProps = Omit<
   Animated.AnimateProps<ScrollViewProps>,
-  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
+  'decelerationRate' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
     ref?: Ref<BottomSheetScrollViewMethods>;
@@ -200,7 +200,7 @@ export interface BottomSheetScrollViewMethods {
 //#region SectionList
 type BottomSheetSectionListProps<ItemT, SectionT> = Omit<
   Animated.AnimateProps<SectionListProps<ItemT, SectionT>>,
-  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
+  'decelerationRate' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
     ref?: Ref<BottomSheetSectionListMethods>;
@@ -243,7 +243,7 @@ export interface BottomSheetSectionListMethods {
 //#region
 export type BottomSheetVirtualizedListProps<T> = Omit<
   Animated.AnimateProps<VirtualizedListProps<T>>,
-  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
+  'decelerationRate' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
     ref?: Ref<BottomSheetVirtualizedListMethods>;

diff --git a/src/hooks/useScrollHandler.ts b/src/hooks/useScrollHandler.ts
@@ -1,14 +1,18 @@
 import {
+  runOnJS,
   useAnimatedRef,
   useAnimatedScrollHandler,
   useSharedValue,
 } from 'react-native-reanimated';
 import { useScrollEventsHandlersDefault } from './useScrollEventsHandlersDefault';
 import { workletNoop as noop } from '../utilities';
-import type { Scrollable } from '../types';
+import type { Scrollable, ScrollableEvent } from '../types';
 
 export const useScrollHandler = (
-  useScrollEventsHandlers = useScrollEventsHandlersDefault
+  useScrollEventsHandlers = useScrollEventsHandlersDefault,
+  onScroll?: ScrollableEvent,
+  onScrollBeginDrag?: ScrollableEvent,
+  onScrollEndDrag?: ScrollableEvent
 ) => {
   // refs
   const scrollableRef = useAnimatedRef<Scrollable>();
@@ -28,9 +32,27 @@ export const useScrollHandler = (
   // callbacks
   const scrollHandler = useAnimatedScrollHandler(
     {
-      onScroll: handleOnScroll,
-      onBeginDrag: handleOnBeginDrag,
-      onEndDrag: handleOnEndDrag,
+      onScroll: (event, context) => {
+        handleOnScroll(event, context);
+
+        if (onScroll) {
+          runOnJS(onScroll)({ nativeEvent: event });
+        }
+      },
+      onBeginDrag: (event, context) => {
+        handleOnBeginDrag(event, context);
+
+        if (onScrollBeginDrag) {
+          runOnJS(onScrollBeginDrag)({ nativeEvent: event });
+        }
+      },
+      onEndDrag: (event, context) => {
+        handleOnEndDrag(event, context);
+
+        if (onScrollEndDrag) {
+          runOnJS(onScrollEndDrag)({ nativeEvent: event });
+        }
+      },
       onMomentumBegin: handleOnMomentumBegin,
       onMomentumEnd: handleOnMomentumEnd,
     },
@@ -40,6 +62,9 @@ export const useScrollHandler = (
       handleOnEndDrag,
       handleOnMomentumBegin,
       handleOnMomentumEnd,
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
     ]
   );
 

diff --git a/src/index.ts b/src/index.ts
@@ -13,6 +13,8 @@ export { useBottomSheetTimingConfigs } from './hooks/useBottomSheetTimingConfigs
 export { useBottomSheetInternal } from './hooks/useBottomSheetInternal';
 export { useBottomSheetModalInternal } from './hooks/useBottomSheetModalInternal';
 export { useBottomSheetDynamicSnapPoints } from './hooks/useBottomSheetDynamicSnapPoints';
+export { useScrollEventsHandlersDefault } from './hooks/useScrollEventsHandlersDefault';
+export { useGestureEventsHandlersDefault } from './hooks/useGestureEventsHandlersDefault';
 //#endregion
 
 //#region components

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -4,6 +4,7 @@ import type {
   ScrollView,
   SectionList,
   NativeScrollEvent,
+  NativeSyntheticEvent,
 } from 'react-native';
 import type {
   GestureEventPayload,
@@ -111,6 +112,9 @@ export type ScrollableRef = {
   id: number;
   node: React.RefObject<Scrollable>;
 };
+export type ScrollableEvent = (
+  event: Pick<NativeSyntheticEvent<NativeScrollEvent>, 'nativeEvent'>
+) => void;
 //#endregion
 
 //#region utils