chore: add sticky item active effect

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[] | |

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}

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

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,
 };

src/types.ts

@@ -1,12 +1,19 @@
 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> {
  /**
  * Animated value of the flatlist x position.
  * @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}