fix: fixed the hitslop and pointerevent for android

gorhom · May 28, 2020 · 7062ab9 · 7062ab9
1 parent af56e5d
commit 7062ab9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/example/src/screens/Basic.tsx b/example/src/screens/Basic.tsx
@@ -78,7 +78,6 @@ const Basic = () => {
       <View style={containerStyle}>
         <StickyItemFlatList
           ref={flatListRef}
-          initialScrollIndex={1}
           itemWidth={STORY_WIDTH}
           itemHeight={STORY_HEIGHT}
           separatorSize={SEPARATOR_SIZE}

diff --git a/src/StickyItemFlatList.tsx b/src/StickyItemFlatList.tsx
@@ -183,7 +183,7 @@ const StickyItemFlatList = forwardRef(
       if (tapRef.current) {
         // @ts-ignore
         tapRef.current.setNativeProps({
-          hitSlop: getHitSlop(initialScrollIndex === 0),
+          hitSlop: getHitSlop(initialScrollIndex !== 0),
         });
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/components/sticky-item/StickyItem.tsx b/src/components/sticky-item/StickyItem.tsx
@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Dimensions } from 'react-native';
 import Animated, {
   multiply,
   sub,
   greaterThan,
   cond,
   add,
+  useCode,
+  onChange,
+  call,
+  eq,
 } from 'react-native-reanimated';
 import { transformOrigin } from 'react-native-redash';
 import StickyItemBackground from '../sticky-item-background';
@@ -26,6 +30,7 @@ const StickyItem = ({
   stickyItemBackgroundColors,
   isRTL,
 }: StickyItemProps) => {
+  const containerRef = useRef<Animated.View>(null);
   const threshold = itemWidth - stickyItemWidth - separatorSize;
   //#region Container
   const animatedTranslateX = multiply(
@@ -76,8 +81,46 @@ const StickyItem = ({
       <StickyItemContent {...props} />
     );
   };
+
+  // effects
+  /**
+   * @DEV
+   * here we manipulate the container `pointerEvents` to avoid
+   * the double press event on Android.
+   */
+  useCode(
+    () => [
+      onChange(animatedTranslateX, [
+        cond(
+          eq(animatedTranslateX, separatorSize),
+          call([], () => {
+            const container = containerRef.current;
+            if (container) {
+              // @ts-ignore
+              container.setNativeProps({
+                pointerEvents: 'none',
+              });
+            }
+          })
+        ),
+        cond(
+          eq(animatedTranslateX, (threshold - separatorSize) * -1),
+          call([], () => {
+            const container = containerRef.current;
+            if (container) {
+              // @ts-ignore
+              container.setNativeProps({
+                pointerEvents: 'auto',
+              });
+            }
+          })
+        ),
+      ]),
+    ],
+    [separatorSize, threshold]
+  );
   return (
-    <Animated.View pointerEvents={'none'} style={containerStyle}>
+    <Animated.View ref={containerRef} style={containerStyle}>
       <StickyItemBackground
         threshold={threshold}
         x={x}