fix: add isGliding back + interpolate scrollYCurrent only in iOS

PedroBern · Feb 9, 2021 · 80a5690 · 80a5690
1 parent 56789c1
commit 80a5690
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/src/Container.tsx b/src/Container.tsx
@@ -172,7 +172,7 @@ const Container = React.forwardRef<CollapsibleRef, CollapsibleProps>(
     React.useEffect(() => {
       if (!firstRender.current) pagerOpacity.value = 0
       afterRender.value = withDelay(
-        ONE_FRAME_MS * 10,
+        ONE_FRAME_MS * 5,
         withTiming(1, { duration: 0 })
       )
     }, [afterRender, pagerOpacity, tabNamesArray])

diff --git a/src/hooks.tsx b/src/hooks.tsx
@@ -9,14 +9,16 @@ import {
 } from 'react'
 import { useWindowDimensions } from 'react-native'
 import { ContainerRef, RefComponent } from 'react-native-collapsible-tab-view'
-import Animated, {
+import {
   cancelAnimation,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedScrollHandler,
   useSharedValue,
   withDelay,
   withTiming,
+  interpolate,
+  Extrapolate,
 } from 'react-native-reanimated'
 import { useDeepCompareMemo } from 'use-deep-compare'
 
@@ -213,6 +215,7 @@ export const useScrollHandlerY = (name: TabName) => {
     scrollYCurrent,
     scrollY,
     isScrolling,
+    isGliding,
     oldAccScrollY,
     accScrollY,
     offset,
@@ -227,7 +230,7 @@ export const useScrollHandlerY = (name: TabName) => {
   /**
    * Helper value to track if user is dragging on iOS, because iOS calls
    * onMomentumEnd only after a vigorous swipe. If the user has finished the
-   * drag, but the onMomentumEnd has never triggered, we to need to manually
+   * drag, but the onMomentumEnd has never triggered, we need to manually
    * call it to sync the scenes.
    */
   const afterDrag = useSharedValue(0)
@@ -314,29 +317,33 @@ export const useScrollHandlerY = (name: TabName) => {
         isSnapping.value = false
       }
     }
+    isGliding.value = false
   }
 
   const scrollHandler = useAnimatedScrollHandler(
     {
       onScroll: (event) => {
         if (focusedTab.value === name) {
-          let { y } = event.contentOffset
-
-          // normalize the value so it starts at 0
-          y = y + contentInset
-
-          // ios workaround, make sure we don't rest on 0 otherwise we can't pull to refresh
-          if (IS_IOS && y === 0) {
-            scrollTo(refMap[name], 0, 0, false, `[${name}]: ios reset`)
+          if (IS_IOS) {
+            let { y } = event.contentOffset
+            // normalize the value so it starts at 0
+            y = y + contentInset
+            // ios workaround, make sure we don't rest on 0 otherwise we can't pull to refresh
+            if (y === 0) {
+              scrollTo(refMap[name], 0, 0, false, `[${name}]: ios reset`)
+            }
+            // handle iOS bouncing
+            scrollYCurrent.value = interpolate(
+              y,
+              [0, clampMax],
+              [0, clampMax],
+              Extrapolate.CLAMP
+            )
+          } else {
+            const { y } = event.contentOffset
+            scrollYCurrent.value = y
           }
 
-          scrollYCurrent.value = Animated.interpolate(
-            y,
-            [0, clampMax],
-            [0, clampMax],
-            Animated.Extrapolate.CLAMP
-          )
-
           scrollY.value[index.value] = scrollYCurrent.value
           oldAccScrollY.value = accScrollY.value
           accScrollY.value = scrollY.value[index.value] + offset.value
@@ -387,6 +394,7 @@ export const useScrollHandlerY = (name: TabName) => {
         if (IS_IOS) cancelAnimation(afterDrag)
       },
       onEndDrag: () => {
+        isGliding.value = true
         isDragging.value = false
 
         if (IS_IOS) {
@@ -398,6 +406,7 @@ export const useScrollHandlerY = (name: TabName) => {
               // never started, so we need to manually trigger the onMomentumEnd
               // to make sure we snap
               if (isFinished) {
+                isGliding.value = false
                 onMomentumEnd()
               }
             })
@@ -425,7 +434,12 @@ export const useScrollHandlerY = (name: TabName) => {
   // sync unfocused scenes
   useAnimatedReaction(
     () => {
-      return !isSnapping.value && !isScrolling.value && !isDragging.value
+      return (
+        !isSnapping.value &&
+        !isScrolling.value &&
+        !isDragging.value &&
+        !isGliding.value
+      )
     },
     (sync) => {
       if (sync && focusedTab.value !== name) {