From 65267cbac95191caf7ea2160582941c4e2e48e4c Mon Sep 17 00:00:00 2001
From: Enes Ozturk <enesozturk.d@gmail.com>
Date: Sat, 30 Jan 2021 12:36:14 +0300
Subject: [PATCH] Animations config optimizations

---
 .../components/holdItem/HoldItem.tsx              | 14 +++++++++-----
 react-native-hold-menu/components/menu/Menu.tsx   | 15 +++++++--------
 react-native-hold-menu/constants.ts               |  2 +-
 react-native-hold-menu/types.ts                   |  4 +++-
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/react-native-hold-menu/components/holdItem/HoldItem.tsx b/react-native-hold-menu/components/holdItem/HoldItem.tsx
index 8187a4e..68f1908 100644
--- a/react-native-hold-menu/components/holdItem/HoldItem.tsx
+++ b/react-native-hold-menu/components/holdItem/HoldItem.tsx
@@ -99,14 +99,18 @@ const HoldItemComponent = ({
 
     const animatedPortalItemContainerStyle = useAnimatedStyle(() => {
         const isAnimationActive = longPressGestureState.value === State.ACTIVE
+        const DELAY_DURATION_FOR_SCALE = isAnimationActive ? HOLD_ITEM_TRANSFORM_DURATION / 2 : 10
+        const DELAY_DURATION_FOR_OPACITY = isAnimationActive ? 0 : HOLD_ITEM_TRANSFORM_DURATION
 
-        const animatedScale = () => isAnimationActive ? withSequence(withTiming(0.95, { duration: HOLD_ITEM_TRANSFORM_DURATION }), withTiming(1)) : 1;
+        const animatedScale = () => isAnimationActive ? withSequence(
+            withTiming(0.95, { duration: HOLD_ITEM_TRANSFORM_DURATION / 4 }),
+            withTiming(1)) : withTiming(1);
         const animateTranslateY = (position: number) =>
-            withDelay(isAnimationActive ? HOLD_ITEM_TRANSFORM_DURATION : 0, withTiming(position, {
+            withDelay(DELAY_DURATION_FOR_SCALE, withTiming(position, {
                 duration: HOLD_ITEM_TRANSFORM_DURATION,
-            }));
+            }))
         const animateOpacity = () =>
-            withDelay(isAnimationActive ? 0 : HOLD_ITEM_TRANSFORM_DURATION, withTiming(
+            withDelay(DELAY_DURATION_FOR_OPACITY, withTiming(
                 isAnimationActive ? 1 : 0,
                 { duration: 0 }
             ))
@@ -171,7 +175,7 @@ const HoldItemComponent = ({
                     animatedProps={animatedPopupProps}
                 >
                     {children}
-                    <Menu itemHeight={itemRectHeight.value} />
+                    <Menu itemHeight={itemRectHeight.value} longPressGestureState={longPressGestureState} />
                 </Animated.View>
             </Portal>
         </>
diff --git a/react-native-hold-menu/components/menu/Menu.tsx b/react-native-hold-menu/components/menu/Menu.tsx
index 4b19920..c110601 100644
--- a/react-native-hold-menu/components/menu/Menu.tsx
+++ b/react-native-hold-menu/components/menu/Menu.tsx
@@ -2,11 +2,9 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 
 import Animated, {
-  runOnJS,
   useAnimatedStyle,
   withTiming,
   withDelay,
-  useSharedValue,
 } from "react-native-reanimated";
 
 import StyleGuide from "../StyleGuide";
@@ -18,9 +16,8 @@ import {
 } from "../../utils/calculations";
 
 import { MenuItem } from "./MenuItem";
-import { HoldMenuContext } from "../provider";
-import { CONTEXT_MENU_STATE } from "../../constants";
 import { HOLD_ITEM_TRANSFORM_DURATION } from "../../constants";
+import { State } from "react-native-gesture-handler";
 
 export const MENU_CONTAINER_WIDTH =
   StyleGuide.dimensionWidth - StyleGuide.spacing * 4;
@@ -32,14 +29,13 @@ const anchorPoint = "top-right"
 
 const Menu = ({
   // items,
+  longPressGestureState,
   itemHeight,
   // toggle,
   // anchorPoint = "top-center",
   containerStyles = {},
   menuStyles = {},
 }: MenuProps) => {
-  const [state, dispatch] = React.useContext(HoldMenuContext)
-
   const MenuHeight = CalculateMenuHeight(items.length)
 
   const leftOrRight = React.useMemo(() => {
@@ -61,8 +57,11 @@ const Menu = ({
   const Translate = MenuAnimationAnchor(anchorPoint);
 
   const messageStyles = useAnimatedStyle(() => {
-    const isAnimationActive = state.active == CONTEXT_MENU_STATE.ACTIVE;
-    const menuScaleAnimation = () => withDelay(HOLD_ITEM_TRANSFORM_DURATION, withTiming(isAnimationActive ? 1 : 0, { duration: 200 }))
+    const isAnimationActive = longPressGestureState.value == State.ACTIVE;
+    const DELAY_DURATION_FOR_SCALE = isAnimationActive ? HOLD_ITEM_TRANSFORM_DURATION / 2 : 20
+
+    const DELAY_DURATION_FOR_MENU_SCALE = isAnimationActive ? DELAY_DURATION_FOR_SCALE + HOLD_ITEM_TRANSFORM_DURATION : 10
+    const menuScaleAnimation = () => withDelay(DELAY_DURATION_FOR_MENU_SCALE, withTiming(isAnimationActive ? 1 : 0, { duration: HOLD_ITEM_TRANSFORM_DURATION }))
 
     return {
       transform: [
diff --git a/react-native-hold-menu/constants.ts b/react-native-hold-menu/constants.ts
index 6cee708..8408427 100644
--- a/react-native-hold-menu/constants.ts
+++ b/react-native-hold-menu/constants.ts
@@ -1,6 +1,6 @@
 import { Dimensions } from "react-native";
 
-export const HOLD_ITEM_TRANSFORM_DURATION = 75;
+export const HOLD_ITEM_TRANSFORM_DURATION = 150;
 
 enum CONTEXT_MENU_STATE {
   UNDETERMINED = 0,
diff --git a/react-native-hold-menu/types.ts b/react-native-hold-menu/types.ts
index 15deeac..71bfbf9 100644
--- a/react-native-hold-menu/types.ts
+++ b/react-native-hold-menu/types.ts
@@ -1,4 +1,6 @@
 import { ViewStyle } from "react-native";
+import { State } from "react-native-gesture-handler";
+import Animated from "react-native-reanimated";
 import { TransformOriginAnchorPoint } from "./utils/calculations";
 
 export interface ItemToHoldProps {
@@ -64,7 +66,7 @@ export type MenuBackDropMethods = {
 };
 
 export interface MenuProps {
-  // toggle?: boolean;
+  longPressGestureState: Animated.SharedValue<State>;
   // items: MenuItemProps[];
   itemHeight?: number;
   // anchorPoint: TransformOriginAnchorPoint;