From 57804a5167b677b447c64571d2d8c4ea6bad5ad4 Mon Sep 17 00:00:00 2001 From: szydlovsky <9szydlowski9@gmail.com> Date: Wed, 3 Apr 2024 16:29:09 +0200 Subject: [PATCH 1/2] make web useScrollViewOffset properly unpack wrapped scrollViews --- src/reanimated2/hook/useScrollViewOffset.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/reanimated2/hook/useScrollViewOffset.ts b/src/reanimated2/hook/useScrollViewOffset.ts index 70433cf026a..2053f4979ab 100644 --- a/src/reanimated2/hook/useScrollViewOffset.ts +++ b/src/reanimated2/hook/useScrollViewOffset.ts @@ -26,6 +26,15 @@ export const useScrollViewOffset = IS_WEB ? useScrollViewOffsetWeb : useScrollViewOffsetNative; +function getWebScrollableElement( + scrollComponent: AnimatedScrollView | null +): HTMLElement { + return ( + (scrollComponent?.getScrollableNode() as unknown as HTMLElement) ?? + scrollComponent + ); +} + function useScrollViewOffsetWeb( animatedRef: AnimatedRef, providedOffset?: SharedValue @@ -36,7 +45,7 @@ function useScrollViewOffsetWeb( const eventHandler = useCallback(() => { 'worklet'; - const element = animatedRef.current as unknown as HTMLElement; + const element = getWebScrollableElement(animatedRef.current); // scrollLeft is the X axis scrolled offset, works properly also with RTL layout offset.value = element.scrollLeft === 0 ? element.scrollTop : element.scrollLeft; @@ -46,14 +55,14 @@ function useScrollViewOffsetWeb( useEffect(() => { // We need to make sure that listener for old animatedRef value is removed if (scrollRef.current !== null) { - (scrollRef.current as unknown as HTMLElement).removeEventListener( + getWebScrollableElement(scrollRef.current).removeEventListener( 'scroll', eventHandler ); } scrollRef.current = animatedRef.current; - const element = animatedRef.current as unknown as HTMLElement; + const element = getWebScrollableElement(animatedRef.current); element.addEventListener('scroll', eventHandler); return () => { element.removeEventListener('scroll', eventHandler); From 38174cb33f5974fe6ed61694568e5aab7b1ce8c0 Mon Sep 17 00:00:00 2001 From: szydlovsky <9szydlowski9@gmail.com> Date: Wed, 3 Apr 2024 17:20:57 +0200 Subject: [PATCH 2/2] move helpers to the bottom --- src/reanimated2/hook/useScrollViewOffset.ts | 34 ++++++++++----------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/reanimated2/hook/useScrollViewOffset.ts b/src/reanimated2/hook/useScrollViewOffset.ts index 2053f4979ab..bbd5ec3da90 100644 --- a/src/reanimated2/hook/useScrollViewOffset.ts +++ b/src/reanimated2/hook/useScrollViewOffset.ts @@ -26,15 +26,6 @@ export const useScrollViewOffset = IS_WEB ? useScrollViewOffsetWeb : useScrollViewOffsetNative; -function getWebScrollableElement( - scrollComponent: AnimatedScrollView | null -): HTMLElement { - return ( - (scrollComponent?.getScrollableNode() as unknown as HTMLElement) ?? - scrollComponent - ); -} - function useScrollViewOffsetWeb( animatedRef: AnimatedRef, providedOffset?: SharedValue @@ -76,14 +67,6 @@ function useScrollViewOffsetWeb( return offset; } -const scrollNativeEventNames = [ - 'onScroll', - 'onScrollBeginDrag', - 'onScrollEndDrag', - 'onMomentumScrollBegin', - 'onMomentumScrollEnd', -]; - function useScrollViewOffsetNative( animatedRef: AnimatedRef, providedOffset?: SharedValue @@ -126,3 +109,20 @@ function useScrollViewOffsetNative( return offset; } + +function getWebScrollableElement( + scrollComponent: AnimatedScrollView | null +): HTMLElement { + return ( + (scrollComponent?.getScrollableNode() as unknown as HTMLElement) ?? + scrollComponent + ); +} + +const scrollNativeEventNames = [ + 'onScroll', + 'onScrollBeginDrag', + 'onScrollEndDrag', + 'onMomentumScrollBegin', + 'onMomentumScrollEnd', +];