From 720dbb1b6b98f2a818102fe82b9bf3cd915ec130 Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Mon, 1 Jun 2020 14:29:12 +0200
Subject: [PATCH] chore: add sticky item active effect

---
 README.md                                 |  3 +-
 src/StickyItemFlatList.tsx                | 11 +++++-
 src/components/sticky-item/StickyItem.tsx | 48 ++++++++++++++++-------
 src/constants.ts                          |  2 +
 src/types.ts                              | 18 ++++++++-
 5 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 2c90d1a..b97b063 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@ const StickyItemView = ({
 }) => {
 
   const amazingAnimation = {
-    // here you add your custom interactive animation 
+    // here you add your custom interactive animation
     // based on the animated value `x`
   }
 
@@ -103,6 +103,7 @@ export default App
 | `itemHeight`                 | Item's height.                                                                                    | YES      | number                                              |         |
 | `separatorSize`              | FlatList's separator width.                                                                       | NO       | number                                              | 10      |
 | `borderRadius`               | Item & sticky border radius.                                                                      | NO       | number                                              | 15      |
+| `stickyItemActiveOpacity`    | Sticky item's active opacity.                                                                     | YES      | number                                              | 0.25    |
 | `stickyItemWidth`            | Sticky item's width.                                                                              | YES      | number                                              |         |
 | `stickyItemHeight`           | Sticky item's height.                                                                             | YES      | number                                              |         |
 | `stickyItemBackgroundColors` | Sticky item's two background colors, one when sticky item is extended another when it's minimize. | YES      | string[]                                            |         |
diff --git a/src/StickyItemFlatList.tsx b/src/StickyItemFlatList.tsx
index 42277a5..d3ca50c 100644
--- a/src/StickyItemFlatList.tsx
+++ b/src/StickyItemFlatList.tsx
@@ -29,6 +29,7 @@ import {
   DEFAULT_BORDER_RADIUS,
   DEFAULT_IS_RTL,
   DEFAULT_DECELERATION_RATE,
+  DEFAULT_STICKY_ITEM_ACTIVE_OPACITY,
 } from './constants';
 import type { StickyItemFlatListProps } from './types';
 
@@ -47,6 +48,7 @@ const StickyItemFlatList = forwardRef(
       itemHeight,
       separatorSize = DEFAULT_SEPARATOR_SIZE,
       borderRadius = DEFAULT_BORDER_RADIUS,
+      stickyItemActiveOpacity = DEFAULT_STICKY_ITEM_ACTIVE_OPACITY,
       stickyItemWidth,
       stickyItemHeight,
       stickyItemBackgroundColors,
@@ -195,7 +197,12 @@ const StickyItemFlatList = forwardRef(
     // render
     const renderSeparator = () => <View style={{ width: separatorSize }} />;
     return (
-      <TapGestureHandler ref={tapRef} waitFor={flatListRef} {...tapGestures}>
+      <TapGestureHandler
+        ref={tapRef}
+        waitFor={flatListRef}
+        shouldCancelWhenOutside={true}
+        {...tapGestures}
+      >
         <Animated.View>
           <AnimatedFlatList
             {...rest}
@@ -217,10 +224,12 @@ const StickyItemFlatList = forwardRef(
           />
           <StickyItem
             x={x}
+            tapState={tapState}
             itemWidth={itemWidth}
             itemHeight={itemHeight}
             separatorSize={separatorSize}
             borderRadius={borderRadius}
+            stickyItemActiveOpacity={stickyItemActiveOpacity}
             stickyItemWidth={stickyItemWidth}
             stickyItemHeight={stickyItemHeight}
             stickyItemBackgroundColors={stickyItemBackgroundColors}
diff --git a/src/components/sticky-item/StickyItem.tsx b/src/components/sticky-item/StickyItem.tsx
index af672e1..5fa37f4 100644
--- a/src/components/sticky-item/StickyItem.tsx
+++ b/src/components/sticky-item/StickyItem.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useMemo } from 'react';
 import { Dimensions } from 'react-native';
 import Animated, {
   multiply,
@@ -10,8 +10,11 @@ import Animated, {
   onChange,
   call,
   eq,
+  interpolate,
+  Extrapolate,
+  Easing,
 } from 'react-native-reanimated';
-import { transformOrigin } from 'react-native-redash';
+import { transformOrigin, withTimingTransition } from 'react-native-redash';
 import StickyItemBackground from '../sticky-item-background';
 import { StickyItemProps } from '../../types';
 import { styles } from './styles';
@@ -20,10 +23,12 @@ const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
 const StickyItem = ({
   x,
+  tapState,
   itemWidth,
   itemHeight,
   separatorSize,
   borderRadius,
+  stickyItemActiveOpacity,
   stickyItemWidth,
   stickyItemHeight,
   stickyItemContent: StickyItemContent,
@@ -45,19 +50,32 @@ const StickyItem = ({
     ),
     isRTL ? 1 : -1
   );
-  const containerStyle = [
-    styles.container,
-    {
-      width: itemWidth,
-      height: itemHeight,
-      transform: transformOrigin(
-        { x: itemWidth / 2, y: 0 },
-        {
-          translateX: animatedTranslateX,
-        }
-      ) as Animated.AnimatedTransform,
-    },
-  ];
+  const animatedOpacity = withTimingTransition(eq(tapState, 2), {
+    duration: 125,
+    easing: Easing.inOut(Easing.quad),
+  });
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      {
+        width: itemWidth,
+        height: itemHeight,
+        opacity: interpolate(animatedOpacity, {
+          inputRange: [0, 1],
+          outputRange: [1, stickyItemActiveOpacity],
+          extrapolate: Extrapolate.CLAMP,
+        }),
+        transform: transformOrigin(
+          { x: itemWidth / 2, y: 0 },
+          {
+            translateX: animatedTranslateX,
+          }
+        ) as Animated.AnimatedTransform,
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemWidth, itemHeight, stickyItemActiveOpacity]
+  );
   //#endregion
 
   // render
diff --git a/src/constants.ts b/src/constants.ts
index 1108ecc..222cb51 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -2,10 +2,12 @@ const DEFAULT_SEPARATOR_SIZE = 10;
 const DEFAULT_BORDER_RADIUS = 15;
 const DEFAULT_IS_RTL = false;
 const DEFAULT_DECELERATION_RATE = 'fast';
+const DEFAULT_STICKY_ITEM_ACTIVE_OPACITY = 0.25;
 
 export {
   DEFAULT_SEPARATOR_SIZE,
   DEFAULT_BORDER_RADIUS,
   DEFAULT_IS_RTL,
   DEFAULT_DECELERATION_RATE,
+  DEFAULT_STICKY_ITEM_ACTIVE_OPACITY,
 };
diff --git a/src/types.ts b/src/types.ts
index 57f5de4..3b4918e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,6 @@
 import type { FlatListProps } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { State } from 'react-native-gesture-handler';
 
 export interface StickyItemProps extends Required<StickyItemConfig> {
   /**
@@ -7,6 +8,12 @@ export interface StickyItemProps extends Required<StickyItemConfig> {
    * @type {Animated.Value<number>}
    */
   x: Animated.Value<number>;
+
+  /**
+   * Tap gesture state, this used for tap/press effect
+   * @type {Animated.Value<State>}
+   */
+  tapState: Animated.Value<State>;
 }
 
 export interface StickyItemContentProps
@@ -18,7 +25,10 @@ export interface StickyItemContentProps
 }
 
 export interface StickyItemBackgroundProps
-  extends Omit<StickyItemProps, 'stickyItemContent'> {
+  extends Omit<
+    StickyItemProps,
+    'stickyItemContent' | 'tapState' | 'stickyItemActiveOpacity'
+  > {
   threshold: number;
 }
 
@@ -45,6 +55,12 @@ export interface StickyItemConfig {
    * @default 15
    */
   borderRadius?: number;
+  /**
+   * Sticky item's active opacity.
+   * @type {number}
+   * @default 0.2
+   */
+  stickyItemActiveOpacity?: number;
   /**
    * Sticky item's width.
    * @type {number}