fix: iOS issues when header height is undefined (#126)

We need to wait for the header height to be available, otherwise contentInset will not be the correct value and can cause shifting on iOS. Also, onEndDrag is not reliable on iOS, seems it does not fire when tapping to stop the scroll and this causes scroll sync issues.
PedroBern · Feb 13, 2021 · 5b2711b · 5b2711b
1 parent 7b8ecae
commit 5b2711b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 28 deletions.
diff --git a/src/Container.tsx b/src/Container.tsx
@@ -504,23 +504,25 @@ const Container = React.forwardRef<CollapsibleRef, CollapsibleProps>(
               )}
             </View>
           </Animated.View>
-          <AnimatedFlatList
-            // @ts-expect-error problem with reanimated types, they're missing `ref`
-            ref={containerRef}
-            initialScrollIndex={index.value}
-            data={data}
-            keyExtractor={keyExtractor}
-            renderItem={renderItem}
-            horizontal
-            pagingEnabled
-            onScroll={scrollHandlerX}
-            showsHorizontalScrollIndicator={false}
-            getItemLayout={getItemLayout}
-            scrollEventThrottle={16}
-            bounces={false}
-            {...pagerProps}
-            style={[pagerStylez, pagerProps?.style]}
-          />
+          {headerHeight !== undefined && (
+            <AnimatedFlatList
+              // @ts-expect-error problem with reanimated types, they're missing `ref`
+              ref={containerRef}
+              initialScrollIndex={index.value}
+              data={data}
+              keyExtractor={keyExtractor}
+              renderItem={renderItem}
+              horizontal
+              pagingEnabled
+              onScroll={scrollHandlerX}
+              showsHorizontalScrollIndicator={false}
+              getItemLayout={getItemLayout}
+              scrollEventThrottle={16}
+              bounces={false}
+              {...pagerProps}
+              style={[pagerStylez, pagerProps?.style]}
+            />
+          )}
         </Animated.View>
       </Context.Provider>
     )

diff --git a/src/hooks.tsx b/src/hooks.tsx
@@ -232,8 +232,6 @@ export const useScrollHandlerY = (
     contentHeights,
   } = useTabsContext()
 
-  const isDragging = useSharedValue(false)
-
   /**
    * 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
@@ -258,8 +256,6 @@ export const useScrollHandlerY = (
     'worklet'
     if (!enabled) return
 
-    if (isDragging.value) return
-
     if (typeof snapThreshold === 'number') {
       if (revealHeaderOnScroll) {
         if (accDiffClamp.value > 0) {
@@ -402,15 +398,15 @@ export const useScrollHandlerY = (
         cancelAnimation(accDiffClamp)
 
         isSnapping.value = false
-        isDragging.value = true
+        isScrolling.value = 0
+        isGliding.value = false
 
         if (IS_IOS) cancelAnimation(afterDrag)
       },
       onEndDrag: () => {
         if (!enabled) return
 
         isGliding.value = true
-        isDragging.value = false
 
         if (IS_IOS) {
           // we delay this by one frame so that onMomentumBegin may fire on iOS
@@ -454,11 +450,7 @@ export const useScrollHandlerY = (
   useAnimatedReaction(
     () => {
       return (
-        !isSnapping.value &&
-        !isScrolling.value &&
-        !isDragging.value &&
-        !isGliding.value &&
-        enabled
+        !isSnapping.value && !isScrolling.value && !isGliding.value && enabled
       )
     },
     (sync) => {