v4.0.0-rc8

Example/react-native-head-tab-view/GestureContainer.tsx

@@ -38,7 +38,7 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
         overflowHeight = 0,
         scrollEnabled = true,
         enableSnap = false,
-        snapWaitduration = 500,
+        scrollingCheckDuration = 50,
         frozeTop = 0,
         isRefreshing: _isRefreshing = false,
         initialPage,
@@ -549,7 +549,8 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
         frozeTop,
         updateSceneInfo,
         enableSnap,
-        snapWaitduration
+        scrollingCheckDuration,
+        isSlidingHeader
     }}>
         <PanGestureHandler
             ref={shipRef}

Example/react-native-head-tab-view/createCollapsibleScrollView.tsx

@@ -58,12 +58,13 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
         curIndexValue,
         tabsIsWorking,
         isTouchTabs,
+        isSlidingHeader,
         refreshHeight,
         overflowPull,
         frozeTop,
         pullExtendedCoefficient,
         enableSnap,
-        snapWaitduration,
+        scrollingCheckDuration,
         refHasChanged,
         updateSceneInfo
     } = useSceneContext()
@@ -74,6 +75,7 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
     const trans = useSharedValue(0);
     const refreshTrans = useSharedValue(refreshHeight);
     const isTouchTabsPrev = useSharedValue(false);
+    const isSlidingHeaderPrev = useSharedValue(false);
     const isRefreshing = useSharedValue(false);
     const isRefreshingWithAnimation = useSharedValue(false);
     const isDragging: { value: boolean } = useSharedValue(false);
@@ -94,6 +96,16 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
             && curIndexValue.value === index
     })
 
+    const canSnapFunc = () => {
+        'worklet'
+        return needSnap.value &&
+            !isTouchTabs.value &&
+            !isSlidingHeader.value &&
+            !isRefreshing.value &&
+            !isRefreshingWithAnimation.value &&
+            !tabsIsWorking.value
+    }
+
     const refreshValue = useDerivedValue(() => {
         if (isRefreshing.value && isRefreshingWithAnimation.value) {
             return refreshHeight - refreshTrans.value
@@ -124,27 +136,26 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
         shareAnimatedValue.value = value
     }, [curIndexValue.value, shareAnimatedValue, index, isRefreshing.value, isRefreshingWithAnimation.value])
 
-    const beginSnap = useCallback(() => {
+    const tryToSnap = useCallback(() => {
         'worklet'
         if (!enableSnap) return;
         cancelAnimation(isScrolling)
-        if (isTouchTabs.value === false && needSnap.value === true) {
+        if (canSnapFunc()) {
             isScrolling.value = 1
-            isScrolling.value = withTiming(0, { duration: snapWaitduration }, (isFinished) => {
+            isScrolling.value = withTiming(0, { duration: scrollingCheckDuration }, (isFinished) => {
 
-                if (isFinished && isTouchTabs.value === false) {
+                if (isFinished && canSnapFunc()) {
                     needSnap.value = false
                     snapAfterGlideOver({
                         sceneRef: _scrollView,
                         shareAnimatedValue,
                         headerHeight,
                         frozeTop
                     })
-
                 }
             })
         }
-    }, [isTouchTabs.value, needSnap.value, isScrolling.value, _scrollView, shareAnimatedValue, headerHeight, frozeTop, enableSnap, snapWaitduration])
+    }, [isScrolling.value, _scrollView, needSnap, shareAnimatedValue, headerHeight, frozeTop, enableSnap, scrollingCheckDuration])
 
     const onScrollAnimateEvent = useAnimatedScrollHandler(
         {
@@ -153,19 +164,18 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
                 let moveY = Math.max(event.contentOffset.y, 0)
 
                 if (isRefreshingWithAnimation.value || isRefreshing.value) return
-                beginSnap()
+                tryToSnap()
                 moveY = isRefreshing.value && isRefreshingWithAnimation.value ? moveY + refreshHeight : moveY
                 updateScrollYTrans(moveY)
                 updateShareValue(moveY)
             },
-
             onMomentumBegin: () => {
                 isLosingMomentum.value = true
             },
             onMomentumEnd: () => {
                 isLosingMomentum.value = false
             }
-        }, [curIndexValue, updateShareValue, updateScrollYTrans, isRefreshingWithAnimation, beginSnap]
+        }, [curIndexValue, updateShareValue, updateScrollYTrans, isRefreshingWithAnimation, tryToSnap]
     )
 
 
@@ -237,23 +247,29 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
         isInitial.current = false
     }, [_isRefreshing, onRefreshStatusCallback, isInitial])
 
-    //snap
+    //Finger off the screen
     useAnimatedReaction(() => {
         return isTouchTabs.value !== isTouchTabsPrev.value && enableSnap
     }, (result) => {
         if (!result) return;
         isTouchTabsPrev.value = isTouchTabs.value
         if (isTouchTabs.value === true) return
-        //EnableSnap is not enabled when you pull down to refresh
-        if (isRefreshing.value === false &&
-            isRefreshingWithAnimation.value === false &&
-            tabsIsWorking.value === false) {
-            needSnap.value = true
-            beginSnap()
-        }
 
+        needSnap.value = true
+        tryToSnap()
+    }, [isTouchTabs, isTouchTabsPrev, tryToSnap, enableSnap])
+
+    //Slide header over
+    useAnimatedReaction(() => {
+        return isSlidingHeader.value !== isSlidingHeaderPrev.value && enableSnap
+    }, (result) => {
+        if (!result) return;
+        isSlidingHeaderPrev.value = isSlidingHeader.value
+        if (isSlidingHeader.value === true) return
 
-    }, [isTouchTabs, isTouchTabsPrev, isRefreshing, isRefreshingWithAnimation, tabsIsWorking, beginSnap, enableSnap])
+        needSnap.value = true
+        tryToSnap()
+    }, [isSlidingHeader, isSlidingHeaderPrev, tryToSnap, enableSnap])
 
     useAnimatedReaction(() => {
         return refreshTrans.value

Example/react-native-head-tab-view/index.d.ts

@@ -70,11 +70,11 @@ export interface CollapsibleHeaderProps {
      */
     enableSnap?: boolean;
     /**
-     * This property is valid when enableSnap is true.
-     * The duration between the time the finger leaves the screen and the snap begins.
-     * it defaults to false.
+     * The amount of time between the onScroll function being called.
+     * (When the interval is longer than scrollingCheckDuration, I think scrolling has stopped)
+     * it defaults to 50ms.
      */
-    snapWaitduration?: number
+    scrollingCheckDuration?: number
 }
 
 

Example/react-native-head-tab-view/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-head-tab-view",
-  "version": "4.0.0-rc.7",
+  "version": "4.0.0-rc.8",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

Example/react-native-head-tab-view/types.tsx

@@ -17,7 +17,7 @@ export interface CollapsibleHeaderProps {
     overflowPull?: number;
     pullExtendedCoefficient?: number;
     enableSnap?: boolean
-    snapWaitduration?: number
+    scrollingCheckDuration?: number
 }
 
 export interface CommonSceneProps {
@@ -56,6 +56,7 @@ export type RefreshType = 'pullToRefresh' | 'enough' | 'prepare' | 'refreshing'
 export interface IHeaderContext {
     tabsIsWorking: Reanimated2.SharedValue<boolean>
     isTouchTabs: Reanimated2.SharedValue<boolean>
+    isSlidingHeader: Reanimated2.SharedValue<boolean>
     shareAnimatedValue: Reanimated2.SharedValue<number>
     frozeTop: number
     tabbarHeight: number
@@ -70,7 +71,7 @@ export interface IHeaderContext {
     curIndexValue: Reanimated2.SharedValue<number>
     updateSceneInfo: (e: updateSceneInfoType) => void
     enableSnap: boolean
-    snapWaitduration: number
+    scrollingCheckDuration: number
 }
 
 export type updateSceneInfoType = {