react-native-hold-menu-actions 0.1.17 → 0.1.19

package/lib/module/utils/calculations.js

@@ -32,50 +32,6 @@ export const menuAnimationAnchor = (anchorPoint, itemWidth, itemLength, itemsWit
     }
   };
 };
-export const calculateDynamicTransformValue = (itemY, itemHeight, menuHeight, customViewHeight, anchorPosition, screenHeight, safeAreaTop, safeAreaBottom) => {
-  'worklet';
-
-  const GAP = styleGuide.spacing;
-  const isAnchorTop = anchorPosition.includes('top');
-
-  if (isAnchorTop) {
-    // Menu below item, custom view above item
-    // Total space needed below item: itemHeight + gap + menuHeight + safeAreaBottom
-    // Total space needed above item: customViewHeight + gap + safeAreaTop
-    const bottomEdge = itemY + itemHeight + GAP + menuHeight + safeAreaBottom;
-    const topEdge = itemY - GAP - customViewHeight - safeAreaTop;
-    let tY = 0; // If bottom overflows screen
-
-    if (bottomEdge > screenHeight) {
-      tY = screenHeight - bottomEdge;
-    } // After shifting, check if custom view goes above safe area
-
-
-    if (topEdge + tY < 0) {
-      tY = -topEdge;
-    }
-
-    return tY;
-  } else {
-    // Menu above item, custom view below item
-    // Total space needed above item: menuHeight + gap + safeAreaTop
-    // Total space needed below item: itemHeight + gap + customViewHeight + safeAreaBottom
-    const topEdge = itemY - GAP - menuHeight - safeAreaTop;
-    const bottomEdge = itemY + itemHeight + GAP + customViewHeight + safeAreaBottom;
-    let tY = 0; // If top overflows screen (goes above safe area)
-
-    if (topEdge < 0) {
-      tY = -topEdge;
-    } // After shifting, check if custom view goes below screen
-
-
-    if (bottomEdge + tY > screenHeight) {
-      tY = screenHeight - bottomEdge;
-    }
-
-    return tY;
-  }
-};
 export const getTransformOrigin = (posX, itemWidth, windowWidth, bottom) => {
   'worklet';
 

package/lib/module/utils/calculations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["calculations.ts"],"names":["styleGuide","MENU_WIDTH","MENU_TRANSFORM_ORIGIN_TOLERENCE","FONT_SCALE","MenuItemHeight","typography","callout","lineHeight","spacing","calculateMenuHeight","itemLength","separatorCount","menuAnimationAnchor","anchorPoint","itemWidth","itemsWithSeparatorLength","MenuHeight","splittetAnchorName","split","Center1","Center2","TyTop1","TyTop2","TxLeft1","TxLeft2","beginningTransformations","translateX","translateY","endingTransformations","calculateDynamicTransformValue","itemY","itemHeight","menuHeight","customViewHeight","anchorPosition","screenHeight","safeAreaTop","safeAreaBottom","GAP","isAnchorTop","includes","bottomEdge","topEdge","tY","getTransformOrigin","posX","windowWidth","bottom","distanceToLeft","Math","round","distanceToRight","position","majority","abs"],"mappings":"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","sourcesContent":["import styleGuide from '../styleGuide';\nimport {\n  MENU_WIDTH,\n  MENU_TRANSFORM_ORIGIN_TOLERENCE,\n  FONT_SCALE,\n} from '../constants';\n\nexport const MenuItemHeight = () => {\n  'worklet';\n  return (\n    styleGuide.typography.callout.lineHeight * FONT_SCALE +\n    styleGuide.spacing * 2.5\n  );\n};\n\nexport const calculateMenuHeight = (\n  itemLength: number,\n  separatorCount: number\n) => {\n  'worklet';\n  return (\n    MenuItemHeight() * itemLength +\n    (itemLength - 1) +\n    separatorCount * styleGuide.spacing\n  );\n};\n\nexport type TransformOriginAnchorPosition =\n  | 'top-right'\n  | 'top-left'\n  | 'top-center'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'bottom-center';\n\nexport const menuAnimationAnchor = (\n  anchorPoint: TransformOriginAnchorPosition,\n  itemWidth: number,\n  itemLength: number,\n  itemsWithSeparatorLength: number\n) => {\n  'worklet';\n  const MenuHeight = calculateMenuHeight(itemLength, itemsWithSeparatorLength);\n  const splittetAnchorName: string[] = anchorPoint.split('-');\n\n  const Center1 = itemWidth;\n  const Center2 = 0;\n\n  const TyTop1 = -(MenuHeight / 2);\n  const TyTop2 = MenuHeight / 2;\n\n  const TxLeft1 = (MENU_WIDTH / 2) * -1;\n  const TxLeft2 = (MENU_WIDTH / 2) * 1;\n\n  return {\n    beginningTransformations: {\n      translateX:\n        splittetAnchorName[1] === 'right'\n          ? -TxLeft1\n          : splittetAnchorName[1] === 'left'\n          ? TxLeft1\n          : Center1,\n      translateY:\n        splittetAnchorName[0] === 'top'\n          ? TyTop1\n          : splittetAnchorName[0] === 'bottom'\n          ? TyTop1\n          : Center2,\n    },\n    endingTransformations: {\n      translateX:\n        splittetAnchorName[1] === 'right'\n          ? -TxLeft2\n          : splittetAnchorName[1] === 'left'\n          ? TxLeft2\n          : Center2,\n      translateY:\n        splittetAnchorName[0] === 'top'\n          ? TyTop2\n          : splittetAnchorName[0] === 'bottom'\n          ? -TyTop2\n          : Center2,\n    },\n  };\n};\n\nexport const calculateDynamicTransformValue = (\n  itemY: number,\n  itemHeight: number,\n  menuHeight: number,\n  customViewHeight: number,\n  anchorPosition: TransformOriginAnchorPosition,\n  screenHeight: number,\n  safeAreaTop: number,\n  safeAreaBottom: number\n): number => {\n  'worklet';\n  const GAP = styleGuide.spacing;\n  const isAnchorTop = anchorPosition.includes('top');\n\n  if (isAnchorTop) {\n    // Menu below item, custom view above item\n    // Total space needed below item: itemHeight + gap + menuHeight + safeAreaBottom\n    // Total space needed above item: customViewHeight + gap + safeAreaTop\n    const bottomEdge = itemY + itemHeight + GAP + menuHeight + safeAreaBottom;\n    const topEdge = itemY - GAP - customViewHeight - safeAreaTop;\n\n    let tY = 0;\n\n    // If bottom overflows screen\n    if (bottomEdge > screenHeight) {\n      tY = screenHeight - bottomEdge;\n    }\n    // After shifting, check if custom view goes above safe area\n    if (topEdge + tY < 0) {\n      tY = -topEdge;\n    }\n    return tY;\n  } else {\n    // Menu above item, custom view below item\n    // Total space needed above item: menuHeight + gap + safeAreaTop\n    // Total space needed below item: itemHeight + gap + customViewHeight + safeAreaBottom\n    const topEdge = itemY - GAP - menuHeight - safeAreaTop;\n    const bottomEdge =\n      itemY + itemHeight + GAP + customViewHeight + safeAreaBottom;\n\n    let tY = 0;\n    // If top overflows screen (goes above safe area)\n    if (topEdge < 0) {\n      tY = -topEdge;\n    }\n    // After shifting, check if custom view goes below screen\n    if (bottomEdge + tY > screenHeight) {\n      tY = screenHeight - bottomEdge;\n    }\n    return tY;\n  }\n};\n\nexport const getTransformOrigin = (\n  posX: number,\n  itemWidth: number,\n  windowWidth: number,\n  bottom?: boolean\n): TransformOriginAnchorPosition => {\n  'worklet';\n  const distanceToLeft = Math.round(posX + itemWidth / 2);\n  const distanceToRight = Math.round(windowWidth - distanceToLeft);\n\n  let position: TransformOriginAnchorPosition = bottom\n    ? 'bottom-right'\n    : 'top-right';\n\n  const majority = Math.abs(distanceToLeft - distanceToRight);\n\n  if (majority < MENU_TRANSFORM_ORIGIN_TOLERENCE) {\n    position = bottom ? 'bottom-center' : 'top-center';\n  } else if (distanceToLeft < distanceToRight) {\n    position = bottom ? 'bottom-left' : 'top-left';\n  }\n\n  return position;\n};\n"]}
+{"version":3,"sources":["calculations.ts"],"names":["styleGuide","MENU_WIDTH","MENU_TRANSFORM_ORIGIN_TOLERENCE","FONT_SCALE","MenuItemHeight","typography","callout","lineHeight","spacing","calculateMenuHeight","itemLength","separatorCount","menuAnimationAnchor","anchorPoint","itemWidth","itemsWithSeparatorLength","MenuHeight","splittetAnchorName","split","Center1","Center2","TyTop1","TyTop2","TxLeft1","TxLeft2","beginningTransformations","translateX","translateY","endingTransformations","getTransformOrigin","posX","windowWidth","bottom","distanceToLeft","Math","round","distanceToRight","position","majority","abs"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,eAAvB;AACA,SACEC,UADF,EAEEC,+BAFF,EAGEC,UAHF,QAIO,cAJP;AAMA,OAAO,MAAMC,cAAc,GAAG,MAAM;AAClC;;AACA,SACEJ,UAAU,CAACK,UAAX,CAAsBC,OAAtB,CAA8BC,UAA9B,GAA2CJ,UAA3C,GACAH,UAAU,CAACQ,OAAX,GAAqB,GAFvB;AAID,CANM;AAQP,OAAO,MAAMC,mBAAmB,GAAG,CACjCC,UADiC,EAEjCC,cAFiC,KAG9B;AACH;;AACA,SACEP,cAAc,KAAKM,UAAnB,IACCA,UAAU,GAAG,CADd,IAEAC,cAAc,GAAGX,UAAU,CAACQ,OAH9B;AAKD,CAVM;AAoBP,OAAO,MAAMI,mBAAmB,GAAG,CACjCC,WADiC,EAEjCC,SAFiC,EAGjCJ,UAHiC,EAIjCK,wBAJiC,KAK9B;AACH;;AACA,QAAMC,UAAU,GAAGP,mBAAmB,CAACC,UAAD,EAAaK,wBAAb,CAAtC;AACA,QAAME,kBAA4B,GAAGJ,WAAW,CAACK,KAAZ,CAAkB,GAAlB,CAArC;AAEA,QAAMC,OAAO,GAAGL,SAAhB;AACA,QAAMM,OAAO,GAAG,CAAhB;AAEA,QAAMC,MAAM,GAAG,EAAEL,UAAU,GAAG,CAAf,CAAf;AACA,QAAMM,MAAM,GAAGN,UAAU,GAAG,CAA5B;AAEA,QAAMO,OAAO,GAAItB,UAAU,GAAG,CAAd,GAAmB,CAAC,CAApC;AACA,QAAMuB,OAAO,GAAIvB,UAAU,GAAG,CAAd,GAAmB,CAAnC;AAEA,SAAO;AACLwB,IAAAA,wBAAwB,EAAE;AACxBC,MAAAA,UAAU,EACRT,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,OAA1B,GACI,CAACM,OADL,GAEIN,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,MAA1B,GACAM,OADA,GAEAJ,OANkB;AAOxBQ,MAAAA,UAAU,EACRV,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,KAA1B,GACII,MADJ,GAEIJ,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,QAA1B,GACAI,MADA,GAEAD;AAZkB,KADrB;AAeLQ,IAAAA,qBAAqB,EAAE;AACrBF,MAAAA,UAAU,EACRT,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,OAA1B,GACI,CAACO,OADL,GAEIP,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,MAA1B,GACAO,OADA,GAEAJ,OANe;AAOrBO,MAAAA,UAAU,EACRV,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,KAA1B,GACIK,MADJ,GAEIL,kBAAkB,CAAC,CAAD,CAAlB,KAA0B,QAA1B,GACA,CAACK,MADD,GAEAF;AAZe;AAflB,GAAP;AA8BD,CAjDM;AAmDP,OAAO,MAAMS,kBAAkB,GAAG,CAChCC,IADgC,EAEhChB,SAFgC,EAGhCiB,WAHgC,EAIhCC,MAJgC,KAKE;AAClC;;AACA,QAAMC,cAAc,GAAGC,IAAI,CAACC,KAAL,CAAWL,IAAI,GAAGhB,SAAS,GAAG,CAA9B,CAAvB;AACA,QAAMsB,eAAe,GAAGF,IAAI,CAACC,KAAL,CAAWJ,WAAW,GAAGE,cAAzB,CAAxB;AAEA,MAAII,QAAuC,GAAGL,MAAM,GAChD,cADgD,GAEhD,WAFJ;AAIA,QAAMM,QAAQ,GAAGJ,IAAI,CAACK,GAAL,CAASN,cAAc,GAAGG,eAA1B,CAAjB;;AAEA,MAAIE,QAAQ,GAAGpC,+BAAf,EAAgD;AAC9CmC,IAAAA,QAAQ,GAAGL,MAAM,GAAG,eAAH,GAAqB,YAAtC;AACD,GAFD,MAEO,IAAIC,cAAc,GAAGG,eAArB,EAAsC;AAC3CC,IAAAA,QAAQ,GAAGL,MAAM,GAAG,aAAH,GAAmB,UAApC;AACD;;AAED,SAAOK,QAAP;AACD,CAvBM","sourcesContent":["import styleGuide from '../styleGuide';\nimport {\n  MENU_WIDTH,\n  MENU_TRANSFORM_ORIGIN_TOLERENCE,\n  FONT_SCALE,\n} from '../constants';\n\nexport const MenuItemHeight = () => {\n  'worklet';\n  return (\n    styleGuide.typography.callout.lineHeight * FONT_SCALE +\n    styleGuide.spacing * 2.5\n  );\n};\n\nexport const calculateMenuHeight = (\n  itemLength: number,\n  separatorCount: number\n) => {\n  'worklet';\n  return (\n    MenuItemHeight() * itemLength +\n    (itemLength - 1) +\n    separatorCount * styleGuide.spacing\n  );\n};\n\nexport type TransformOriginAnchorPosition =\n  | 'top-right'\n  | 'top-left'\n  | 'top-center'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'bottom-center';\n\nexport const menuAnimationAnchor = (\n  anchorPoint: TransformOriginAnchorPosition,\n  itemWidth: number,\n  itemLength: number,\n  itemsWithSeparatorLength: number\n) => {\n  'worklet';\n  const MenuHeight = calculateMenuHeight(itemLength, itemsWithSeparatorLength);\n  const splittetAnchorName: string[] = anchorPoint.split('-');\n\n  const Center1 = itemWidth;\n  const Center2 = 0;\n\n  const TyTop1 = -(MenuHeight / 2);\n  const TyTop2 = MenuHeight / 2;\n\n  const TxLeft1 = (MENU_WIDTH / 2) * -1;\n  const TxLeft2 = (MENU_WIDTH / 2) * 1;\n\n  return {\n    beginningTransformations: {\n      translateX:\n        splittetAnchorName[1] === 'right'\n          ? -TxLeft1\n          : splittetAnchorName[1] === 'left'\n          ? TxLeft1\n          : Center1,\n      translateY:\n        splittetAnchorName[0] === 'top'\n          ? TyTop1\n          : splittetAnchorName[0] === 'bottom'\n          ? TyTop1\n          : Center2,\n    },\n    endingTransformations: {\n      translateX:\n        splittetAnchorName[1] === 'right'\n          ? -TxLeft2\n          : splittetAnchorName[1] === 'left'\n          ? TxLeft2\n          : Center2,\n      translateY:\n        splittetAnchorName[0] === 'top'\n          ? TyTop2\n          : splittetAnchorName[0] === 'bottom'\n          ? -TyTop2\n          : Center2,\n    },\n  };\n};\n\nexport const getTransformOrigin = (\n  posX: number,\n  itemWidth: number,\n  windowWidth: number,\n  bottom?: boolean\n): TransformOriginAnchorPosition => {\n  'worklet';\n  const distanceToLeft = Math.round(posX + itemWidth / 2);\n  const distanceToRight = Math.round(windowWidth - distanceToLeft);\n\n  let position: TransformOriginAnchorPosition = bottom\n    ? 'bottom-right'\n    : 'top-right';\n\n  const majority = Math.abs(distanceToLeft - distanceToRight);\n\n  if (majority < MENU_TRANSFORM_ORIGIN_TOLERENCE) {\n    position = bottom ? 'bottom-center' : 'top-center';\n  } else if (distanceToLeft < distanceToRight) {\n    position = bottom ? 'bottom-left' : 'top-left';\n  }\n\n  return position;\n};\n"]}

package/lib/typescript/components/customView/CustomView.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const CustomView: React.MemoExoticComponent<() => JSX.Element>;
+declare const CustomView: React.MemoExoticComponent<() => JSX.Element | null>;
 export default CustomView;

package/lib/typescript/components/menu/types.d.ts

@@ -28,7 +28,6 @@ export type MenuInternalProps = {
   anchorPosition: TransformOriginAnchorPosition;
   menuHeight: number;
   transformValue: number;
-  customViewHeight: number;
   actionParams: {
     [name: string]: (string | number)[];
   };

package/lib/typescript/utils/calculations.d.ts

@@ -11,5 +11,4 @@ export declare const menuAnimationAnchor: (anchorPoint: TransformOriginAnchorPos
         translateY: number;
     };
 };
-export declare const calculateDynamicTransformValue: (itemY: number, itemHeight: number, menuHeight: number, customViewHeight: number, anchorPosition: TransformOriginAnchorPosition, screenHeight: number, safeAreaTop: number, safeAreaBottom: number) => number;
 export declare const getTransformOrigin: (posX: number, itemWidth: number, windowWidth: number, bottom?: boolean | undefined) => TransformOriginAnchorPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-hold-menu-actions",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "A performant, easy to use hold to open context menu for React Native powered by Reanimated.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/components/backdrop/Backdrop.tsx

@@ -117,7 +117,6 @@ const BackdropComponent = () => {
       <AnimatedBlurView
         // @ts-ignore
         tint="default"
-        blurType={'dark'}
         animatedProps={animatedContainerProps}
         style={[styles.container, animatedContainerStyle]}
       >

package/src/components/customView/CustomView.tsx

@@ -5,7 +5,7 @@ import Animated, {
   runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
-  useSharedValue,
+  withDelay,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
@@ -17,45 +17,35 @@ import {
   SPRING_CONFIGURATION,
   SPRING_CONFIGURATION_MENU,
   WINDOW_WIDTH,
-  WINDOW_HEIGHT,
 } from '../../constants';
 import { RenderCustomView } from '../menu/types';
-import { calculateDynamicTransformValue } from '../../utils/calculations';
-
-const SCREEN_PADDING = 16;
 
 const CustomViewComponent = () => {
-  const { state, menuProps, customViewRef, safeAreaInsets } = useInternal();
+  const { state, menuProps, customViewRef } = useInternal();
 
   const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);
-
-  const cvHeight = useSharedValue(0);
-  const cvWidth = useSharedValue(0);
+  const [customViewHeight, setCustomViewHeight] = useState(0);
+  const [customViewWidth, setCustomViewWidth] = useState(0);
 
   const closeMenu = useCallback(() => {
     state.value = CONTEXT_MENU_STATE.END;
   }, [state]);
 
-  const onLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      const { height, width } = event.nativeEvent.layout;
-      cvHeight.value = height;
-      cvWidth.value = width;
-      menuProps.value = { ...menuProps.value, customViewHeight: height };
-    },
-    [menuProps, cvHeight, cvWidth]
-  );
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height, width } = event.nativeEvent.layout;
+    setCustomViewHeight(height);
+    setCustomViewWidth(width);
+  }, []);
 
   const clearRenderFn = useCallback(() => {
     setRenderFn(null);
-    cvHeight.value = 0;
-    cvWidth.value = 0;
-    menuProps.value = { ...menuProps.value, customViewHeight: 0 };
-  }, [menuProps, cvHeight, cvWidth]);
+    setCustomViewHeight(0);
+    setCustomViewWidth(0);
+  }, []);
 
   const updateRenderFn = useCallback(
-    (shouldShow: boolean) => {
-      if (shouldShow && customViewRef.current) {
+    (hasCustomView: boolean) => {
+      if (hasCustomView && customViewRef.current) {
         setRenderFn(() => customViewRef.current);
       } else {
         setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);
@@ -79,71 +69,87 @@ const CustomViewComponent = () => {
     [state, menuProps]
   );
 
-  const visibilityStyles = useAnimatedStyle(() => {
-    const active =
-      state.value === CONTEXT_MENU_STATE.ACTIVE &&
-      menuProps.value.hasCustomView;
-    return {
-      opacity: withTiming(active ? 1 : 0, {
-        duration: HOLD_ITEM_TRANSFORM_DURATION,
-      }),
-      transform: [
-        {
-          scale: active
-            ? withSpring(1, SPRING_CONFIGURATION_MENU)
-            : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
-        },
-      ],
-    };
-  });
-
   const wrapperStyles = useAnimatedStyle(() => {
     const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
     const isAbove = anchorPositionVertical === 'top';
 
+    // Fixed anchor point: top of the item
     const top = menuProps.value.itemY;
+
+    const SCREEN_PADDING = 16;
     const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2;
 
+    // Start at item's left edge
     let left = menuProps.value.itemX;
-    const w = cvWidth.value;
-    if (w > 0 && left + w > WINDOW_WIDTH - SCREEN_PADDING) {
-      left = Math.max(SCREEN_PADDING, WINDOW_WIDTH - w - SCREEN_PADDING);
+
+    // If the view overflows the right edge, shift left
+    if (
+      customViewWidth > 0 &&
+      left + customViewWidth > WINDOW_WIDTH - SCREEN_PADDING
+    ) {
+      left = Math.max(
+        SCREEN_PADDING,
+        WINDOW_WIDTH - customViewWidth - SCREEN_PADDING
+      );
     }
     if (left < SCREEN_PADDING) {
       left = SCREEN_PADDING;
     }
-
-    const h = cvHeight.value;
-    const tY = calculateDynamicTransformValue(
-      menuProps.value.itemY,
-      menuProps.value.itemHeight,
-      menuProps.value.menuHeight,
-      h,
-      menuProps.value.anchorPosition,
-      WINDOW_HEIGHT,
-      safeAreaInsets?.top || 0,
-      safeAreaInsets?.bottom || 0
+    const tY = menuProps.value.transformValue;
+
+    // Positional offset via translateY:
+    // above item: shift up by customViewHeight + gap
+    // below item: shift down by itemHeight + gap
+    const positionOffsetY = isAbove
+      ? -(customViewHeight + 8)
+      : menuProps.value.itemHeight + 8;
+
+    const scaleAnimation =
+      state.value === CONTEXT_MENU_STATE.ACTIVE
+        ? withDelay(150, withSpring(1, SPRING_CONFIGURATION_MENU))
+        : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION });
+
+    const opacityAnimation = withDelay(
+      150,
+      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
+        duration: HOLD_ITEM_TRANSFORM_DURATION,
+      })
     );
 
-    const positionOffsetY = isAbove ? -(h + 8) : menuProps.value.itemHeight + 8;
+    // Scale anchor: scale from the edge closest to the item
+    const scaleAnchorOffset = isAbove
+      ? customViewHeight / 2
+      : -(customViewHeight / 2);
 
     return {
       top,
       left,
       maxWidth: MAX_WIDTH,
+      opacity: opacityAnimation,
       transform: [
-        { translateY: withSpring(tY, SPRING_CONFIGURATION) },
+        // 1. Transform value (screen boundary compensation)
+        {
+          translateY:
+            state.value === CONTEXT_MENU_STATE.ACTIVE
+              ? withSpring(tY, SPRING_CONFIGURATION)
+              : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
+        },
+        // 2. Position offset (animated when customViewHeight changes)
         { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },
+        // 3. Scale anchor: move to edge -> scale -> move back
+        { translateY: scaleAnchorOffset },
+        { scale: scaleAnimation },
+        { translateY: -scaleAnchorOffset },
       ],
     };
-  });
+  }, [menuProps, customViewHeight, customViewWidth]);
+
+  if (!renderFn) return null;
 
   return (
     <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>
-      <Animated.View style={visibilityStyles}>
-        <Animated.View onLayout={onLayout}>
-          {renderFn?.({ closeMenu })}
-        </Animated.View>
+      <Animated.View onLayout={onLayout}>
+        {renderFn({ closeMenu })}
       </Animated.View>
     </Animated.View>
   );
@@ -153,7 +159,6 @@ const styles = StyleSheet.create({
   customViewWrapper: {
     position: 'absolute',
     zIndex: 20,
-    pointerEvents: 'box-none',
   },
 });
 

package/src/components/holdItem/HoldItem.tsx

@@ -35,7 +35,6 @@ import {
   TransformOriginAnchorPosition,
   getTransformOrigin,
   calculateMenuHeight,
-  calculateDynamicTransformValue,
 } from '../../utils/calculations';
 import {
   HOLD_ITEM_TRANSFORM_DURATION,
@@ -152,9 +151,18 @@ const HoldItemComponent = ({
   const calculateTransformValue = () => {
     'worklet';
 
-    const height =
+    const screenH =
       deviceOrientation === 'portrait' ? WINDOW_HEIGHT : WINDOW_WIDTH;
 
+    const hasCustomView = !!renderCustomView;
+
+    // If custom view exists, center item on screen
+    if (hasCustomView && !disableMove) {
+      const itemCenterY = itemRectY.value + itemRectHeight.value / 2;
+      const screenCenterY = screenH / 2;
+      return screenCenterY - itemCenterY;
+    }
+
     const isAnchorPointTop = transformOrigin.value.includes('top');
 
     let tY = 0;
@@ -167,7 +175,7 @@ const HoldItemComponent = ({
           styleGuide.spacing +
           (safeAreaInsets?.bottom || 0);
 
-        tY = topTransform > height ? height - topTransform : 0;
+        tY = topTransform > screenH ? screenH - topTransform : 0;
       } else {
         const bottomTransform =
           itemRectY.value - menuHeight - (safeAreaInsets?.top || 0);
@@ -196,7 +204,6 @@ const HoldItemComponent = ({
       menuHeight: menuHeight,
       items: items || [],
       transformValue: transformValue.value,
-      customViewHeight: 0,
       actionParams: actionParams || {},
       hasCustomView: !!renderCustomView,
     };
@@ -334,18 +341,7 @@ const HoldItemComponent = ({
     const animateOpacity = () =>
       withDelay(HOLD_ITEM_TRANSFORM_DURATION, withTiming(0, { duration: 0 }));
 
-    const screenH =
-      deviceOrientation === 'portrait' ? WINDOW_HEIGHT : WINDOW_WIDTH;
-    let tY = calculateDynamicTransformValue(
-      itemRectY.value,
-      itemRectHeight.value,
-      menuHeight,
-      menuProps.value.customViewHeight,
-      transformOrigin.value,
-      screenH,
-      safeAreaInsets?.top || 0,
-      safeAreaInsets?.bottom || 0
-    );
+    let tY = calculateTransformValue();
     const transformAnimation = () =>
       disableMove
         ? 0

package/src/components/menu/Menu.tsx

@@ -14,12 +14,10 @@ import {
   HOLD_ITEM_TRANSFORM_DURATION,
   CONTEXT_MENU_STATE,
   SPRING_CONFIGURATION,
-  WINDOW_HEIGHT,
 } from '../../constants';
-import { calculateDynamicTransformValue } from '../../utils/calculations';
 
 const MenuComponent = () => {
-  const { state, menuProps, safeAreaInsets } = useInternal();
+  const { state, menuProps } = useInternal();
 
   const wrapperStyles = useAnimatedStyle(() => {
     const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
@@ -30,16 +28,7 @@ const MenuComponent = () => {
         : menuProps.value.itemY - 8;
     const left = menuProps.value.itemX;
     const width = menuProps.value.itemWidth;
-    const tY = calculateDynamicTransformValue(
-      menuProps.value.itemY,
-      menuProps.value.itemHeight,
-      menuProps.value.menuHeight,
-      menuProps.value.customViewHeight,
-      menuProps.value.anchorPosition,
-      WINDOW_HEIGHT,
-      safeAreaInsets?.top || 0,
-      safeAreaInsets?.bottom || 0
-    );
+    const tY = menuProps.value.transformValue;
 
     return {
       top,

package/src/components/menu/types.d.ts

@@ -28,7 +28,6 @@ export type MenuInternalProps = {
   anchorPosition: TransformOriginAnchorPosition;
   menuHeight: number;
   transformValue: number;
-  customViewHeight: number;
   actionParams: {
     [name: string]: (string | number)[];
   };

package/src/components/provider/Provider.tsx

@@ -1,10 +1,6 @@
 import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { PortalProvider } from '@gorhom/portal';
-import Animated, {
-  useSharedValue,
-  useAnimatedReaction,
-  runOnJS,
-} from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 // Components
@@ -51,7 +47,6 @@ const ProviderComponent = ({
     anchorPosition: 'top-center',
     menuHeight: 0,
     transformValue: 0,
-    customViewHeight: 0,
     actionParams: {},
     hasCustomView: false,
   });
@@ -67,12 +62,14 @@ const ProviderComponent = ({
     state => {
       switch (state) {
         case CONTEXT_MENU_STATE.ACTIVE: {
-          if (onOpen) runOnJS(onOpen)();
-          break;
+          if (onOpen)
+            runOnJS(onOpen)();
+          break
         }
         case CONTEXT_MENU_STATE.END: {
-          if (onClose) runOnJS(onClose)();
-          break;
+          if (onClose)
+            runOnJS(onClose)();
+          break
         }
       }
     },

package/src/utils/calculations.ts

@@ -84,59 +84,6 @@ export const menuAnimationAnchor = (
   };
 };
 
-export const calculateDynamicTransformValue = (
-  itemY: number,
-  itemHeight: number,
-  menuHeight: number,
-  customViewHeight: number,
-  anchorPosition: TransformOriginAnchorPosition,
-  screenHeight: number,
-  safeAreaTop: number,
-  safeAreaBottom: number
-): number => {
-  'worklet';
-  const GAP = styleGuide.spacing;
-  const isAnchorTop = anchorPosition.includes('top');
-
-  if (isAnchorTop) {
-    // Menu below item, custom view above item
-    // Total space needed below item: itemHeight + gap + menuHeight + safeAreaBottom
-    // Total space needed above item: customViewHeight + gap + safeAreaTop
-    const bottomEdge = itemY + itemHeight + GAP + menuHeight + safeAreaBottom;
-    const topEdge = itemY - GAP - customViewHeight - safeAreaTop;
-
-    let tY = 0;
-
-    // If bottom overflows screen
-    if (bottomEdge > screenHeight) {
-      tY = screenHeight - bottomEdge;
-    }
-    // After shifting, check if custom view goes above safe area
-    if (topEdge + tY < 0) {
-      tY = -topEdge;
-    }
-    return tY;
-  } else {
-    // Menu above item, custom view below item
-    // Total space needed above item: menuHeight + gap + safeAreaTop
-    // Total space needed below item: itemHeight + gap + customViewHeight + safeAreaBottom
-    const topEdge = itemY - GAP - menuHeight - safeAreaTop;
-    const bottomEdge =
-      itemY + itemHeight + GAP + customViewHeight + safeAreaBottom;
-
-    let tY = 0;
-    // If top overflows screen (goes above safe area)
-    if (topEdge < 0) {
-      tY = -topEdge;
-    }
-    // After shifting, check if custom view goes below screen
-    if (bottomEdge + tY > screenHeight) {
-      tY = screenHeight - bottomEdge;
-    }
-    return tY;
-  }
-};
-
 export const getTransformOrigin = (
   posX: number,
   itemWidth: number,