react-native-hold-menu-actions 0.1.11 → 0.1.14

package/src/components/menu/Menu.tsx

@@ -29,18 +29,17 @@ const MenuComponent = () => {
     const left = menuProps.value.itemX;
     const width = menuProps.value.itemWidth;
     const tY = menuProps.value.transformValue;
-    const isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;
 
     return {
       top,
       left,
       width,
-      pointerEvents: isActive ? 'auto' : 'none',
       transform: [
         {
-          translateY: isActive
-            ? withSpring(tY, SPRING_CONFIGURATION)
-            : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
+          translateY:
+            state.value === CONTEXT_MENU_STATE.ACTIVE
+              ? withSpring(tY, SPRING_CONFIGURATION)
+              : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
         },
       ],
     };

package/src/components/menu/MenuList.tsx

@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 
 import Animated, {
   runOnJS,
+  useAnimatedProps,
   useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
@@ -15,12 +16,14 @@ import {
   calculateMenuHeight,
   menuAnimationAnchor,
 } from '../../utils/calculations';
+import { BlurView } from '@react-native-community/blur';
 
 import MenuItems from './MenuItems';
 
 import {
   SPRING_CONFIGURATION_MENU,
   HOLD_ITEM_TRANSFORM_DURATION,
+  IS_IOS,
   CONTEXT_MENU_STATE,
 } from '../../constants';
 
@@ -30,6 +33,8 @@ import { useInternal } from '../../hooks';
 import { deepEqual } from '../../utils/validations';
 import { leftOrRight } from './calculations';
 
+const AnimatedView = Animated.createAnimatedComponent(BlurView);
+
 const MenuListComponent = () => {
   const { state, theme, menuProps } = useInternal();
 
@@ -89,12 +94,22 @@ const MenuListComponent = () => {
   });
 
   const animatedInnerContainerStyle = useAnimatedStyle(() => {
-    const color = theme.value === 'light' ? '#fff' : '#1A1A1A';
     return {
-      backgroundColor: color,
+      backgroundColor:
+        theme.value === 'light'
+          ? IS_IOS
+            ? 'rgba(255, 255, 255, .75)'
+            : 'rgba(255, 255, 255, .95)'
+          : IS_IOS
+          ? 'rgba(0,0,0,0.5)'
+          : 'rgba(39, 39, 39, .8)',
     };
   }, [theme]);
 
+  const animatedProps = useAnimatedProps(() => {
+    return { blurType: theme.value };
+  }, [theme]);
+
   const setter = (items: MenuItemProps[]) => {
     setItemList(items);
     prevList.value = items;
@@ -111,7 +126,11 @@ const MenuListComponent = () => {
   );
 
   return (
-    <Animated.View style={[styles.menuContainer, messageStyles]}>
+    <AnimatedView
+      blurAmount={100}
+      animatedProps={animatedProps}
+      style={[styles.menuContainer, messageStyles]}
+    >
       <Animated.View
         style={[
           StyleSheet.absoluteFillObject,
@@ -121,7 +140,7 @@ const MenuListComponent = () => {
       >
         <MenuItems items={itemList} />
       </Animated.View>
-    </Animated.View>
+    </AnimatedView>
   );
 };
 

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

@@ -13,6 +13,12 @@ export type MenuListProps = {
   items: MenuItemProps[];
 };
 
+export type CustomViewProps = {
+  closeMenu: () => void;
+};
+
+export type RenderCustomView = (props: CustomViewProps) => React.ReactElement;
+
 export type MenuInternalProps = {
   items: MenuItemProps[];
   itemHeight: number;
@@ -25,4 +31,5 @@ export type MenuInternalProps = {
   actionParams: {
     [name: string]: (string | number)[];
   };
+  hasCustomView: boolean;
 };

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
@@ -17,7 +13,8 @@ import { StateProps, Action } from './reducer';
 import { CONTEXT_MENU_STATE } from '../../constants';
 import { MenuInternalProps } from '../menu/types';
 import Menu from '../menu';
-import Content from './Content';
+import CustomView from '../customView/CustomView';
+import { RenderCustomView } from '../menu/types';
 
 export interface Store {
   state: StateProps;
@@ -26,14 +23,14 @@ export interface Store {
 
 export let AnimatedIcon: any;
 
-const ProviderComponent: React.FC<HoldMenuProviderProps> = ({
+const ProviderComponent = ({
   children,
   theme: selectedTheme,
   iconComponent,
   safeAreaInsets,
   onOpen,
   onClose,
-}) => {
+}: HoldMenuProviderProps) => {
   if (iconComponent)
     AnimatedIcon = Animated.createAnimatedComponent(iconComponent);
 
@@ -51,10 +48,9 @@ const ProviderComponent: React.FC<HoldMenuProviderProps> = ({
     menuHeight: 0,
     transformValue: 0,
     actionParams: {},
+    hasCustomView: false,
   });
-  const contentRenderer = useRef<((params: any) => React.ReactNode) | null>(
-    null
-  );
+  const customViewRef = useRef<RenderCustomView | null>(null);
 
   useEffect(() => {
     theme.value = selectedTheme || 'light';
@@ -66,12 +62,14 @@ const ProviderComponent: React.FC<HoldMenuProviderProps> = ({
     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
         }
       }
     },
@@ -83,7 +81,7 @@ const ProviderComponent: React.FC<HoldMenuProviderProps> = ({
       state,
       theme,
       menuProps,
-      contentRenderer,
+      customViewRef,
       safeAreaInsets: safeAreaInsets || {
         top: 0,
         bottom: 0,
@@ -101,13 +99,13 @@ const ProviderComponent: React.FC<HoldMenuProviderProps> = ({
           {children}
           <Backdrop />
           <Menu />
-          <Content />
+          <CustomView />
         </PortalProvider>
       </InternalContext.Provider>
     </GestureHandlerRootView>
   );
 };
 
-const Provider = memo(ProviderComponent) as React.FC<HoldMenuProviderProps>;
+const Provider = memo(ProviderComponent);
 
 export default Provider;

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

@@ -21,7 +21,7 @@ export interface HoldMenuProviderProps {
    * safeAreaInsets={insets}
    * ```
    */
-  safeAreaInsets?: {
+  safeAreaInsets: {
     top: number;
     right: number;
     bottom: number;

package/src/context/internal.ts

@@ -1,18 +1,13 @@
-import { createContext } from 'react';
-import type { MutableRefObject } from 'react';
+import { createContext, MutableRefObject } from 'react';
 import type Animated from 'react-native-reanimated';
 import type { CONTEXT_MENU_STATE } from '../constants';
-import { MenuInternalProps } from '../components/menu/types';
-
-export type ContentRendererRef = MutableRefObject<
-  ((params: any) => React.ReactNode) | null
->;
+import { MenuInternalProps, RenderCustomView } from '../components/menu/types';
 
 export type InternalContextType = {
   state: Animated.SharedValue<CONTEXT_MENU_STATE>;
   theme: Animated.SharedValue<'light' | 'dark'>;
   menuProps: Animated.SharedValue<MenuInternalProps>;
-  contentRenderer: ContentRendererRef;
+  customViewRef: MutableRefObject<RenderCustomView | null>;
   safeAreaInsets?: {
     top: number;
     right: number;

package/src/index.ts

@@ -3,8 +3,9 @@ export { default as HoldMenuProvider } from './components/provider';
 export { default as HoldMenuFlatList } from './components/flatList';
 export { default as HoldMenuIcon } from './components/icon';
 
-export type { HoldMenuProviderProps } from './components/provider';
+export type { HoldItemProps } from './components/holdItem/types';
 export type {
-  HoldItemProps,
-  RenderContentParams,
-} from './components/holdItem/types';
+  MenuItemProps,
+  CustomViewProps,
+  RenderCustomView,
+} from './components/menu/types';

package/lib/commonjs/components/provider/Content.js

@@ -1,74 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-
-var _hooks = require("../../hooks");
-
-var _constants = require("../../constants");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-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 Content = () => {
-  const {
-    state,
-    menuProps,
-    contentRenderer
-  } = (0, _hooks.useInternal)();
-  const [isActive, setIsActive] = (0, _react.useState)(false);
-  const contentHeight = (0, _reactNativeReanimated.useSharedValue)(0);
-  const handleLayout = (0, _react.useCallback)(event => {
-    contentHeight.value = event.nativeEvent.layout.height;
-  }, [contentHeight]); // синхронизируем Reanimated state → React state
-
-  (0, _reactNativeReanimated.useAnimatedReaction)(() => state.value, val => {
-    (0, _reactNativeReanimated.runOnJS)(setIsActive)(val === _constants.CONTEXT_MENU_STATE.ACTIVE);
-  });
-  const renderContent = contentRenderer.current;
-  const wrapperStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
-    const anchorPositionHorizontal = menuProps.value.anchorPosition.split('-')[1];
-    const top = anchorPositionVertical === 'top' ? menuProps.value.itemY - contentHeight.value - 8 : menuProps.value.itemY + menuProps.value.itemHeight + 8;
-    const left = anchorPositionHorizontal === 'center' ? menuProps.value.itemX / 2 - menuProps.value.itemWidth / 3 : anchorPositionHorizontal === 'right' ? undefined : menuProps.value.itemX;
-    const right = anchorPositionHorizontal === 'right' ? 0 : undefined;
-    const tY = menuProps.value.transformValue;
-    return {
-      opacity: state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? (0, _reactNativeReanimated.withTiming)(1) : (0, _reactNativeReanimated.withTiming)(0),
-      top,
-      left,
-      right,
-      transform: [{
-        translateY: state.value === _constants.CONTEXT_MENU_STATE.ACTIVE ? (0, _reactNativeReanimated.withSpring)(tY, _constants.SPRING_CONFIGURATION) : (0, _reactNativeReanimated.withTiming)(0, {
-          duration: _constants.HOLD_ITEM_TRANSFORM_DURATION
-        })
-      }]
-    };
-  }, [menuProps]);
-
-  const closeMenu = () => state.value = _constants.CONTEXT_MENU_STATE.END;
-
-  if (!renderContent) {
-    return null;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    onLayout: handleLayout,
-    style: [{
-      position: 'absolute',
-      left: 0,
-      zIndex: 12
-    }, wrapperStyles]
-  }, isActive && renderContent(closeMenu));
-};
-
-var _default = Content;
-exports.default = _default;
-//# sourceMappingURL=Content.js.map

package/lib/commonjs/components/provider/Content.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Content.tsx"],"names":["Content","state","menuProps","contentRenderer","isActive","setIsActive","contentHeight","handleLayout","event","value","nativeEvent","layout","height","val","CONTEXT_MENU_STATE","ACTIVE","renderContent","current","wrapperStyles","anchorPositionVertical","anchorPosition","split","anchorPositionHorizontal","top","itemY","itemHeight","left","itemX","itemWidth","undefined","right","tY","transformValue","opacity","transform","translateY","SPRING_CONFIGURATION","duration","HOLD_ITEM_TRANSFORM_DURATION","closeMenu","END","position","zIndex"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { useInternal } from '../../hooks';\nimport {\n  CONTEXT_MENU_STATE,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  SPRING_CONFIGURATION,\n} from '../../constants';\n\nconst Content = () => {\n  const { state, menuProps, contentRenderer } = useInternal();\n  const [isActive, setIsActive] = useState(false);\n  const contentHeight = useSharedValue(0);\n\n  const handleLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      contentHeight.value = event.nativeEvent.layout.height;\n    },\n    [contentHeight]\n  );\n\n  // синхронизируем Reanimated state → React state\n  useAnimatedReaction(\n    () => state.value,\n    val => {\n      runOnJS(setIsActive)(val === CONTEXT_MENU_STATE.ACTIVE);\n    }\n  );\n\n  const renderContent = contentRenderer.current;\n  const wrapperStyles = useAnimatedStyle(() => {\n    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n    const anchorPositionHorizontal = menuProps.value.anchorPosition.split(\n      '-'\n    )[1];\n\n    const top =\n      anchorPositionVertical === 'top'\n        ? menuProps.value.itemY - contentHeight.value - 8\n        : menuProps.value.itemY + menuProps.value.itemHeight + 8;\n\n    const left =\n      anchorPositionHorizontal === 'center'\n        ? menuProps.value.itemX / 2 - menuProps.value.itemWidth / 3\n        : anchorPositionHorizontal === 'right'\n        ? undefined\n        : menuProps.value.itemX;\n    const right = anchorPositionHorizontal === 'right' ? 0 : undefined;\n\n    const tY = menuProps.value.transformValue;\n    return {\n      opacity:\n        state.value === CONTEXT_MENU_STATE.ACTIVE\n          ? withTiming(1)\n          : withTiming(0),\n      top,\n      left,\n      right,\n      transform: [\n        {\n          translateY:\n            state.value === CONTEXT_MENU_STATE.ACTIVE\n              ? withSpring(tY, SPRING_CONFIGURATION)\n              : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),\n        },\n      ],\n    };\n  }, [menuProps]);\n\n  const closeMenu = () => (state.value = CONTEXT_MENU_STATE.END);\n\n  if (!renderContent) {\n    return null;\n  }\n  return (\n    <Animated.View\n      onLayout={handleLayout}\n      style={[{ position: 'absolute', left: 0, zIndex: 12 }, wrapperStyles]}\n    >\n      {isActive && renderContent(closeMenu)}\n    </Animated.View>\n  );\n};\n\nexport default Content;\n"]}

package/lib/module/components/provider/Content.js

@@ -1,59 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
-import { useInternal } from '../../hooks';
-import { CONTEXT_MENU_STATE, HOLD_ITEM_TRANSFORM_DURATION, SPRING_CONFIGURATION } from '../../constants';
-
-const Content = () => {
-  const {
-    state,
-    menuProps,
-    contentRenderer
-  } = useInternal();
-  const [isActive, setIsActive] = useState(false);
-  const contentHeight = useSharedValue(0);
-  const handleLayout = useCallback(event => {
-    contentHeight.value = event.nativeEvent.layout.height;
-  }, [contentHeight]); // синхронизируем Reanimated state → React state
-
-  useAnimatedReaction(() => state.value, val => {
-    runOnJS(setIsActive)(val === CONTEXT_MENU_STATE.ACTIVE);
-  });
-  const renderContent = contentRenderer.current;
-  const wrapperStyles = useAnimatedStyle(() => {
-    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
-    const anchorPositionHorizontal = menuProps.value.anchorPosition.split('-')[1];
-    const top = anchorPositionVertical === 'top' ? menuProps.value.itemY - contentHeight.value - 8 : menuProps.value.itemY + menuProps.value.itemHeight + 8;
-    const left = anchorPositionHorizontal === 'center' ? menuProps.value.itemX / 2 - menuProps.value.itemWidth / 3 : anchorPositionHorizontal === 'right' ? undefined : menuProps.value.itemX;
-    const right = anchorPositionHorizontal === 'right' ? 0 : undefined;
-    const tY = menuProps.value.transformValue;
-    return {
-      opacity: state.value === CONTEXT_MENU_STATE.ACTIVE ? withTiming(1) : withTiming(0),
-      top,
-      left,
-      right,
-      transform: [{
-        translateY: state.value === CONTEXT_MENU_STATE.ACTIVE ? withSpring(tY, SPRING_CONFIGURATION) : withTiming(0, {
-          duration: HOLD_ITEM_TRANSFORM_DURATION
-        })
-      }]
-    };
-  }, [menuProps]);
-
-  const closeMenu = () => state.value = CONTEXT_MENU_STATE.END;
-
-  if (!renderContent) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(Animated.View, {
-    onLayout: handleLayout,
-    style: [{
-      position: 'absolute',
-      left: 0,
-      zIndex: 12
-    }, wrapperStyles]
-  }, isActive && renderContent(closeMenu));
-};
-
-export default Content;
-//# sourceMappingURL=Content.js.map

package/lib/module/components/provider/Content.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Content.tsx"],"names":["React","useCallback","useState","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","withTiming","useInternal","CONTEXT_MENU_STATE","HOLD_ITEM_TRANSFORM_DURATION","SPRING_CONFIGURATION","Content","state","menuProps","contentRenderer","isActive","setIsActive","contentHeight","handleLayout","event","value","nativeEvent","layout","height","val","ACTIVE","renderContent","current","wrapperStyles","anchorPositionVertical","anchorPosition","split","anchorPositionHorizontal","top","itemY","itemHeight","left","itemX","itemWidth","undefined","right","tY","transformValue","opacity","transform","translateY","duration","closeMenu","END","position","zIndex"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { useInternal } from '../../hooks';\nimport {\n  CONTEXT_MENU_STATE,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  SPRING_CONFIGURATION,\n} from '../../constants';\n\nconst Content = () => {\n  const { state, menuProps, contentRenderer } = useInternal();\n  const [isActive, setIsActive] = useState(false);\n  const contentHeight = useSharedValue(0);\n\n  const handleLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      contentHeight.value = event.nativeEvent.layout.height;\n    },\n    [contentHeight]\n  );\n\n  // синхронизируем Reanimated state → React state\n  useAnimatedReaction(\n    () => state.value,\n    val => {\n      runOnJS(setIsActive)(val === CONTEXT_MENU_STATE.ACTIVE);\n    }\n  );\n\n  const renderContent = contentRenderer.current;\n  const wrapperStyles = useAnimatedStyle(() => {\n    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];\n    const anchorPositionHorizontal = menuProps.value.anchorPosition.split(\n      '-'\n    )[1];\n\n    const top =\n      anchorPositionVertical === 'top'\n        ? menuProps.value.itemY - contentHeight.value - 8\n        : menuProps.value.itemY + menuProps.value.itemHeight + 8;\n\n    const left =\n      anchorPositionHorizontal === 'center'\n        ? menuProps.value.itemX / 2 - menuProps.value.itemWidth / 3\n        : anchorPositionHorizontal === 'right'\n        ? undefined\n        : menuProps.value.itemX;\n    const right = anchorPositionHorizontal === 'right' ? 0 : undefined;\n\n    const tY = menuProps.value.transformValue;\n    return {\n      opacity:\n        state.value === CONTEXT_MENU_STATE.ACTIVE\n          ? withTiming(1)\n          : withTiming(0),\n      top,\n      left,\n      right,\n      transform: [\n        {\n          translateY:\n            state.value === CONTEXT_MENU_STATE.ACTIVE\n              ? withSpring(tY, SPRING_CONFIGURATION)\n              : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),\n        },\n      ],\n    };\n  }, [menuProps]);\n\n  const closeMenu = () => (state.value = CONTEXT_MENU_STATE.END);\n\n  if (!renderContent) {\n    return null;\n  }\n  return (\n    <Animated.View\n      onLayout={handleLayout}\n      style={[{ position: 'absolute', left: 0, zIndex: 12 }, wrapperStyles]}\n    >\n      {isActive && renderContent(closeMenu)}\n    </Animated.View>\n  );\n};\n\nexport default Content;\n"]}

package/lib/typescript/components/provider/Content.d.ts

@@ -1,2 +0,0 @@
-declare const Content: () => JSX.Element | null;
-export default Content;

package/src/components/provider/Content.tsx

@@ -1,93 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import Animated, {
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated';
-import type { LayoutChangeEvent } from 'react-native';
-import { useInternal } from '../../hooks';
-import {
-  CONTEXT_MENU_STATE,
-  HOLD_ITEM_TRANSFORM_DURATION,
-  SPRING_CONFIGURATION,
-} from '../../constants';
-
-const Content = () => {
-  const { state, menuProps, contentRenderer } = useInternal();
-  const [isActive, setIsActive] = useState(false);
-  const contentHeight = useSharedValue(0);
-
-  const handleLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      contentHeight.value = event.nativeEvent.layout.height;
-    },
-    [contentHeight]
-  );
-
-  // синхронизируем Reanimated state → React state
-  useAnimatedReaction(
-    () => state.value,
-    val => {
-      runOnJS(setIsActive)(val === CONTEXT_MENU_STATE.ACTIVE);
-    }
-  );
-
-  const renderContent = contentRenderer.current;
-  const wrapperStyles = useAnimatedStyle(() => {
-    const anchorPositionVertical = menuProps.value.anchorPosition.split('-')[0];
-    const anchorPositionHorizontal = menuProps.value.anchorPosition.split(
-      '-'
-    )[1];
-
-    const top =
-      anchorPositionVertical === 'top'
-        ? menuProps.value.itemY - contentHeight.value - 8
-        : menuProps.value.itemY + menuProps.value.itemHeight + 8;
-
-    const left =
-      anchorPositionHorizontal === 'center'
-        ? menuProps.value.itemX / 2 - menuProps.value.itemWidth / 3
-        : anchorPositionHorizontal === 'right'
-        ? undefined
-        : menuProps.value.itemX;
-    const right = anchorPositionHorizontal === 'right' ? 0 : undefined;
-
-    const tY = menuProps.value.transformValue;
-    return {
-      opacity:
-        state.value === CONTEXT_MENU_STATE.ACTIVE
-          ? withTiming(1)
-          : withTiming(0),
-      top,
-      left,
-      right,
-      transform: [
-        {
-          translateY:
-            state.value === CONTEXT_MENU_STATE.ACTIVE
-              ? withSpring(tY, SPRING_CONFIGURATION)
-              : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
-        },
-      ],
-    };
-  }, [menuProps]);
-
-  const closeMenu = () => (state.value = CONTEXT_MENU_STATE.END);
-
-  if (!renderContent) {
-    return null;
-  }
-  return (
-    <Animated.View
-      onLayout={handleLayout}
-      style={[{ position: 'absolute', left: 0, zIndex: 12 }, wrapperStyles]}
-    >
-      {isActive && renderContent(closeMenu)}
-    </Animated.View>
-  );
-};
-
-export default Content;