diff --git a/example/bare/ios/Podfile.lock b/example/bare/ios/Podfile.lock index 64c55cceb..6d63cbf9d 100644 --- 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 index c1e8e7288..08371f12d 100644 --- 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 index c6a75072a..49237cb9d 100644 --- a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx +++ b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx @@ -37,6 +37,10 @@ export function createBottomSheetScrollableComponent( onRefresh, progressViewOffset, refreshControl, + // events + onScroll, + onScrollBeginDrag, + onScrollEndDrag, ...rest }: any = props; @@ -47,7 +51,12 @@ export function createBottomSheetScrollableComponent( //#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 index 798b8757f..2822dbafc 100644 --- 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, - 'decelerationRate' | 'onScroll' | 'scrollEventThrottle' + 'decelerationRate' | 'scrollEventThrottle' > & BottomSheetScrollableProps & { ref?: Ref; @@ -200,7 +200,7 @@ export interface BottomSheetScrollViewMethods { //#region SectionList type BottomSheetSectionListProps = Omit< Animated.AnimateProps>, - 'decelerationRate' | 'onScroll' | 'scrollEventThrottle' + 'decelerationRate' | 'scrollEventThrottle' > & BottomSheetScrollableProps & { ref?: Ref; @@ -243,7 +243,7 @@ export interface BottomSheetSectionListMethods { //#region export type BottomSheetVirtualizedListProps = Omit< Animated.AnimateProps>, - 'decelerationRate' | 'onScroll' | 'scrollEventThrottle' + 'decelerationRate' | 'scrollEventThrottle' > & BottomSheetScrollableProps & { ref?: Ref; diff --git a/src/hooks/useScrollHandler.ts b/src/hooks/useScrollHandler.ts index 8acc1262c..b82d3b976 100644 --- 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(); @@ -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 index 168996a8b..672618bea 100644 --- 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 index 2a792c5b2..803ac5097 100644 --- 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; }; +export type ScrollableEvent = ( + event: Pick, 'nativeEvent'> +) => void; //#endregion //#region utils