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} -
+ > 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