diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx index 39ba29bda8..d9017fbadf 100644 --- a/src/view/com/pager/Pager.tsx +++ b/src/view/com/pager/Pager.tsx @@ -1,6 +1,7 @@ import React, {forwardRef} from 'react' -import {Animated, View} from 'react-native' +import {View} from 'react-native' import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view' +import Animated, { useHandler, useEvent } from 'react-native-reanimated'; import {s} from 'lib/styles' export type PageSelectedEvent = PagerViewOnPageSelectedEvent @@ -20,9 +21,11 @@ interface Props { tabBarPosition?: 'top' | 'bottom' initialPage?: number renderTabBar: RenderTabBarFn + onPageScroll?: (e: any) => void onPageSelected?: (index: number) => void testID?: string } + export const Pager = forwardRef>( function PagerImpl( { @@ -30,6 +33,7 @@ export const Pager = forwardRef>( tabBarPosition = 'top', initialPage = 0, renderTabBar, + onPageScroll, onPageSelected, testID, }: React.PropsWithChildren, @@ -57,6 +61,7 @@ export const Pager = forwardRef>( [pagerView], ) + const handlePageScroll = usePageScrollHandler({ onPageScroll }); return ( {tabBarPosition === 'top' && @@ -68,7 +73,8 @@ export const Pager = forwardRef>( ref={pagerView} style={s.h100pct} initialPage={initialPage} - onPageSelected={onPageSelectedInner}> + onPageSelected={onPageSelectedInner} + onPageScroll={handlePageScroll}> {children} {tabBarPosition === 'bottom' && @@ -80,3 +86,20 @@ export const Pager = forwardRef>( ) }, ) + +function usePageScrollHandler(handlers, dependencies) { + const { context, doDependenciesDiffer } = useHandler(handlers, dependencies); + const subscribeForEvents = ['onPageScroll']; + + return useEvent( + (event) => { + 'worklet'; + const { onPageScroll } = handlers; + if (onPageScroll && event.eventName.endsWith('onPageScroll')) { + onPageScroll(event, context); + } + }, + subscribeForEvents, + doDependenciesDiffer + ); +} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index ad47e9f9b6..bd29729d82 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -111,6 +111,11 @@ export const HomeScreen = withAuthRequired( ref={pagerRef} testID="homeScreen" onPageSelected={onPageSelected} + onPageScroll={(e) => { + 'worklet' + const progress = (e.offset + e.position) / customFeeds.length; + console.log(progress) + }} renderTabBar={renderTabBar} tabBarPosition="top">