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

package/lib/commonjs/components/backdrop/Backdrop.js

@@ -13,7 +13,7 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 
-var _expoBlur = require("expo-blur");
+var _blur = require("@react-native-community/blur");
 
 var _styles = require("./styles");
 
@@ -29,7 +29,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 // Components
 // Utils
-const AnimatedBlurView = _constants.IS_IOS ? _reactNativeReanimated.default.createAnimatedComponent(_expoBlur.BlurView) : _reactNativeReanimated.default.View;
+const AnimatedBlurView = _constants.IS_IOS ? _reactNativeReanimated.default.createAnimatedComponent(_blur.BlurView) : _reactNativeReanimated.default.View;
 
 const BackdropComponent = () => {
   const {
@@ -72,7 +72,7 @@ const BackdropComponent = () => {
   });
   const animatedContainerProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
     return {
-      intensity: (0, _reactNativeReanimated.withTiming)(state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? 100 : 0, {
+      blurAmount: (0, _reactNativeReanimated.withTiming)(state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? 100 : 0, {
         duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
       })
     };
@@ -88,6 +88,7 @@ const BackdropComponent = () => {
   }, /*#__PURE__*/_react.default.createElement(AnimatedBlurView // @ts-ignore
   , {
     tint: "default",
+    blurType: 'dark',
     animatedProps: animatedContainerProps,
     style: [_styles.styles.container, animatedContainerStyle]
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {

package/lib/commonjs/components/backdrop/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Backdrop.tsx"],"names":["AnimatedBlurView","IS_IOS","Animated","createAnimatedComponent","BlurView","View","BackdropComponent","state","theme","tapGestureEvent","onStart","event","context","startPosition","x","y","onCancel","value","CONTEXT_MENU_STATE","END","onEnd","distance","Math","hypot","shouldClose","isStateActive","ACTIVE","animatedContainerStyle","topValueAnimation","HOLD_ITEM_TRANSFORM_DURATION","WINDOW_HEIGHT","duration","opacityValueAnimation","top","opacity","animatedContainerProps","intensity","animatedInnerContainerStyle","backgroundColor","BACKDROP_LIGHT_BACKGROUND_COLOR","BACKDROP_DARK_BACKGROUND_COLOR","styles","container","StyleSheet","absoluteFillObject","Backdrop"],"mappings":"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","sourcesContent":["import React, { memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n  useAnimatedGestureHandler,\n  useAnimatedProps,\n  useAnimatedStyle,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  TapGestureHandler,\n  TapGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\n\n// Components\nimport { BlurView } from 'expo-blur';\n\n// Utils\nimport { styles } from './styles';\nimport {\n  CONTEXT_MENU_STATE,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  IS_IOS,\n  WINDOW_HEIGHT,\n} from '../../constants';\nimport {\n  BACKDROP_LIGHT_BACKGROUND_COLOR,\n  BACKDROP_DARK_BACKGROUND_COLOR,\n} from './constants';\nimport { useInternal } from '../../hooks';\n\nconst AnimatedBlurView = IS_IOS\n  ? Animated.createAnimatedComponent(BlurView)\n  : Animated.View;\n\ntype Context = {\n  startPosition: {\n    x: number;\n    y: number;\n  };\n};\n\nconst BackdropComponent = () => {\n  const { state, theme } = useInternal();\n\n  const tapGestureEvent = useAnimatedGestureHandler<\n    TapGestureHandlerGestureEvent,\n    Context\n  >(\n    {\n      onStart: (event, context) => {\n        context.startPosition = { x: event.x, y: event.y };\n      },\n      onCancel: () => {\n        state.value = CONTEXT_MENU_STATE.END;\n      },\n      onEnd: (event, context) => {\n        const distance = Math.hypot(\n          event.x - context.startPosition.x,\n          event.y - context.startPosition.y\n        );\n        const shouldClose = distance < 10;\n        const isStateActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n        if (shouldClose && isStateActive) {\n          state.value = CONTEXT_MENU_STATE.END;\n        }\n      },\n    },\n    [state]\n  );\n\n  const animatedContainerStyle = useAnimatedStyle(() => {\n    const topValueAnimation = () =>\n      state.value === CONTEXT_MENU_STATE.ACTIVE\n        ? 0\n        : withDelay(\n            HOLD_ITEM_TRANSFORM_DURATION,\n            withTiming(WINDOW_HEIGHT, {\n              duration: 0,\n            })\n          );\n\n    const opacityValueAnimation = () =>\n      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      });\n\n    return {\n      top: topValueAnimation(),\n      opacity: opacityValueAnimation(),\n    };\n  });\n\n  const animatedContainerProps = useAnimatedProps(() => {\n    return {\n      intensity: withTiming(\n        state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0,\n        {\n          duration: HOLD_ITEM_TRANSFORM_DURATION,\n        }\n      ),\n    };\n  });\n\n  const animatedInnerContainerStyle = useAnimatedStyle(() => {\n    const backgroundColor =\n      theme.value === 'light'\n        ? BACKDROP_LIGHT_BACKGROUND_COLOR\n        : BACKDROP_DARK_BACKGROUND_COLOR;\n\n    return { backgroundColor };\n  }, [theme]);\n\n  return (\n    <TapGestureHandler onHandlerStateChange={tapGestureEvent}>\n      <AnimatedBlurView\n        // @ts-ignore\n        tint=\"default\"\n        animatedProps={animatedContainerProps}\n        style={[styles.container, animatedContainerStyle]}\n      >\n        <Animated.View\n          style={[\n            { ...StyleSheet.absoluteFillObject },\n            animatedInnerContainerStyle,\n          ]}\n        />\n      </AnimatedBlurView>\n    </TapGestureHandler>\n  );\n};\n\nconst Backdrop = memo(BackdropComponent);\n\nexport default Backdrop;\n"]}
+{"version":3,"sources":["Backdrop.tsx"],"names":["AnimatedBlurView","IS_IOS","Animated","createAnimatedComponent","BlurView","View","BackdropComponent","state","theme","tapGestureEvent","onStart","event","context","startPosition","x","y","onCancel","value","CONTEXT_MENU_STATE","END","onEnd","distance","Math","hypot","shouldClose","isStateActive","ACTIVE","animatedContainerStyle","topValueAnimation","HOLD_ITEM_TRANSFORM_DURATION","WINDOW_HEIGHT","duration","opacityValueAnimation","top","opacity","animatedContainerProps","blurAmount","animatedInnerContainerStyle","backgroundColor","BACKDROP_LIGHT_BACKGROUND_COLOR","BACKDROP_DARK_BACKGROUND_COLOR","styles","container","StyleSheet","absoluteFillObject","Backdrop"],"mappings":"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","sourcesContent":["import React, { memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n  useAnimatedGestureHandler,\n  useAnimatedProps,\n  useAnimatedStyle,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  TapGestureHandler,\n  TapGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\n\n// Components\nimport { BlurView } from '@react-native-community/blur';\n\n// Utils\nimport { styles } from './styles';\nimport {\n  CONTEXT_MENU_STATE,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  IS_IOS,\n  WINDOW_HEIGHT,\n} from '../../constants';\nimport {\n  BACKDROP_LIGHT_BACKGROUND_COLOR,\n  BACKDROP_DARK_BACKGROUND_COLOR,\n} from './constants';\nimport { useInternal } from '../../hooks';\n\nconst AnimatedBlurView = IS_IOS\n  ? Animated.createAnimatedComponent(BlurView)\n  : Animated.View;\n\ntype Context = {\n  startPosition: {\n    x: number;\n    y: number;\n  };\n};\n\nconst BackdropComponent = () => {\n  const { state, theme } = useInternal();\n\n  const tapGestureEvent = useAnimatedGestureHandler<\n    TapGestureHandlerGestureEvent,\n    Context\n  >(\n    {\n      onStart: (event, context) => {\n        context.startPosition = { x: event.x, y: event.y };\n      },\n      onCancel: () => {\n        state.value = CONTEXT_MENU_STATE.END;\n      },\n      onEnd: (event, context) => {\n        const distance = Math.hypot(\n          event.x - context.startPosition.x,\n          event.y - context.startPosition.y\n        );\n        const shouldClose = distance < 10;\n        const isStateActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n        if (shouldClose && isStateActive) {\n          state.value = CONTEXT_MENU_STATE.END;\n        }\n      },\n    },\n    [state]\n  );\n\n  const animatedContainerStyle = useAnimatedStyle(() => {\n    const topValueAnimation = () =>\n      state.value === CONTEXT_MENU_STATE.ACTIVE\n        ? 0\n        : withDelay(\n            HOLD_ITEM_TRANSFORM_DURATION,\n            withTiming(WINDOW_HEIGHT, {\n              duration: 0,\n            })\n          );\n\n    const opacityValueAnimation = () =>\n      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      });\n\n    return {\n      top: topValueAnimation(),\n      opacity: opacityValueAnimation(),\n    };\n  });\n\n  const animatedContainerProps = useAnimatedProps(() => {\n    return {\n      blurAmount: withTiming(\n        state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0,\n        {\n          duration: HOLD_ITEM_TRANSFORM_DURATION,\n        }\n      ),\n    };\n  });\n\n  const animatedInnerContainerStyle = useAnimatedStyle(() => {\n    const backgroundColor =\n      theme.value === 'light'\n        ? BACKDROP_LIGHT_BACKGROUND_COLOR\n        : BACKDROP_DARK_BACKGROUND_COLOR;\n\n    return { backgroundColor };\n  }, [theme]);\n\n  return (\n    <TapGestureHandler onHandlerStateChange={tapGestureEvent}>\n      <AnimatedBlurView\n        // @ts-ignore\n        tint=\"default\"\n        blurType={'dark'}\n        animatedProps={animatedContainerProps}\n        style={[styles.container, animatedContainerStyle]}\n      >\n        <Animated.View\n          style={[\n            { ...StyleSheet.absoluteFillObject },\n            animatedInnerContainerStyle,\n          ]}\n        />\n      </AnimatedBlurView>\n    </TapGestureHandler>\n  );\n};\n\nconst Backdrop = memo(BackdropComponent);\n\nexport default Backdrop;\n"]}

package/lib/commonjs/components/customView/CustomView.js

@@ -21,6 +21,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const SCREEN_PADDING = 16;
+
 const CustomViewComponent = () => {
   const {
     state,
@@ -29,9 +31,8 @@ const CustomViewComponent = () => {
     safeAreaInsets
   } = (0, _hooks.useInternal)();
   const [renderFn, setRenderFn] = (0, _react.useState)(null);
-  const [customViewHeight, setCustomViewHeight] = (0, _react.useState)(0);
-  const [customViewWidth, setCustomViewWidth] = (0, _react.useState)(0);
-  const isActive = (0, _reactNativeReanimated.useSharedValue)(false);
+  const cvHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+  const cvWidth = (0, _reactNativeReanimated.useSharedValue)(0);
   const closeMenu = (0, _react.useCallback)(() => {
     state.value = _constants.CONTEXT_MENU_STATE.END;
   }, [state]);
@@ -40,22 +41,22 @@ const CustomViewComponent = () => {
       height,
       width
     } = event.nativeEvent.layout;
-    setCustomViewHeight(height);
-    setCustomViewWidth(width);
+    cvHeight.value = height;
+    cvWidth.value = width;
     menuProps.value = { ...menuProps.value,
       customViewHeight: height
     };
-  }, [menuProps]);
+  }, [menuProps, cvHeight, cvWidth]);
   const clearRenderFn = (0, _react.useCallback)(() => {
     setRenderFn(null);
-    setCustomViewHeight(0);
-    setCustomViewWidth(0);
+    cvHeight.value = 0;
+    cvWidth.value = 0;
     menuProps.value = { ...menuProps.value,
       customViewHeight: 0
     };
-  }, [menuProps]);
-  const updateRenderFn = (0, _react.useCallback)(hasCustomView => {
-    if (hasCustomView && customViewRef.current) {
+  }, [menuProps, cvHeight, cvWidth]);
+  const updateRenderFn = (0, _react.useCallback)(shouldShow => {
+    if (shouldShow && customViewRef.current) {
       setRenderFn(() => customViewRef.current);
     } else {
       setTimeout(clearRenderFn, _constants.HOLD_ITEM_TRANSFORM_DURATION);
@@ -69,71 +70,61 @@ const CustomViewComponent = () => {
     hasCustomView
   }) => {
     if (currentState === _constants.CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {
-      isActive.value = true;
       (0, _reactNativeReanimated.runOnJS)(updateRenderFn)(true);
     } else if (currentState === _constants.CONTEXT_MENU_STATE.END) {
-      isActive.value = false;
       (0, _reactNativeReanimated.runOnJS)(updateRenderFn)(false);
     }
-  }, [state, menuProps]); // Visibility style: depends ONLY on isActive, won't re-trigger on menuProps changes
-
+  }, [state, menuProps]);
   const visibilityStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const active = state.value === _constants.CONTEXT_MENU_STATE.ACTIVE && menuProps.value.hasCustomView;
     return {
-      opacity: (0, _reactNativeReanimated.withTiming)(isActive.value ? 1 : 0, {
+      opacity: (0, _reactNativeReanimated.withTiming)(active ? 1 : 0, {
         duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
       }),
       transform: [{
-        scale: isActive.value ? (0, _reactNativeReanimated.withSpring)(1, _constants.SPRING_CONFIGURATION_MENU) : (0, _reactNativeReanimated.withTiming)(0, {
+        scale: active ? (0, _reactNativeReanimated.withSpring)(1, _constants.SPRING_CONFIGURATION_MENU) : (0, _reactNativeReanimated.withTiming)(0, {
           duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
         })
       }]
     };
-  }, [isActive]); // Positioning style: depends on menuProps and customViewHeight
-
+  });
   const wrapperStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
-    const isAbove = anchorPositionVertical === 'top'; // Fixed anchor point: top of the item
-
+    const isAbove = anchorPositionVertical === 'top';
     const top = menuProps.value.itemY;
-    const SCREEN_PADDING = 16;
-    const MAX_WIDTH = _constants.WINDOW_WIDTH - SCREEN_PADDING * 2; // Start at item's left edge
+    const MAX_WIDTH = _constants.WINDOW_WIDTH - SCREEN_PADDING * 2;
+    let left = menuProps.value.itemX;
+    const w = cvWidth.value;
 
-    let left = menuProps.value.itemX; // If the view overflows the right edge, shift left
-
-    if (customViewWidth > 0 && left + customViewWidth > _constants.WINDOW_WIDTH - SCREEN_PADDING) {
-      left = Math.max(SCREEN_PADDING, _constants.WINDOW_WIDTH - customViewWidth - SCREEN_PADDING);
+    if (w > 0 && left + w > _constants.WINDOW_WIDTH - SCREEN_PADDING) {
+      left = Math.max(SCREEN_PADDING, _constants.WINDOW_WIDTH - w - SCREEN_PADDING);
     }
 
     if (left < SCREEN_PADDING) {
       left = SCREEN_PADDING;
     }
 
-    const tY = (0, _calculations.calculateDynamicTransformValue)(menuProps.value.itemY, menuProps.value.itemHeight, menuProps.value.menuHeight, menuProps.value.customViewHeight, menuProps.value.anchorPosition, _constants.WINDOW_HEIGHT, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) || 0, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) || 0); // 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 h = cvHeight.value;
+    const tY = (0, _calculations.calculateDynamicTransformValue)(menuProps.value.itemY, menuProps.value.itemHeight, menuProps.value.menuHeight, h, menuProps.value.anchorPosition, _constants.WINDOW_HEIGHT, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) || 0, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) || 0);
+    const positionOffsetY = isAbove ? -(h + 8) : menuProps.value.itemHeight + 8;
     return {
       top,
       left,
       maxWidth: MAX_WIDTH,
-      transform: [// 1. Transform value (screen boundary compensation)
-      {
+      transform: [{
         translateY: (0, _reactNativeReanimated.withSpring)(tY, _constants.SPRING_CONFIGURATION)
-      }, // 2. Position offset (animated when customViewHeight changes)
-      {
+      }, {
         translateY: (0, _reactNativeReanimated.withSpring)(positionOffsetY, _constants.SPRING_CONFIGURATION_MENU)
       }]
     };
-  }, [menuProps, customViewHeight, customViewWidth]);
-  if (!renderFn) return null;
+  });
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: [styles.customViewWrapper, wrapperStyles]
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: visibilityStyles
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     onLayout: onLayout
-  }, renderFn({
+  }, renderFn === null || renderFn === void 0 ? void 0 : renderFn({
     closeMenu
   }))));
 };
@@ -141,7 +132,8 @@ const CustomViewComponent = () => {
 const styles = _reactNative.StyleSheet.create({
   customViewWrapper: {
     position: 'absolute',
-    zIndex: 20
+    zIndex: 20,
+    pointerEvents: 'box-none'
   }
 });
 

package/lib/commonjs/components/customView/CustomView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CustomView.tsx"],"names":["CustomViewComponent","state","menuProps","customViewRef","safeAreaInsets","renderFn","setRenderFn","customViewHeight","setCustomViewHeight","customViewWidth","setCustomViewWidth","isActive","closeMenu","value","CONTEXT_MENU_STATE","END","onLayout","event","height","width","nativeEvent","layout","clearRenderFn","updateRenderFn","hasCustomView","current","setTimeout","HOLD_ITEM_TRANSFORM_DURATION","currentState","ACTIVE","visibilityStyles","opacity","duration","transform","scale","SPRING_CONFIGURATION_MENU","wrapperStyles","anchorPositionVertical","anchorPosition","split","isAbove","top","itemY","SCREEN_PADDING","MAX_WIDTH","WINDOW_WIDTH","left","itemX","Math","max","tY","itemHeight","menuHeight","WINDOW_HEIGHT","bottom","positionOffsetY","maxWidth","translateY","SPRING_CONFIGURATION","styles","customViewWrapper","StyleSheet","create","position","zIndex","CustomView","React","memo"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { useInternal } from '../../hooks';\nimport {\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n  SPRING_CONFIGURATION,\n  SPRING_CONFIGURATION_MENU,\n  WINDOW_WIDTH,\n  WINDOW_HEIGHT,\n} from '../../constants';\nimport { RenderCustomView } from '../menu/types';\nimport { calculateDynamicTransformValue } from '../../utils/calculations';\n\nconst CustomViewComponent = () => {\n  const { state, menuProps, customViewRef, safeAreaInsets } = useInternal();\n\n  const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);\n  const [customViewHeight, setCustomViewHeight] = useState(0);\n  const [customViewWidth, setCustomViewWidth] = useState(0);\n\n  const isActive = useSharedValue(false);\n\n  const closeMenu = useCallback(() => {\n    state.value = CONTEXT_MENU_STATE.END;\n  }, [state]);\n\n  const onLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      const { height, width } = event.nativeEvent.layout;\n      setCustomViewHeight(height);\n      setCustomViewWidth(width);\n      menuProps.value = { ...menuProps.value, customViewHeight: height };\n    },\n    [menuProps]\n  );\n\n  const clearRenderFn = useCallback(() => {\n    setRenderFn(null);\n    setCustomViewHeight(0);\n    setCustomViewWidth(0);\n    menuProps.value = { ...menuProps.value, customViewHeight: 0 };\n  }, [menuProps]);\n\n  const updateRenderFn = useCallback(\n    (hasCustomView: boolean) => {\n      if (hasCustomView && customViewRef.current) {\n        setRenderFn(() => customViewRef.current);\n      } else {\n        setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);\n      }\n    },\n    [customViewRef, clearRenderFn]\n  );\n\n  useAnimatedReaction(\n    () => ({\n      currentState: state.value,\n      hasCustomView: menuProps.value.hasCustomView,\n    }),\n    ({ currentState, hasCustomView }) => {\n      if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {\n        isActive.value = true;\n        runOnJS(updateRenderFn)(true);\n      } else if (currentState === CONTEXT_MENU_STATE.END) {\n        isActive.value = false;\n        runOnJS(updateRenderFn)(false);\n      }\n    },\n    [state, menuProps]\n  );\n\n  // Visibility style: depends ONLY on isActive, won't re-trigger on menuProps changes\n  const visibilityStyles = useAnimatedStyle(() => {\n    return {\n      opacity: withTiming(isActive.value ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      }),\n      transform: [\n        {\n          scale: isActive.value\n            ? withSpring(1, SPRING_CONFIGURATION_MENU)\n            : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),\n        },\n      ],\n    };\n  }, [isActive]);\n\n  // Positioning style: depends on menuProps and customViewHeight\n  const wrapperStyles = useAnimatedStyle(() => {\n    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n    const isAbove = anchorPositionVertical === 'top';\n\n    // Fixed anchor point: top of the item\n    const top = menuProps.value.itemY;\n\n    const SCREEN_PADDING = 16;\n    const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2;\n\n    // Start at item's left edge\n    let left = menuProps.value.itemX;\n\n    // If the view overflows the right edge, shift left\n    if (\n      customViewWidth > 0 &&\n      left + customViewWidth > WINDOW_WIDTH - SCREEN_PADDING\n    ) {\n      left = Math.max(\n        SCREEN_PADDING,\n        WINDOW_WIDTH - customViewWidth - SCREEN_PADDING\n      );\n    }\n    if (left < SCREEN_PADDING) {\n      left = SCREEN_PADDING;\n    }\n    const tY = calculateDynamicTransformValue(\n      menuProps.value.itemY,\n      menuProps.value.itemHeight,\n      menuProps.value.menuHeight,\n      menuProps.value.customViewHeight,\n      menuProps.value.anchorPosition,\n      WINDOW_HEIGHT,\n      safeAreaInsets?.top || 0,\n      safeAreaInsets?.bottom || 0\n    );\n\n    // Positional offset via translateY:\n    // above item: shift up by customViewHeight + gap\n    // below item: shift down by itemHeight + gap\n    const positionOffsetY = isAbove\n      ? -(customViewHeight + 8)\n      : menuProps.value.itemHeight + 8;\n\n    return {\n      top,\n      left,\n      maxWidth: MAX_WIDTH,\n      transform: [\n        // 1. Transform value (screen boundary compensation)\n        { translateY: withSpring(tY, SPRING_CONFIGURATION) },\n        // 2. Position offset (animated when customViewHeight changes)\n        { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },\n      ],\n    };\n  }, [menuProps, customViewHeight, customViewWidth]);\n\n  if (!renderFn) return null;\n\n  return (\n    <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>\n      <Animated.View style={visibilityStyles}>\n        <Animated.View onLayout={onLayout}>\n          {renderFn({ closeMenu })}\n        </Animated.View>\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  customViewWrapper: {\n    position: 'absolute',\n    zIndex: 20,\n  },\n});\n\nconst CustomView = React.memo(CustomViewComponent);\n\nexport default CustomView;\n"]}
+{"version":3,"sources":["CustomView.tsx"],"names":["SCREEN_PADDING","CustomViewComponent","state","menuProps","customViewRef","safeAreaInsets","renderFn","setRenderFn","cvHeight","cvWidth","closeMenu","value","CONTEXT_MENU_STATE","END","onLayout","event","height","width","nativeEvent","layout","customViewHeight","clearRenderFn","updateRenderFn","shouldShow","current","setTimeout","HOLD_ITEM_TRANSFORM_DURATION","currentState","hasCustomView","ACTIVE","visibilityStyles","active","opacity","duration","transform","scale","SPRING_CONFIGURATION_MENU","wrapperStyles","anchorPositionVertical","anchorPosition","split","isAbove","top","itemY","MAX_WIDTH","WINDOW_WIDTH","left","itemX","w","Math","max","h","tY","itemHeight","menuHeight","WINDOW_HEIGHT","bottom","positionOffsetY","maxWidth","translateY","SPRING_CONFIGURATION","styles","customViewWrapper","StyleSheet","create","position","zIndex","pointerEvents","CustomView","React","memo"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { useInternal } from '../../hooks';\nimport {\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n  SPRING_CONFIGURATION,\n  SPRING_CONFIGURATION_MENU,\n  WINDOW_WIDTH,\n  WINDOW_HEIGHT,\n} from '../../constants';\nimport { RenderCustomView } from '../menu/types';\nimport { calculateDynamicTransformValue } from '../../utils/calculations';\n\nconst SCREEN_PADDING = 16;\n\nconst CustomViewComponent = () => {\n  const { state, menuProps, customViewRef, safeAreaInsets } = useInternal();\n\n  const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);\n\n  const cvHeight = useSharedValue(0);\n  const cvWidth = useSharedValue(0);\n\n  const closeMenu = useCallback(() => {\n    state.value = CONTEXT_MENU_STATE.END;\n  }, [state]);\n\n  const onLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      const { height, width } = event.nativeEvent.layout;\n      cvHeight.value = height;\n      cvWidth.value = width;\n      menuProps.value = { ...menuProps.value, customViewHeight: height };\n    },\n    [menuProps, cvHeight, cvWidth]\n  );\n\n  const clearRenderFn = useCallback(() => {\n    setRenderFn(null);\n    cvHeight.value = 0;\n    cvWidth.value = 0;\n    menuProps.value = { ...menuProps.value, customViewHeight: 0 };\n  }, [menuProps, cvHeight, cvWidth]);\n\n  const updateRenderFn = useCallback(\n    (shouldShow: boolean) => {\n      if (shouldShow && customViewRef.current) {\n        setRenderFn(() => customViewRef.current);\n      } else {\n        setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);\n      }\n    },\n    [customViewRef, clearRenderFn]\n  );\n\n  useAnimatedReaction(\n    () => ({\n      currentState: state.value,\n      hasCustomView: menuProps.value.hasCustomView,\n    }),\n    ({ currentState, hasCustomView }) => {\n      if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {\n        runOnJS(updateRenderFn)(true);\n      } else if (currentState === CONTEXT_MENU_STATE.END) {\n        runOnJS(updateRenderFn)(false);\n      }\n    },\n    [state, menuProps]\n  );\n\n  const visibilityStyles = useAnimatedStyle(() => {\n    const active =\n      state.value === CONTEXT_MENU_STATE.ACTIVE &&\n      menuProps.value.hasCustomView;\n    return {\n      opacity: withTiming(active ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      }),\n      transform: [\n        {\n          scale: active\n            ? withSpring(1, SPRING_CONFIGURATION_MENU)\n            : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),\n        },\n      ],\n    };\n  });\n\n  const wrapperStyles = useAnimatedStyle(() => {\n    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n    const isAbove = anchorPositionVertical === 'top';\n\n    const top = menuProps.value.itemY;\n    const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2;\n\n    let left = menuProps.value.itemX;\n    const w = cvWidth.value;\n    if (w > 0 && left + w > WINDOW_WIDTH - SCREEN_PADDING) {\n      left = Math.max(SCREEN_PADDING, WINDOW_WIDTH - w - SCREEN_PADDING);\n    }\n    if (left < SCREEN_PADDING) {\n      left = SCREEN_PADDING;\n    }\n\n    const h = cvHeight.value;\n    const tY = calculateDynamicTransformValue(\n      menuProps.value.itemY,\n      menuProps.value.itemHeight,\n      menuProps.value.menuHeight,\n      h,\n      menuProps.value.anchorPosition,\n      WINDOW_HEIGHT,\n      safeAreaInsets?.top || 0,\n      safeAreaInsets?.bottom || 0\n    );\n\n    const positionOffsetY = isAbove ? -(h + 8) : menuProps.value.itemHeight + 8;\n\n    return {\n      top,\n      left,\n      maxWidth: MAX_WIDTH,\n      transform: [\n        { translateY: withSpring(tY, SPRING_CONFIGURATION) },\n        { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },\n      ],\n    };\n  });\n\n  return (\n    <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>\n      <Animated.View style={visibilityStyles}>\n        <Animated.View onLayout={onLayout}>\n          {renderFn?.({ closeMenu })}\n        </Animated.View>\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  customViewWrapper: {\n    position: 'absolute',\n    zIndex: 20,\n    pointerEvents: 'box-none',\n  },\n});\n\nconst CustomView = React.memo(CustomViewComponent);\n\nexport default CustomView;\n"]}

package/lib/commonjs/components/menu/MenuList.js

@@ -93,7 +93,6 @@ const MenuListComponent = () => {
       (0, _reactNativeReanimated.runOnJS)(setter)(_items);
     }
   }, [menuProps]);
-  if (itemList.length === 0) return null;
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: [_styles.default.menuContainer, messageStyles]
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {

package/lib/commonjs/components/menu/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuList.tsx"],"names":["MenuListComponent","state","theme","menuProps","itemList","setItemList","React","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","CONTEXT_MENU_STATE","ACTIVE","SPRING_CONFIGURATION_MENU","duration","HOLD_ITEM_TRANSFORM_DURATION","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","color","backgroundColor","setter","_items","styles","menuContainer","StyleSheet","absoluteFillObject","menuInnerContainer","MenuList","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport {\n  calculateMenuHeight,\n  menuAnimationAnchor,\n} from '../../utils/calculations';\n\nimport MenuItems from './MenuItems';\n\nimport {\n  SPRING_CONFIGURATION_MENU,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n} from '../../constants';\n\nimport styles from './styles';\nimport { MenuItemProps } from './types';\nimport { useInternal } from '../../hooks';\nimport { deepEqual } from '../../utils/validations';\nimport { leftOrRight } from './calculations';\n\nconst MenuListComponent = () => {\n  const { state, theme, menuProps } = useInternal();\n\n  const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);\n\n  const menuHeight = useDerivedValue(() => {\n    const itemsWithSeparator = menuProps.value.items.filter(\n      item => item.withSeparator\n    );\n    return calculateMenuHeight(\n      menuProps.value.items.length,\n      itemsWithSeparator.length\n    );\n  }, [menuProps]);\n  const prevList = useSharedValue<MenuItemProps[]>([]);\n\n  const messageStyles = useAnimatedStyle(() => {\n    const itemsWithSeparator = menuProps.value.items.filter(\n      item => item.withSeparator\n    );\n\n    const translate = menuAnimationAnchor(\n      menuProps.value.anchorPosition,\n      menuProps.value.itemWidth,\n      menuProps.value.items.length,\n      itemsWithSeparator.length\n    );\n\n    const _leftPosition = leftOrRight(menuProps);\n\n    const menuScaleAnimation = () =>\n      state.value === CONTEXT_MENU_STATE.ACTIVE\n        ? withSpring(1, SPRING_CONFIGURATION_MENU)\n        : withTiming(0, {\n            duration: HOLD_ITEM_TRANSFORM_DURATION,\n          });\n\n    const opacityAnimation = () =>\n      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      });\n\n    return {\n      left: _leftPosition,\n      height: menuHeight.value,\n      opacity: opacityAnimation(),\n      transform: [\n        { translateX: translate.beginningTransformations.translateX },\n        { translateY: translate.beginningTransformations.translateY },\n        {\n          scale: menuScaleAnimation(),\n        },\n        { translateX: translate.endingTransformations.translateX },\n        { translateY: translate.endingTransformations.translateY },\n      ],\n    };\n  });\n\n  const animatedInnerContainerStyle = useAnimatedStyle(() => {\n    const color = theme.value === 'light' ? '#fff' : '#1A1A1A';\n    return {\n      backgroundColor: color,\n    };\n  }, [theme]);\n\n  const setter = (items: MenuItemProps[]) => {\n    setItemList(items);\n    prevList.value = items;\n  };\n\n  useAnimatedReaction(\n    () => menuProps.value.items,\n    _items => {\n      if (!deepEqual(_items, prevList.value)) {\n        runOnJS(setter)(_items);\n      }\n    },\n    [menuProps]\n  );\n\n  if (itemList.length === 0) return null;\n\n  return (\n    <Animated.View style={[styles.menuContainer, messageStyles]}>\n      <Animated.View\n        style={[\n          StyleSheet.absoluteFillObject,\n          styles.menuInnerContainer,\n          animatedInnerContainerStyle,\n        ]}\n      >\n        <MenuItems items={itemList} />\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nconst MenuList = React.memo(MenuListComponent);\n\nexport default MenuList;\n"]}
+{"version":3,"sources":["MenuList.tsx"],"names":["MenuListComponent","state","theme","menuProps","itemList","setItemList","React","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","CONTEXT_MENU_STATE","ACTIVE","SPRING_CONFIGURATION_MENU","duration","HOLD_ITEM_TRANSFORM_DURATION","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","color","backgroundColor","setter","_items","styles","menuContainer","StyleSheet","absoluteFillObject","menuInnerContainer","MenuList","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport {\n  calculateMenuHeight,\n  menuAnimationAnchor,\n} from '../../utils/calculations';\n\nimport MenuItems from './MenuItems';\n\nimport {\n  SPRING_CONFIGURATION_MENU,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n} from '../../constants';\n\nimport styles from './styles';\nimport { MenuItemProps } from './types';\nimport { useInternal } from '../../hooks';\nimport { deepEqual } from '../../utils/validations';\nimport { leftOrRight } from './calculations';\n\nconst MenuListComponent = () => {\n  const { state, theme, menuProps } = useInternal();\n\n  const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);\n\n  const menuHeight = useDerivedValue(() => {\n    const itemsWithSeparator = menuProps.value.items.filter(\n      item => item.withSeparator\n    );\n    return calculateMenuHeight(\n      menuProps.value.items.length,\n      itemsWithSeparator.length\n    );\n  }, [menuProps]);\n  const prevList = useSharedValue<MenuItemProps[]>([]);\n\n  const messageStyles = useAnimatedStyle(() => {\n    const itemsWithSeparator = menuProps.value.items.filter(\n      item => item.withSeparator\n    );\n\n    const translate = menuAnimationAnchor(\n      menuProps.value.anchorPosition,\n      menuProps.value.itemWidth,\n      menuProps.value.items.length,\n      itemsWithSeparator.length\n    );\n\n    const _leftPosition = leftOrRight(menuProps);\n\n    const menuScaleAnimation = () =>\n      state.value === CONTEXT_MENU_STATE.ACTIVE\n        ? withSpring(1, SPRING_CONFIGURATION_MENU)\n        : withTiming(0, {\n            duration: HOLD_ITEM_TRANSFORM_DURATION,\n          });\n\n    const opacityAnimation = () =>\n      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      });\n\n    return {\n      left: _leftPosition,\n      height: menuHeight.value,\n      opacity: opacityAnimation(),\n      transform: [\n        { translateX: translate.beginningTransformations.translateX },\n        { translateY: translate.beginningTransformations.translateY },\n        {\n          scale: menuScaleAnimation(),\n        },\n        { translateX: translate.endingTransformations.translateX },\n        { translateY: translate.endingTransformations.translateY },\n      ],\n    };\n  });\n\n  const animatedInnerContainerStyle = useAnimatedStyle(() => {\n    const color = theme.value === 'light' ? '#fff' : '#1A1A1A';\n    return {\n      backgroundColor: color,\n    };\n  }, [theme]);\n\n  const setter = (items: MenuItemProps[]) => {\n    setItemList(items);\n    prevList.value = items;\n  };\n\n  useAnimatedReaction(\n    () => menuProps.value.items,\n    _items => {\n      if (!deepEqual(_items, prevList.value)) {\n        runOnJS(setter)(_items);\n      }\n    },\n    [menuProps]\n  );\n\n  return (\n    <Animated.View style={[styles.menuContainer, messageStyles]}>\n      <Animated.View\n        style={[\n          StyleSheet.absoluteFillObject,\n          styles.menuInnerContainer,\n          animatedInnerContainerStyle,\n        ]}\n      >\n        <MenuItems items={itemList} />\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nconst MenuList = React.memo(MenuListComponent);\n\nexport default MenuList;\n"]}

package/lib/module/components/backdrop/Backdrop.js

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import Animated, { useAnimatedGestureHandler, useAnimatedProps, useAnimatedStyle, withDelay, withTiming } from 'react-native-reanimated';
 import { TapGestureHandler } from 'react-native-gesture-handler'; // Components
 
-import { BlurView } from 'expo-blur'; // Utils
+import { BlurView } from '@react-native-community/blur'; // Utils
 
 import { styles } from './styles';
 import { CONTEXT_MENU_STATE, HOLD_ITEM_TRANSFORM_DURATION, IS_IOS, WINDOW_HEIGHT } from '../../constants';
@@ -52,7 +52,7 @@ const BackdropComponent = () => {
   });
   const animatedContainerProps = useAnimatedProps(() => {
     return {
-      intensity: withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0, {
+      blurAmount: withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0, {
         duration: HOLD_ITEM_TRANSFORM_DURATION
       })
     };
@@ -68,6 +68,7 @@ const BackdropComponent = () => {
   }, /*#__PURE__*/React.createElement(AnimatedBlurView // @ts-ignore
   , {
     tint: "default",
+    blurType: 'dark',
     animatedProps: animatedContainerProps,
     style: [styles.container, animatedContainerStyle]
   }, /*#__PURE__*/React.createElement(Animated.View, {

package/lib/module/components/backdrop/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Backdrop.tsx"],"names":["React","memo","StyleSheet","Animated","useAnimatedGestureHandler","useAnimatedProps","useAnimatedStyle","withDelay","withTiming","TapGestureHandler","BlurView","styles","CONTEXT_MENU_STATE","HOLD_ITEM_TRANSFORM_DURATION","IS_IOS","WINDOW_HEIGHT","BACKDROP_LIGHT_BACKGROUND_COLOR","BACKDROP_DARK_BACKGROUND_COLOR","useInternal","AnimatedBlurView","createAnimatedComponent","View","BackdropComponent","state","theme","tapGestureEvent","onStart","event","context","startPosition","x","y","onCancel","value","END","onEnd","distance","Math","hypot","shouldClose","isStateActive","ACTIVE","animatedContainerStyle","topValueAnimation","duration","opacityValueAnimation","top","opacity","animatedContainerProps","intensity","animatedInnerContainerStyle","backgroundColor","container","absoluteFillObject","Backdrop"],"mappings":"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","sourcesContent":["import React, { memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n  useAnimatedGestureHandler,\n  useAnimatedProps,\n  useAnimatedStyle,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  TapGestureHandler,\n  TapGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\n\n// Components\nimport { BlurView } from 'expo-blur';\n\n// Utils\nimport { styles } from './styles';\nimport {\n  CONTEXT_MENU_STATE,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  IS_IOS,\n  WINDOW_HEIGHT,\n} from '../../constants';\nimport {\n  BACKDROP_LIGHT_BACKGROUND_COLOR,\n  BACKDROP_DARK_BACKGROUND_COLOR,\n} from './constants';\nimport { useInternal } from '../../hooks';\n\nconst AnimatedBlurView = IS_IOS\n  ? Animated.createAnimatedComponent(BlurView)\n  : Animated.View;\n\ntype Context = {\n  startPosition: {\n    x: number;\n    y: number;\n  };\n};\n\nconst BackdropComponent = () => {\n  const { state, theme } = useInternal();\n\n  const tapGestureEvent = useAnimatedGestureHandler<\n    TapGestureHandlerGestureEvent,\n    Context\n  >(\n    {\n      onStart: (event, context) => {\n        context.startPosition = { x: event.x, y: event.y };\n      },\n      onCancel: () => {\n        state.value = CONTEXT_MENU_STATE.END;\n      },\n      onEnd: (event, context) => {\n        const distance = Math.hypot(\n          event.x - context.startPosition.x,\n          event.y - context.startPosition.y\n        );\n        const shouldClose = distance < 10;\n        const isStateActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n        if (shouldClose && isStateActive) {\n          state.value = CONTEXT_MENU_STATE.END;\n        }\n      },\n    },\n    [state]\n  );\n\n  const animatedContainerStyle = useAnimatedStyle(() => {\n    const topValueAnimation = () =>\n      state.value === CONTEXT_MENU_STATE.ACTIVE\n        ? 0\n        : withDelay(\n            HOLD_ITEM_TRANSFORM_DURATION,\n            withTiming(WINDOW_HEIGHT, {\n              duration: 0,\n            })\n          );\n\n    const opacityValueAnimation = () =>\n      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      });\n\n    return {\n      top: topValueAnimation(),\n      opacity: opacityValueAnimation(),\n    };\n  });\n\n  const animatedContainerProps = useAnimatedProps(() => {\n    return {\n      intensity: withTiming(\n        state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0,\n        {\n          duration: HOLD_ITEM_TRANSFORM_DURATION,\n        }\n      ),\n    };\n  });\n\n  const animatedInnerContainerStyle = useAnimatedStyle(() => {\n    const backgroundColor =\n      theme.value === 'light'\n        ? BACKDROP_LIGHT_BACKGROUND_COLOR\n        : BACKDROP_DARK_BACKGROUND_COLOR;\n\n    return { backgroundColor };\n  }, [theme]);\n\n  return (\n    <TapGestureHandler onHandlerStateChange={tapGestureEvent}>\n      <AnimatedBlurView\n        // @ts-ignore\n        tint=\"default\"\n        animatedProps={animatedContainerProps}\n        style={[styles.container, animatedContainerStyle]}\n      >\n        <Animated.View\n          style={[\n            { ...StyleSheet.absoluteFillObject },\n            animatedInnerContainerStyle,\n          ]}\n        />\n      </AnimatedBlurView>\n    </TapGestureHandler>\n  );\n};\n\nconst Backdrop = memo(BackdropComponent);\n\nexport default Backdrop;\n"]}
+{"version":3,"sources":["Backdrop.tsx"],"names":["React","memo","StyleSheet","Animated","useAnimatedGestureHandler","useAnimatedProps","useAnimatedStyle","withDelay","withTiming","TapGestureHandler","BlurView","styles","CONTEXT_MENU_STATE","HOLD_ITEM_TRANSFORM_DURATION","IS_IOS","WINDOW_HEIGHT","BACKDROP_LIGHT_BACKGROUND_COLOR","BACKDROP_DARK_BACKGROUND_COLOR","useInternal","AnimatedBlurView","createAnimatedComponent","View","BackdropComponent","state","theme","tapGestureEvent","onStart","event","context","startPosition","x","y","onCancel","value","END","onEnd","distance","Math","hypot","shouldClose","isStateActive","ACTIVE","animatedContainerStyle","topValueAnimation","duration","opacityValueAnimation","top","opacity","animatedContainerProps","blurAmount","animatedInnerContainerStyle","backgroundColor","container","absoluteFillObject","Backdrop"],"mappings":"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","sourcesContent":["import React, { memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n  useAnimatedGestureHandler,\n  useAnimatedProps,\n  useAnimatedStyle,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  TapGestureHandler,\n  TapGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\n\n// Components\nimport { BlurView } from '@react-native-community/blur';\n\n// Utils\nimport { styles } from './styles';\nimport {\n  CONTEXT_MENU_STATE,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  IS_IOS,\n  WINDOW_HEIGHT,\n} from '../../constants';\nimport {\n  BACKDROP_LIGHT_BACKGROUND_COLOR,\n  BACKDROP_DARK_BACKGROUND_COLOR,\n} from './constants';\nimport { useInternal } from '../../hooks';\n\nconst AnimatedBlurView = IS_IOS\n  ? Animated.createAnimatedComponent(BlurView)\n  : Animated.View;\n\ntype Context = {\n  startPosition: {\n    x: number;\n    y: number;\n  };\n};\n\nconst BackdropComponent = () => {\n  const { state, theme } = useInternal();\n\n  const tapGestureEvent = useAnimatedGestureHandler<\n    TapGestureHandlerGestureEvent,\n    Context\n  >(\n    {\n      onStart: (event, context) => {\n        context.startPosition = { x: event.x, y: event.y };\n      },\n      onCancel: () => {\n        state.value = CONTEXT_MENU_STATE.END;\n      },\n      onEnd: (event, context) => {\n        const distance = Math.hypot(\n          event.x - context.startPosition.x,\n          event.y - context.startPosition.y\n        );\n        const shouldClose = distance < 10;\n        const isStateActive = state.value === CONTEXT_MENU_STATE.ACTIVE;\n\n        if (shouldClose && isStateActive) {\n          state.value = CONTEXT_MENU_STATE.END;\n        }\n      },\n    },\n    [state]\n  );\n\n  const animatedContainerStyle = useAnimatedStyle(() => {\n    const topValueAnimation = () =>\n      state.value === CONTEXT_MENU_STATE.ACTIVE\n        ? 0\n        : withDelay(\n            HOLD_ITEM_TRANSFORM_DURATION,\n            withTiming(WINDOW_HEIGHT, {\n              duration: 0,\n            })\n          );\n\n    const opacityValueAnimation = () =>\n      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      });\n\n    return {\n      top: topValueAnimation(),\n      opacity: opacityValueAnimation(),\n    };\n  });\n\n  const animatedContainerProps = useAnimatedProps(() => {\n    return {\n      blurAmount: withTiming(\n        state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0,\n        {\n          duration: HOLD_ITEM_TRANSFORM_DURATION,\n        }\n      ),\n    };\n  });\n\n  const animatedInnerContainerStyle = useAnimatedStyle(() => {\n    const backgroundColor =\n      theme.value === 'light'\n        ? BACKDROP_LIGHT_BACKGROUND_COLOR\n        : BACKDROP_DARK_BACKGROUND_COLOR;\n\n    return { backgroundColor };\n  }, [theme]);\n\n  return (\n    <TapGestureHandler onHandlerStateChange={tapGestureEvent}>\n      <AnimatedBlurView\n        // @ts-ignore\n        tint=\"default\"\n        blurType={'dark'}\n        animatedProps={animatedContainerProps}\n        style={[styles.container, animatedContainerStyle]}\n      >\n        <Animated.View\n          style={[\n            { ...StyleSheet.absoluteFillObject },\n            animatedInnerContainerStyle,\n          ]}\n        />\n      </AnimatedBlurView>\n    </TapGestureHandler>\n  );\n};\n\nconst Backdrop = memo(BackdropComponent);\n\nexport default Backdrop;\n"]}

package/lib/module/components/customView/CustomView.js

@@ -4,6 +4,7 @@ import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValu
 import { useInternal } from '../../hooks';
 import { HOLD_ITEM_TRANSFORM_DURATION, CONTEXT_MENU_STATE, SPRING_CONFIGURATION, SPRING_CONFIGURATION_MENU, WINDOW_WIDTH, WINDOW_HEIGHT } from '../../constants';
 import { calculateDynamicTransformValue } from '../../utils/calculations';
+const SCREEN_PADDING = 16;
 
 const CustomViewComponent = () => {
   const {
@@ -13,9 +14,8 @@ const CustomViewComponent = () => {
     safeAreaInsets
   } = useInternal();
   const [renderFn, setRenderFn] = useState(null);
-  const [customViewHeight, setCustomViewHeight] = useState(0);
-  const [customViewWidth, setCustomViewWidth] = useState(0);
-  const isActive = useSharedValue(false);
+  const cvHeight = useSharedValue(0);
+  const cvWidth = useSharedValue(0);
   const closeMenu = useCallback(() => {
     state.value = CONTEXT_MENU_STATE.END;
   }, [state]);
@@ -24,22 +24,22 @@ const CustomViewComponent = () => {
       height,
       width
     } = event.nativeEvent.layout;
-    setCustomViewHeight(height);
-    setCustomViewWidth(width);
+    cvHeight.value = height;
+    cvWidth.value = width;
     menuProps.value = { ...menuProps.value,
       customViewHeight: height
     };
-  }, [menuProps]);
+  }, [menuProps, cvHeight, cvWidth]);
   const clearRenderFn = useCallback(() => {
     setRenderFn(null);
-    setCustomViewHeight(0);
-    setCustomViewWidth(0);
+    cvHeight.value = 0;
+    cvWidth.value = 0;
     menuProps.value = { ...menuProps.value,
       customViewHeight: 0
     };
-  }, [menuProps]);
-  const updateRenderFn = useCallback(hasCustomView => {
-    if (hasCustomView && customViewRef.current) {
+  }, [menuProps, cvHeight, cvWidth]);
+  const updateRenderFn = useCallback(shouldShow => {
+    if (shouldShow && customViewRef.current) {
       setRenderFn(() => customViewRef.current);
     } else {
       setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);
@@ -53,71 +53,61 @@ const CustomViewComponent = () => {
     hasCustomView
   }) => {
     if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {
-      isActive.value = true;
       runOnJS(updateRenderFn)(true);
     } else if (currentState === CONTEXT_MENU_STATE.END) {
-      isActive.value = false;
       runOnJS(updateRenderFn)(false);
     }
-  }, [state, menuProps]); // Visibility style: depends ONLY on isActive, won't re-trigger on menuProps changes
-
+  }, [state, menuProps]);
   const visibilityStyles = useAnimatedStyle(() => {
+    const active = state.value === CONTEXT_MENU_STATE.ACTIVE && menuProps.value.hasCustomView;
     return {
-      opacity: withTiming(isActive.value ? 1 : 0, {
+      opacity: withTiming(active ? 1 : 0, {
         duration: HOLD_ITEM_TRANSFORM_DURATION
       }),
       transform: [{
-        scale: isActive.value ? withSpring(1, SPRING_CONFIGURATION_MENU) : withTiming(0, {
+        scale: active ? withSpring(1, SPRING_CONFIGURATION_MENU) : withTiming(0, {
           duration: HOLD_ITEM_TRANSFORM_DURATION
         })
       }]
     };
-  }, [isActive]); // Positioning style: depends on menuProps and customViewHeight
-
+  });
   const wrapperStyles = useAnimatedStyle(() => {
     const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
-    const isAbove = anchorPositionVertical === 'top'; // Fixed anchor point: top of the item
-
+    const isAbove = anchorPositionVertical === 'top';
     const top = menuProps.value.itemY;
-    const SCREEN_PADDING = 16;
-    const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2; // Start at item's left edge
+    const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2;
+    let left = menuProps.value.itemX;
+    const w = cvWidth.value;
 
-    let left = menuProps.value.itemX; // 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 (w > 0 && left + w > WINDOW_WIDTH - SCREEN_PADDING) {
+      left = Math.max(SCREEN_PADDING, WINDOW_WIDTH - w - SCREEN_PADDING);
     }
 
     if (left < SCREEN_PADDING) {
       left = SCREEN_PADDING;
     }
 
-    const tY = calculateDynamicTransformValue(menuProps.value.itemY, menuProps.value.itemHeight, menuProps.value.menuHeight, menuProps.value.customViewHeight, menuProps.value.anchorPosition, WINDOW_HEIGHT, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) || 0, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) || 0); // 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 h = cvHeight.value;
+    const tY = calculateDynamicTransformValue(menuProps.value.itemY, menuProps.value.itemHeight, menuProps.value.menuHeight, h, menuProps.value.anchorPosition, WINDOW_HEIGHT, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top) || 0, (safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom) || 0);
+    const positionOffsetY = isAbove ? -(h + 8) : menuProps.value.itemHeight + 8;
     return {
       top,
       left,
       maxWidth: MAX_WIDTH,
-      transform: [// 1. Transform value (screen boundary compensation)
-      {
+      transform: [{
         translateY: withSpring(tY, SPRING_CONFIGURATION)
-      }, // 2. Position offset (animated when customViewHeight changes)
-      {
+      }, {
         translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU)
       }]
     };
-  }, [menuProps, customViewHeight, customViewWidth]);
-  if (!renderFn) return null;
+  });
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [styles.customViewWrapper, wrapperStyles]
   }, /*#__PURE__*/React.createElement(Animated.View, {
     style: visibilityStyles
   }, /*#__PURE__*/React.createElement(Animated.View, {
     onLayout: onLayout
-  }, renderFn({
+  }, renderFn === null || renderFn === void 0 ? void 0 : renderFn({
     closeMenu
   }))));
 };
@@ -125,7 +115,8 @@ const CustomViewComponent = () => {
 const styles = StyleSheet.create({
   customViewWrapper: {
     position: 'absolute',
-    zIndex: 20
+    zIndex: 20,
+    pointerEvents: 'box-none'
   }
 });
 const CustomView = /*#__PURE__*/React.memo(CustomViewComponent);

package/lib/module/components/customView/CustomView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CustomView.tsx"],"names":["React","useCallback","useState","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","withTiming","useInternal","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","SPRING_CONFIGURATION","SPRING_CONFIGURATION_MENU","WINDOW_WIDTH","WINDOW_HEIGHT","calculateDynamicTransformValue","CustomViewComponent","state","menuProps","customViewRef","safeAreaInsets","renderFn","setRenderFn","customViewHeight","setCustomViewHeight","customViewWidth","setCustomViewWidth","isActive","closeMenu","value","END","onLayout","event","height","width","nativeEvent","layout","clearRenderFn","updateRenderFn","hasCustomView","current","setTimeout","currentState","ACTIVE","visibilityStyles","opacity","duration","transform","scale","wrapperStyles","anchorPositionVertical","anchorPosition","split","isAbove","top","itemY","SCREEN_PADDING","MAX_WIDTH","left","itemX","Math","max","tY","itemHeight","menuHeight","bottom","positionOffsetY","maxWidth","translateY","styles","customViewWrapper","create","position","zIndex","CustomView","memo"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,QAA7B,QAA6C,OAA7C;AACA,SAA4BC,UAA5B,QAA8C,cAA9C;AAEA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,cAJF,EAKEC,UALF,EAMEC,UANF,QAOO,yBAPP;AASA,SAASC,WAAT,QAA4B,aAA5B;AACA,SACEC,4BADF,EAEEC,kBAFF,EAGEC,oBAHF,EAIEC,yBAJF,EAKEC,YALF,EAMEC,aANF,QAOO,iBAPP;AASA,SAASC,8BAAT,QAA+C,0BAA/C;;AAEA,MAAMC,mBAAmB,GAAG,MAAM;AAChC,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,SAAT;AAAoBC,IAAAA,aAApB;AAAmCC,IAAAA;AAAnC,MAAsDZ,WAAW,EAAvE;AAEA,QAAM,CAACa,QAAD,EAAWC,WAAX,IAA0BvB,QAAQ,CAA0B,IAA1B,CAAxC;AACA,QAAM,CAACwB,gBAAD,EAAmBC,mBAAnB,IAA0CzB,QAAQ,CAAC,CAAD,CAAxD;AACA,QAAM,CAAC0B,eAAD,EAAkBC,kBAAlB,IAAwC3B,QAAQ,CAAC,CAAD,CAAtD;AAEA,QAAM4B,QAAQ,GAAGtB,cAAc,CAAC,KAAD,CAA/B;AAEA,QAAMuB,SAAS,GAAG9B,WAAW,CAAC,MAAM;AAClCmB,IAAAA,KAAK,CAACY,KAAN,GAAcnB,kBAAkB,CAACoB,GAAjC;AACD,GAF4B,EAE1B,CAACb,KAAD,CAF0B,CAA7B;AAIA,QAAMc,QAAQ,GAAGjC,WAAW,CACzBkC,KAAD,IAA8B;AAC5B,UAAM;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAoBF,KAAK,CAACG,WAAN,CAAkBC,MAA5C;AACAZ,IAAAA,mBAAmB,CAACS,MAAD,CAAnB;AACAP,IAAAA,kBAAkB,CAACQ,KAAD,CAAlB;AACAhB,IAAAA,SAAS,CAACW,KAAV,GAAkB,EAAE,GAAGX,SAAS,CAACW,KAAf;AAAsBN,MAAAA,gBAAgB,EAAEU;AAAxC,KAAlB;AACD,GANyB,EAO1B,CAACf,SAAD,CAP0B,CAA5B;AAUA,QAAMmB,aAAa,GAAGvC,WAAW,CAAC,MAAM;AACtCwB,IAAAA,WAAW,CAAC,IAAD,CAAX;AACAE,IAAAA,mBAAmB,CAAC,CAAD,CAAnB;AACAE,IAAAA,kBAAkB,CAAC,CAAD,CAAlB;AACAR,IAAAA,SAAS,CAACW,KAAV,GAAkB,EAAE,GAAGX,SAAS,CAACW,KAAf;AAAsBN,MAAAA,gBAAgB,EAAE;AAAxC,KAAlB;AACD,GALgC,EAK9B,CAACL,SAAD,CAL8B,CAAjC;AAOA,QAAMoB,cAAc,GAAGxC,WAAW,CAC/ByC,aAAD,IAA4B;AAC1B,QAAIA,aAAa,IAAIpB,aAAa,CAACqB,OAAnC,EAA4C;AAC1ClB,MAAAA,WAAW,CAAC,MAAMH,aAAa,CAACqB,OAArB,CAAX;AACD,KAFD,MAEO;AACLC,MAAAA,UAAU,CAACJ,aAAD,EAAgB5B,4BAAhB,CAAV;AACD;AACF,GAP+B,EAQhC,CAACU,aAAD,EAAgBkB,aAAhB,CARgC,CAAlC;AAWAlC,EAAAA,mBAAmB,CACjB,OAAO;AACLuC,IAAAA,YAAY,EAAEzB,KAAK,CAACY,KADf;AAELU,IAAAA,aAAa,EAAErB,SAAS,CAACW,KAAV,CAAgBU;AAF1B,GAAP,CADiB,EAKjB,CAAC;AAAEG,IAAAA,YAAF;AAAgBH,IAAAA;AAAhB,GAAD,KAAqC;AACnC,QAAIG,YAAY,KAAKhC,kBAAkB,CAACiC,MAApC,IAA8CJ,aAAlD,EAAiE;AAC/DZ,MAAAA,QAAQ,CAACE,KAAT,GAAiB,IAAjB;AACA3B,MAAAA,OAAO,CAACoC,cAAD,CAAP,CAAwB,IAAxB;AACD,KAHD,MAGO,IAAII,YAAY,KAAKhC,kBAAkB,CAACoB,GAAxC,EAA6C;AAClDH,MAAAA,QAAQ,CAACE,KAAT,GAAiB,KAAjB;AACA3B,MAAAA,OAAO,CAACoC,cAAD,CAAP,CAAwB,KAAxB;AACD;AACF,GAbgB,EAcjB,CAACrB,KAAD,EAAQC,SAAR,CAdiB,CAAnB,CAzCgC,CA0DhC;;AACA,QAAM0B,gBAAgB,GAAGxC,gBAAgB,CAAC,MAAM;AAC9C,WAAO;AACLyC,MAAAA,OAAO,EAAEtC,UAAU,CAACoB,QAAQ,CAACE,KAAT,GAAiB,CAAjB,GAAqB,CAAtB,EAAyB;AAC1CiB,QAAAA,QAAQ,EAAErC;AADgC,OAAzB,CADd;AAILsC,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,KAAK,EAAErB,QAAQ,CAACE,KAAT,GACHvB,UAAU,CAAC,CAAD,EAAIM,yBAAJ,CADP,GAEHL,UAAU,CAAC,CAAD,EAAI;AAAEuC,UAAAA,QAAQ,EAAErC;AAAZ,SAAJ;AAHhB,OADS;AAJN,KAAP;AAYD,GAbwC,EAatC,CAACkB,QAAD,CAbsC,CAAzC,CA3DgC,CA0EhC;;AACA,QAAMsB,aAAa,GAAG7C,gBAAgB,CAAC,MAAM;AAC3C,UAAM8C,sBAAsB,GAAGhC,SAAS,CAACW,KAAV,CAAgBsB,cAAhB,CAA+BC,KAA/B,CAAqC,GAArC,EAA0C,CAA1C,CAA/B;AACA,UAAMC,OAAO,GAAGH,sBAAsB,KAAK,KAA3C,CAF2C,CAI3C;;AACA,UAAMI,GAAG,GAAGpC,SAAS,CAACW,KAAV,CAAgB0B,KAA5B;AAEA,UAAMC,cAAc,GAAG,EAAvB;AACA,UAAMC,SAAS,GAAG5C,YAAY,GAAG2C,cAAc,GAAG,CAAlD,CAR2C,CAU3C;;AACA,QAAIE,IAAI,GAAGxC,SAAS,CAACW,KAAV,CAAgB8B,KAA3B,CAX2C,CAa3C;;AACA,QACElC,eAAe,GAAG,CAAlB,IACAiC,IAAI,GAAGjC,eAAP,GAAyBZ,YAAY,GAAG2C,cAF1C,EAGE;AACAE,MAAAA,IAAI,GAAGE,IAAI,CAACC,GAAL,CACLL,cADK,EAEL3C,YAAY,GAAGY,eAAf,GAAiC+B,cAF5B,CAAP;AAID;;AACD,QAAIE,IAAI,GAAGF,cAAX,EAA2B;AACzBE,MAAAA,IAAI,GAAGF,cAAP;AACD;;AACD,UAAMM,EAAE,GAAG/C,8BAA8B,CACvCG,SAAS,CAACW,KAAV,CAAgB0B,KADuB,EAEvCrC,SAAS,CAACW,KAAV,CAAgBkC,UAFuB,EAGvC7C,SAAS,CAACW,KAAV,CAAgBmC,UAHuB,EAIvC9C,SAAS,CAACW,KAAV,CAAgBN,gBAJuB,EAKvCL,SAAS,CAACW,KAAV,CAAgBsB,cALuB,EAMvCrC,aANuC,EAOvC,CAAAM,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEkC,GAAhB,KAAuB,CAPgB,EAQvC,CAAAlC,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAE6C,MAAhB,KAA0B,CARa,CAAzC,CA1B2C,CAqC3C;AACA;AACA;;AACA,UAAMC,eAAe,GAAGb,OAAO,GAC3B,EAAE9B,gBAAgB,GAAG,CAArB,CAD2B,GAE3BL,SAAS,CAACW,KAAV,CAAgBkC,UAAhB,GAA6B,CAFjC;AAIA,WAAO;AACLT,MAAAA,GADK;AAELI,MAAAA,IAFK;AAGLS,MAAAA,QAAQ,EAAEV,SAHL;AAILV,MAAAA,SAAS,EAAE,CACT;AACA;AAAEqB,QAAAA,UAAU,EAAE9D,UAAU,CAACwD,EAAD,EAAKnD,oBAAL;AAAxB,OAFS,EAGT;AACA;AAAEyD,QAAAA,UAAU,EAAE9D,UAAU,CAAC4D,eAAD,EAAkBtD,yBAAlB;AAAxB,OAJS;AAJN,KAAP;AAWD,GAvDqC,EAuDnC,CAACM,SAAD,EAAYK,gBAAZ,EAA8BE,eAA9B,CAvDmC,CAAtC;AAyDA,MAAI,CAACJ,QAAL,EAAe,OAAO,IAAP;AAEf,sBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACgD,MAAM,CAACC,iBAAR,EAA2BrB,aAA3B;AAAtB,kBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEL;AAAtB,kBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,QAAQ,EAAEb;AAAzB,KACGV,QAAQ,CAAC;AAAEO,IAAAA;AAAF,GAAD,CADX,CADF,CADF,CADF;AASD,CA/ID;;AAiJA,MAAMyC,MAAM,GAAGrE,UAAU,CAACuE,MAAX,CAAkB;AAC/BD,EAAAA,iBAAiB,EAAE;AACjBE,IAAAA,QAAQ,EAAE,UADO;AAEjBC,IAAAA,MAAM,EAAE;AAFS;AADY,CAAlB,CAAf;AAOA,MAAMC,UAAU,gBAAG7E,KAAK,CAAC8E,IAAN,CAAW3D,mBAAX,CAAnB;AAEA,eAAe0D,UAAf","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { useInternal } from '../../hooks';\nimport {\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n  SPRING_CONFIGURATION,\n  SPRING_CONFIGURATION_MENU,\n  WINDOW_WIDTH,\n  WINDOW_HEIGHT,\n} from '../../constants';\nimport { RenderCustomView } from '../menu/types';\nimport { calculateDynamicTransformValue } from '../../utils/calculations';\n\nconst CustomViewComponent = () => {\n  const { state, menuProps, customViewRef, safeAreaInsets } = useInternal();\n\n  const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);\n  const [customViewHeight, setCustomViewHeight] = useState(0);\n  const [customViewWidth, setCustomViewWidth] = useState(0);\n\n  const isActive = useSharedValue(false);\n\n  const closeMenu = useCallback(() => {\n    state.value = CONTEXT_MENU_STATE.END;\n  }, [state]);\n\n  const onLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      const { height, width } = event.nativeEvent.layout;\n      setCustomViewHeight(height);\n      setCustomViewWidth(width);\n      menuProps.value = { ...menuProps.value, customViewHeight: height };\n    },\n    [menuProps]\n  );\n\n  const clearRenderFn = useCallback(() => {\n    setRenderFn(null);\n    setCustomViewHeight(0);\n    setCustomViewWidth(0);\n    menuProps.value = { ...menuProps.value, customViewHeight: 0 };\n  }, [menuProps]);\n\n  const updateRenderFn = useCallback(\n    (hasCustomView: boolean) => {\n      if (hasCustomView && customViewRef.current) {\n        setRenderFn(() => customViewRef.current);\n      } else {\n        setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);\n      }\n    },\n    [customViewRef, clearRenderFn]\n  );\n\n  useAnimatedReaction(\n    () => ({\n      currentState: state.value,\n      hasCustomView: menuProps.value.hasCustomView,\n    }),\n    ({ currentState, hasCustomView }) => {\n      if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {\n        isActive.value = true;\n        runOnJS(updateRenderFn)(true);\n      } else if (currentState === CONTEXT_MENU_STATE.END) {\n        isActive.value = false;\n        runOnJS(updateRenderFn)(false);\n      }\n    },\n    [state, menuProps]\n  );\n\n  // Visibility style: depends ONLY on isActive, won't re-trigger on menuProps changes\n  const visibilityStyles = useAnimatedStyle(() => {\n    return {\n      opacity: withTiming(isActive.value ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      }),\n      transform: [\n        {\n          scale: isActive.value\n            ? withSpring(1, SPRING_CONFIGURATION_MENU)\n            : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),\n        },\n      ],\n    };\n  }, [isActive]);\n\n  // Positioning style: depends on menuProps and customViewHeight\n  const wrapperStyles = useAnimatedStyle(() => {\n    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n    const isAbove = anchorPositionVertical === 'top';\n\n    // Fixed anchor point: top of the item\n    const top = menuProps.value.itemY;\n\n    const SCREEN_PADDING = 16;\n    const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2;\n\n    // Start at item's left edge\n    let left = menuProps.value.itemX;\n\n    // If the view overflows the right edge, shift left\n    if (\n      customViewWidth > 0 &&\n      left + customViewWidth > WINDOW_WIDTH - SCREEN_PADDING\n    ) {\n      left = Math.max(\n        SCREEN_PADDING,\n        WINDOW_WIDTH - customViewWidth - SCREEN_PADDING\n      );\n    }\n    if (left < SCREEN_PADDING) {\n      left = SCREEN_PADDING;\n    }\n    const tY = calculateDynamicTransformValue(\n      menuProps.value.itemY,\n      menuProps.value.itemHeight,\n      menuProps.value.menuHeight,\n      menuProps.value.customViewHeight,\n      menuProps.value.anchorPosition,\n      WINDOW_HEIGHT,\n      safeAreaInsets?.top || 0,\n      safeAreaInsets?.bottom || 0\n    );\n\n    // Positional offset via translateY:\n    // above item: shift up by customViewHeight + gap\n    // below item: shift down by itemHeight + gap\n    const positionOffsetY = isAbove\n      ? -(customViewHeight + 8)\n      : menuProps.value.itemHeight + 8;\n\n    return {\n      top,\n      left,\n      maxWidth: MAX_WIDTH,\n      transform: [\n        // 1. Transform value (screen boundary compensation)\n        { translateY: withSpring(tY, SPRING_CONFIGURATION) },\n        // 2. Position offset (animated when customViewHeight changes)\n        { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },\n      ],\n    };\n  }, [menuProps, customViewHeight, customViewWidth]);\n\n  if (!renderFn) return null;\n\n  return (\n    <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>\n      <Animated.View style={visibilityStyles}>\n        <Animated.View onLayout={onLayout}>\n          {renderFn({ closeMenu })}\n        </Animated.View>\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  customViewWrapper: {\n    position: 'absolute',\n    zIndex: 20,\n  },\n});\n\nconst CustomView = React.memo(CustomViewComponent);\n\nexport default CustomView;\n"]}
+{"version":3,"sources":["CustomView.tsx"],"names":["React","useCallback","useState","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","withTiming","useInternal","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","SPRING_CONFIGURATION","SPRING_CONFIGURATION_MENU","WINDOW_WIDTH","WINDOW_HEIGHT","calculateDynamicTransformValue","SCREEN_PADDING","CustomViewComponent","state","menuProps","customViewRef","safeAreaInsets","renderFn","setRenderFn","cvHeight","cvWidth","closeMenu","value","END","onLayout","event","height","width","nativeEvent","layout","customViewHeight","clearRenderFn","updateRenderFn","shouldShow","current","setTimeout","currentState","hasCustomView","ACTIVE","visibilityStyles","active","opacity","duration","transform","scale","wrapperStyles","anchorPositionVertical","anchorPosition","split","isAbove","top","itemY","MAX_WIDTH","left","itemX","w","Math","max","h","tY","itemHeight","menuHeight","bottom","positionOffsetY","maxWidth","translateY","styles","customViewWrapper","create","position","zIndex","pointerEvents","CustomView","memo"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { useInternal } from '../../hooks';\nimport {\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n  SPRING_CONFIGURATION,\n  SPRING_CONFIGURATION_MENU,\n  WINDOW_WIDTH,\n  WINDOW_HEIGHT,\n} from '../../constants';\nimport { RenderCustomView } from '../menu/types';\nimport { calculateDynamicTransformValue } from '../../utils/calculations';\n\nconst SCREEN_PADDING = 16;\n\nconst CustomViewComponent = () => {\n  const { state, menuProps, customViewRef, safeAreaInsets } = useInternal();\n\n  const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);\n\n  const cvHeight = useSharedValue(0);\n  const cvWidth = useSharedValue(0);\n\n  const closeMenu = useCallback(() => {\n    state.value = CONTEXT_MENU_STATE.END;\n  }, [state]);\n\n  const onLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      const { height, width } = event.nativeEvent.layout;\n      cvHeight.value = height;\n      cvWidth.value = width;\n      menuProps.value = { ...menuProps.value, customViewHeight: height };\n    },\n    [menuProps, cvHeight, cvWidth]\n  );\n\n  const clearRenderFn = useCallback(() => {\n    setRenderFn(null);\n    cvHeight.value = 0;\n    cvWidth.value = 0;\n    menuProps.value = { ...menuProps.value, customViewHeight: 0 };\n  }, [menuProps, cvHeight, cvWidth]);\n\n  const updateRenderFn = useCallback(\n    (shouldShow: boolean) => {\n      if (shouldShow && customViewRef.current) {\n        setRenderFn(() => customViewRef.current);\n      } else {\n        setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);\n      }\n    },\n    [customViewRef, clearRenderFn]\n  );\n\n  useAnimatedReaction(\n    () => ({\n      currentState: state.value,\n      hasCustomView: menuProps.value.hasCustomView,\n    }),\n    ({ currentState, hasCustomView }) => {\n      if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {\n        runOnJS(updateRenderFn)(true);\n      } else if (currentState === CONTEXT_MENU_STATE.END) {\n        runOnJS(updateRenderFn)(false);\n      }\n    },\n    [state, menuProps]\n  );\n\n  const visibilityStyles = useAnimatedStyle(() => {\n    const active =\n      state.value === CONTEXT_MENU_STATE.ACTIVE &&\n      menuProps.value.hasCustomView;\n    return {\n      opacity: withTiming(active ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      }),\n      transform: [\n        {\n          scale: active\n            ? withSpring(1, SPRING_CONFIGURATION_MENU)\n            : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),\n        },\n      ],\n    };\n  });\n\n  const wrapperStyles = useAnimatedStyle(() => {\n    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n    const isAbove = anchorPositionVertical === 'top';\n\n    const top = menuProps.value.itemY;\n    const MAX_WIDTH = WINDOW_WIDTH - SCREEN_PADDING * 2;\n\n    let left = menuProps.value.itemX;\n    const w = cvWidth.value;\n    if (w > 0 && left + w > WINDOW_WIDTH - SCREEN_PADDING) {\n      left = Math.max(SCREEN_PADDING, WINDOW_WIDTH - w - SCREEN_PADDING);\n    }\n    if (left < SCREEN_PADDING) {\n      left = SCREEN_PADDING;\n    }\n\n    const h = cvHeight.value;\n    const tY = calculateDynamicTransformValue(\n      menuProps.value.itemY,\n      menuProps.value.itemHeight,\n      menuProps.value.menuHeight,\n      h,\n      menuProps.value.anchorPosition,\n      WINDOW_HEIGHT,\n      safeAreaInsets?.top || 0,\n      safeAreaInsets?.bottom || 0\n    );\n\n    const positionOffsetY = isAbove ? -(h + 8) : menuProps.value.itemHeight + 8;\n\n    return {\n      top,\n      left,\n      maxWidth: MAX_WIDTH,\n      transform: [\n        { translateY: withSpring(tY, SPRING_CONFIGURATION) },\n        { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },\n      ],\n    };\n  });\n\n  return (\n    <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>\n      <Animated.View style={visibilityStyles}>\n        <Animated.View onLayout={onLayout}>\n          {renderFn?.({ closeMenu })}\n        </Animated.View>\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  customViewWrapper: {\n    position: 'absolute',\n    zIndex: 20,\n    pointerEvents: 'box-none',\n  },\n});\n\nconst CustomView = React.memo(CustomViewComponent);\n\nexport default CustomView;\n"]}

package/lib/module/components/menu/MenuList.js

@@ -69,7 +69,6 @@ const MenuListComponent = () => {
       runOnJS(setter)(_items);
     }
   }, [menuProps]);
-  if (itemList.length === 0) return null;
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [styles.menuContainer, messageStyles]
   }, /*#__PURE__*/React.createElement(Animated.View, {

package/lib/module/components/menu/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuList.tsx"],"names":["React","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","withTiming","calculateMenuHeight","menuAnimationAnchor","MenuItems","SPRING_CONFIGURATION_MENU","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","styles","useInternal","deepEqual","leftOrRight","MenuListComponent","state","theme","menuProps","itemList","setItemList","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","ACTIVE","duration","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","color","backgroundColor","setter","_items","menuContainer","absoluteFillObject","menuInnerContainer","MenuList","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport {\n  calculateMenuHeight,\n  menuAnimationAnchor,\n} from '../../utils/calculations';\n\nimport MenuItems from './MenuItems';\n\nimport {\n  SPRING_CONFIGURATION_MENU,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n} from '../../constants';\n\nimport styles from './styles';\nimport { MenuItemProps } from './types';\nimport { useInternal } from '../../hooks';\nimport { deepEqual } from '../../utils/validations';\nimport { leftOrRight } from './calculations';\n\nconst MenuListComponent = () => {\n  const { state, theme, menuProps } = useInternal();\n\n  const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);\n\n  const menuHeight = useDerivedValue(() => {\n    const itemsWithSeparator = menuProps.value.items.filter(\n      item => item.withSeparator\n    );\n    return calculateMenuHeight(\n      menuProps.value.items.length,\n      itemsWithSeparator.length\n    );\n  }, [menuProps]);\n  const prevList = useSharedValue<MenuItemProps[]>([]);\n\n  const messageStyles = useAnimatedStyle(() => {\n    const itemsWithSeparator = menuProps.value.items.filter(\n      item => item.withSeparator\n    );\n\n    const translate = menuAnimationAnchor(\n      menuProps.value.anchorPosition,\n      menuProps.value.itemWidth,\n      menuProps.value.items.length,\n      itemsWithSeparator.length\n    );\n\n    const _leftPosition = leftOrRight(menuProps);\n\n    const menuScaleAnimation = () =>\n      state.value === CONTEXT_MENU_STATE.ACTIVE\n        ? withSpring(1, SPRING_CONFIGURATION_MENU)\n        : withTiming(0, {\n            duration: HOLD_ITEM_TRANSFORM_DURATION,\n          });\n\n    const opacityAnimation = () =>\n      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      });\n\n    return {\n      left: _leftPosition,\n      height: menuHeight.value,\n      opacity: opacityAnimation(),\n      transform: [\n        { translateX: translate.beginningTransformations.translateX },\n        { translateY: translate.beginningTransformations.translateY },\n        {\n          scale: menuScaleAnimation(),\n        },\n        { translateX: translate.endingTransformations.translateX },\n        { translateY: translate.endingTransformations.translateY },\n      ],\n    };\n  });\n\n  const animatedInnerContainerStyle = useAnimatedStyle(() => {\n    const color = theme.value === 'light' ? '#fff' : '#1A1A1A';\n    return {\n      backgroundColor: color,\n    };\n  }, [theme]);\n\n  const setter = (items: MenuItemProps[]) => {\n    setItemList(items);\n    prevList.value = items;\n  };\n\n  useAnimatedReaction(\n    () => menuProps.value.items,\n    _items => {\n      if (!deepEqual(_items, prevList.value)) {\n        runOnJS(setter)(_items);\n      }\n    },\n    [menuProps]\n  );\n\n  if (itemList.length === 0) return null;\n\n  return (\n    <Animated.View style={[styles.menuContainer, messageStyles]}>\n      <Animated.View\n        style={[\n          StyleSheet.absoluteFillObject,\n          styles.menuInnerContainer,\n          animatedInnerContainerStyle,\n        ]}\n      >\n        <MenuItems items={itemList} />\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nconst MenuList = React.memo(MenuListComponent);\n\nexport default MenuList;\n"]}
+{"version":3,"sources":["MenuList.tsx"],"names":["React","StyleSheet","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","withTiming","calculateMenuHeight","menuAnimationAnchor","MenuItems","SPRING_CONFIGURATION_MENU","HOLD_ITEM_TRANSFORM_DURATION","CONTEXT_MENU_STATE","styles","useInternal","deepEqual","leftOrRight","MenuListComponent","state","theme","menuProps","itemList","setItemList","useState","menuHeight","itemsWithSeparator","value","items","filter","item","withSeparator","length","prevList","messageStyles","translate","anchorPosition","itemWidth","_leftPosition","menuScaleAnimation","ACTIVE","duration","opacityAnimation","left","height","opacity","transform","translateX","beginningTransformations","translateY","scale","endingTransformations","animatedInnerContainerStyle","color","backgroundColor","setter","_items","menuContainer","absoluteFillObject","menuInnerContainer","MenuList","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport {\n  calculateMenuHeight,\n  menuAnimationAnchor,\n} from '../../utils/calculations';\n\nimport MenuItems from './MenuItems';\n\nimport {\n  SPRING_CONFIGURATION_MENU,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  CONTEXT_MENU_STATE,\n} from '../../constants';\n\nimport styles from './styles';\nimport { MenuItemProps } from './types';\nimport { useInternal } from '../../hooks';\nimport { deepEqual } from '../../utils/validations';\nimport { leftOrRight } from './calculations';\n\nconst MenuListComponent = () => {\n  const { state, theme, menuProps } = useInternal();\n\n  const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);\n\n  const menuHeight = useDerivedValue(() => {\n    const itemsWithSeparator = menuProps.value.items.filter(\n      item => item.withSeparator\n    );\n    return calculateMenuHeight(\n      menuProps.value.items.length,\n      itemsWithSeparator.length\n    );\n  }, [menuProps]);\n  const prevList = useSharedValue<MenuItemProps[]>([]);\n\n  const messageStyles = useAnimatedStyle(() => {\n    const itemsWithSeparator = menuProps.value.items.filter(\n      item => item.withSeparator\n    );\n\n    const translate = menuAnimationAnchor(\n      menuProps.value.anchorPosition,\n      menuProps.value.itemWidth,\n      menuProps.value.items.length,\n      itemsWithSeparator.length\n    );\n\n    const _leftPosition = leftOrRight(menuProps);\n\n    const menuScaleAnimation = () =>\n      state.value === CONTEXT_MENU_STATE.ACTIVE\n        ? withSpring(1, SPRING_CONFIGURATION_MENU)\n        : withTiming(0, {\n            duration: HOLD_ITEM_TRANSFORM_DURATION,\n          });\n\n    const opacityAnimation = () =>\n      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {\n        duration: HOLD_ITEM_TRANSFORM_DURATION,\n      });\n\n    return {\n      left: _leftPosition,\n      height: menuHeight.value,\n      opacity: opacityAnimation(),\n      transform: [\n        { translateX: translate.beginningTransformations.translateX },\n        { translateY: translate.beginningTransformations.translateY },\n        {\n          scale: menuScaleAnimation(),\n        },\n        { translateX: translate.endingTransformations.translateX },\n        { translateY: translate.endingTransformations.translateY },\n      ],\n    };\n  });\n\n  const animatedInnerContainerStyle = useAnimatedStyle(() => {\n    const color = theme.value === 'light' ? '#fff' : '#1A1A1A';\n    return {\n      backgroundColor: color,\n    };\n  }, [theme]);\n\n  const setter = (items: MenuItemProps[]) => {\n    setItemList(items);\n    prevList.value = items;\n  };\n\n  useAnimatedReaction(\n    () => menuProps.value.items,\n    _items => {\n      if (!deepEqual(_items, prevList.value)) {\n        runOnJS(setter)(_items);\n      }\n    },\n    [menuProps]\n  );\n\n  return (\n    <Animated.View style={[styles.menuContainer, messageStyles]}>\n      <Animated.View\n        style={[\n          StyleSheet.absoluteFillObject,\n          styles.menuInnerContainer,\n          animatedInnerContainerStyle,\n        ]}\n      >\n        <MenuItems items={itemList} />\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nconst MenuList = React.memo(MenuListComponent);\n\nexport default MenuList;\n"]}

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-hold-menu-actions",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "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,6 +117,7 @@ const BackdropComponent = () => {
       <AnimatedBlurView
         // @ts-ignore
         tint="default"
+        blurType={'dark'}
         animatedProps={animatedContainerProps}
         style={[styles.container, animatedContainerStyle]}
       >

package/src/components/customView/CustomView.tsx

@@ -22,14 +22,15 @@ import {
 import { RenderCustomView } from '../menu/types';
 import { calculateDynamicTransformValue } from '../../utils/calculations';
 
+const SCREEN_PADDING = 16;
+
 const CustomViewComponent = () => {
   const { state, menuProps, customViewRef, safeAreaInsets } = useInternal();
 
   const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);
-  const [customViewHeight, setCustomViewHeight] = useState(0);
-  const [customViewWidth, setCustomViewWidth] = useState(0);
 
-  const isActive = useSharedValue(false);
+  const cvHeight = useSharedValue(0);
+  const cvWidth = useSharedValue(0);
 
   const closeMenu = useCallback(() => {
     state.value = CONTEXT_MENU_STATE.END;
@@ -38,23 +39,23 @@ const CustomViewComponent = () => {
   const onLayout = useCallback(
     (event: LayoutChangeEvent) => {
       const { height, width } = event.nativeEvent.layout;
-      setCustomViewHeight(height);
-      setCustomViewWidth(width);
+      cvHeight.value = height;
+      cvWidth.value = width;
       menuProps.value = { ...menuProps.value, customViewHeight: height };
     },
-    [menuProps]
+    [menuProps, cvHeight, cvWidth]
   );
 
   const clearRenderFn = useCallback(() => {
     setRenderFn(null);
-    setCustomViewHeight(0);
-    setCustomViewWidth(0);
+    cvHeight.value = 0;
+    cvWidth.value = 0;
     menuProps.value = { ...menuProps.value, customViewHeight: 0 };
-  }, [menuProps]);
+  }, [menuProps, cvHeight, cvWidth]);
 
   const updateRenderFn = useCallback(
-    (hasCustomView: boolean) => {
-      if (hasCustomView && customViewRef.current) {
+    (shouldShow: boolean) => {
+      if (shouldShow && customViewRef.current) {
         setRenderFn(() => customViewRef.current);
       } else {
         setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);
@@ -70,97 +71,78 @@ const CustomViewComponent = () => {
     }),
     ({ currentState, hasCustomView }) => {
       if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {
-        isActive.value = true;
         runOnJS(updateRenderFn)(true);
       } else if (currentState === CONTEXT_MENU_STATE.END) {
-        isActive.value = false;
         runOnJS(updateRenderFn)(false);
       }
     },
     [state, menuProps]
   );
 
-  // Visibility style: depends ONLY on isActive, won't re-trigger on menuProps changes
   const visibilityStyles = useAnimatedStyle(() => {
+    const active =
+      state.value === CONTEXT_MENU_STATE.ACTIVE &&
+      menuProps.value.hasCustomView;
     return {
-      opacity: withTiming(isActive.value ? 1 : 0, {
+      opacity: withTiming(active ? 1 : 0, {
         duration: HOLD_ITEM_TRANSFORM_DURATION,
       }),
       transform: [
         {
-          scale: isActive.value
+          scale: active
             ? withSpring(1, SPRING_CONFIGURATION_MENU)
             : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
         },
       ],
     };
-  }, [isActive]);
+  });
 
-  // Positioning style: depends on menuProps and customViewHeight
   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;
-
-    // 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
-      );
+    const w = cvWidth.value;
+    if (w > 0 && left + w > WINDOW_WIDTH - SCREEN_PADDING) {
+      left = Math.max(SCREEN_PADDING, WINDOW_WIDTH - w - 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,
-      menuProps.value.customViewHeight,
+      h,
       menuProps.value.anchorPosition,
       WINDOW_HEIGHT,
       safeAreaInsets?.top || 0,
       safeAreaInsets?.bottom || 0
     );
 
-    // 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 positionOffsetY = isAbove ? -(h + 8) : menuProps.value.itemHeight + 8;
 
     return {
       top,
       left,
       maxWidth: MAX_WIDTH,
       transform: [
-        // 1. Transform value (screen boundary compensation)
         { translateY: withSpring(tY, SPRING_CONFIGURATION) },
-        // 2. Position offset (animated when customViewHeight changes)
         { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },
       ],
     };
-  }, [menuProps, customViewHeight, customViewWidth]);
-
-  if (!renderFn) return null;
+  });
 
   return (
     <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>
       <Animated.View style={visibilityStyles}>
         <Animated.View onLayout={onLayout}>
-          {renderFn({ closeMenu })}
+          {renderFn?.({ closeMenu })}
         </Animated.View>
       </Animated.View>
     </Animated.View>
@@ -171,6 +153,7 @@ const styles = StyleSheet.create({
   customViewWrapper: {
     position: 'absolute',
     zIndex: 20,
+    pointerEvents: 'box-none',
   },
 });