Merge pull request #1806 from wix/fix/TimelineOffsetSync

Fix issue with syncing timelines offset

Author: Inbal-Tish

src/timeline-list/index.tsx

@@ -120,7 +120,7 @@ const TimelineList = (props: TimelineListProps) => {
         scrollToNow: _isToday && isInitialPage && scrollToNow,
         initialTime: !_isToday && isInitialPage ? initialTime : undefined,
         scrollToFirst: !_isToday && isInitialPage && scrollToFirst,
-        scrollOffset: isCurrent ? undefined : timelineOffset,
+        scrollOffset: timelineOffset,
         onChangeOffset: onTimelineOffsetChange,
         showNowIndicator: _isToday && showNowIndicator
       };

src/timeline/useTimelineOffset.ts

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef, MutableRefObject} from 'react';
+import {useCallback, useEffect, MutableRefObject} from 'react';
 import {NativeScrollEvent, NativeSyntheticEvent, ScrollView} from 'react-native';
 
 interface UseTimelineOffsetProps {
@@ -10,8 +10,6 @@ interface UseTimelineOffsetProps {
 export default (props: UseTimelineOffsetProps) => {
   const {onChangeOffset, scrollOffset, scrollViewRef} = props;
 
-  const inMomentum = useRef(false);
-
   useEffect(() => {
     // NOTE: The main reason for this feature is to sync the offset
     // between all of the timelines in the TimelineList component
@@ -25,29 +23,20 @@ export default (props: UseTimelineOffsetProps) => {
 
   const onScrollEndDrag = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const offset = event.nativeEvent.contentOffset.y;
-    setTimeout(() => {
-      if (!inMomentum.current) {
-        onChangeOffset?.(offset);
-      }
-    }, 0);
-  }, []);
+    const velocity = event.nativeEvent.velocity?.y;
 
-  const onMomentumScrollBegin = useCallback(() => {
-    inMomentum.current = true;
+    if (velocity === 0) {
+      onChangeOffset?.(offset);
+    }
   }, []);
 
-  const onMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      inMomentum.current = false;
-      onChangeOffset?.(event.nativeEvent.contentOffset.y);
-    },
-    [onChangeOffset]
-  );
+  const onMomentumScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    onChangeOffset?.(event.nativeEvent.contentOffset.y);
+  }, []);
 
   return {
     scrollEvents: {
       onScrollEndDrag,
-      onMomentumScrollBegin,
       onMomentumScrollEnd
     }
   };