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

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

@@ -1 +1 @@
-{"version":3,"sources":["calculations.ts"],"names":["styleGuide","MENU_WIDTH","MENU_TRANSFORM_ORIGIN_TOLERENCE","FONT_SCALE","MenuItemHeight","typography","callout","lineHeight","spacing","calculateMenuHeight","itemLength","separatorCount","menuAnimationAnchor","anchorPoint","itemWidth","itemsWithSeparatorLength","MenuHeight","splittetAnchorName","split","Center1","Center2","TyTop1","TyTop2","TxLeft1","TxLeft2","beginningTransformations","translateX","translateY","endingTransformations","getTransformOrigin","posX","windowWidth","bottom","distanceToLeft","Math","round","distanceToRight","position","majority","abs"],"mappings":"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","sourcesContent":["import styleGuide from '../styleGuide';\nimport {\n  MENU_WIDTH,\n  MENU_TRANSFORM_ORIGIN_TOLERENCE,\n  FONT_SCALE,\n} from '../constants';\n\nexport const MenuItemHeight = () => {\n  'worklet';\n  return (\n    styleGuide.typography.callout.lineHeight * FONT_SCALE +\n    styleGuide.spacing * 2.5\n  );\n};\n\nexport const calculateMenuHeight = (\n  itemLength: number,\n  separatorCount: number\n) => {\n  'worklet';\n  return (\n    MenuItemHeight() * itemLength +\n    (itemLength - 1) +\n    separatorCount * styleGuide.spacing\n  );\n};\n\nexport type TransformOriginAnchorPosition =\n  | 'top-right'\n  | 'top-left'\n  | 'top-center'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'bottom-center';\n\nexport const menuAnimationAnchor = (\n  anchorPoint: TransformOriginAnchorPosition,\n  itemWidth: number,\n  itemLength: number,\n  itemsWithSeparatorLength: number\n) => {\n  'worklet';\n  const MenuHeight = calculateMenuHeight(itemLength, itemsWithSeparatorLength);\n  const splittetAnchorName: string[] = anchorPoint.split('-');\n\n  const Center1 = itemWidth;\n  const Center2 = 0;\n\n  const TyTop1 = -(MenuHeight / 2);\n  const TyTop2 = MenuHeight / 2;\n\n  const TxLeft1 = (MENU_WIDTH / 2) * -1;\n  const TxLeft2 = (MENU_WIDTH / 2) * 1;\n\n  return {\n    beginningTransformations: {\n      translateX:\n        splittetAnchorName[1] === 'right'\n          ? -TxLeft1\n          : splittetAnchorName[1] === 'left'\n          ? TxLeft1\n          : Center1,\n      translateY:\n        splittetAnchorName[0] === 'top'\n          ? TyTop1\n          : splittetAnchorName[0] === 'bottom'\n          ? TyTop1\n          : Center2,\n    },\n    endingTransformations: {\n      translateX:\n        splittetAnchorName[1] === 'right'\n          ? -TxLeft2\n          : splittetAnchorName[1] === 'left'\n          ? TxLeft2\n          : Center2,\n      translateY:\n        splittetAnchorName[0] === 'top'\n          ? TyTop2\n          : splittetAnchorName[0] === 'bottom'\n          ? -TyTop2\n          : Center2,\n    },\n  };\n};\n\nexport const getTransformOrigin = (\n  posX: number,\n  itemWidth: number,\n  windowWidth: number,\n  bottom?: boolean\n): TransformOriginAnchorPosition => {\n  'worklet';\n  const distanceToLeft = Math.round(posX + itemWidth / 2);\n  const distanceToRight = Math.round(windowWidth - distanceToLeft);\n\n  let position: TransformOriginAnchorPosition = bottom\n    ? 'bottom-right'\n    : 'top-right';\n\n  const majority = Math.abs(distanceToLeft - distanceToRight);\n\n  if (majority < MENU_TRANSFORM_ORIGIN_TOLERENCE) {\n    position = bottom ? 'bottom-center' : 'top-center';\n  } else if (distanceToLeft < distanceToRight) {\n    position = bottom ? 'bottom-left' : 'top-left';\n  }\n\n  return position;\n};\n"]}
+{"version":3,"sources":["calculations.ts"],"names":["styleGuide","MENU_WIDTH","MENU_TRANSFORM_ORIGIN_TOLERENCE","FONT_SCALE","MenuItemHeight","typography","callout","lineHeight","spacing","calculateMenuHeight","itemLength","separatorCount","menuAnimationAnchor","anchorPoint","itemWidth","itemsWithSeparatorLength","MenuHeight","splittetAnchorName","split","Center1","Center2","TyTop1","TyTop2","TxLeft1","TxLeft2","beginningTransformations","translateX","translateY","endingTransformations","calculateDynamicTransformValue","itemY","itemHeight","menuHeight","customViewHeight","anchorPosition","screenHeight","safeAreaTop","safeAreaBottom","GAP","isAnchorTop","includes","bottomEdge","topEdge","tY","getTransformOrigin","posX","windowWidth","bottom","distanceToLeft","Math","round","distanceToRight","position","majority","abs"],"mappings":"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","sourcesContent":["import styleGuide from '../styleGuide';\nimport {\n  MENU_WIDTH,\n  MENU_TRANSFORM_ORIGIN_TOLERENCE,\n  FONT_SCALE,\n} from '../constants';\n\nexport const MenuItemHeight = () => {\n  'worklet';\n  return (\n    styleGuide.typography.callout.lineHeight * FONT_SCALE +\n    styleGuide.spacing * 2.5\n  );\n};\n\nexport const calculateMenuHeight = (\n  itemLength: number,\n  separatorCount: number\n) => {\n  'worklet';\n  return (\n    MenuItemHeight() * itemLength +\n    (itemLength - 1) +\n    separatorCount * styleGuide.spacing\n  );\n};\n\nexport type TransformOriginAnchorPosition =\n  | 'top-right'\n  | 'top-left'\n  | 'top-center'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'bottom-center';\n\nexport const menuAnimationAnchor = (\n  anchorPoint: TransformOriginAnchorPosition,\n  itemWidth: number,\n  itemLength: number,\n  itemsWithSeparatorLength: number\n) => {\n  'worklet';\n  const MenuHeight = calculateMenuHeight(itemLength, itemsWithSeparatorLength);\n  const splittetAnchorName: string[] = anchorPoint.split('-');\n\n  const Center1 = itemWidth;\n  const Center2 = 0;\n\n  const TyTop1 = -(MenuHeight / 2);\n  const TyTop2 = MenuHeight / 2;\n\n  const TxLeft1 = (MENU_WIDTH / 2) * -1;\n  const TxLeft2 = (MENU_WIDTH / 2) * 1;\n\n  return {\n    beginningTransformations: {\n      translateX:\n        splittetAnchorName[1] === 'right'\n          ? -TxLeft1\n          : splittetAnchorName[1] === 'left'\n          ? TxLeft1\n          : Center1,\n      translateY:\n        splittetAnchorName[0] === 'top'\n          ? TyTop1\n          : splittetAnchorName[0] === 'bottom'\n          ? TyTop1\n          : Center2,\n    },\n    endingTransformations: {\n      translateX:\n        splittetAnchorName[1] === 'right'\n          ? -TxLeft2\n          : splittetAnchorName[1] === 'left'\n          ? TxLeft2\n          : Center2,\n      translateY:\n        splittetAnchorName[0] === 'top'\n          ? TyTop2\n          : splittetAnchorName[0] === 'bottom'\n          ? -TyTop2\n          : Center2,\n    },\n  };\n};\n\nexport const calculateDynamicTransformValue = (\n  itemY: number,\n  itemHeight: number,\n  menuHeight: number,\n  customViewHeight: number,\n  anchorPosition: TransformOriginAnchorPosition,\n  screenHeight: number,\n  safeAreaTop: number,\n  safeAreaBottom: number\n): number => {\n  'worklet';\n  const GAP = styleGuide.spacing;\n  const isAnchorTop = anchorPosition.includes('top');\n\n  if (isAnchorTop) {\n    // Menu below item, custom view above item\n    // Total space needed below item: itemHeight + gap + menuHeight + safeAreaBottom\n    // Total space needed above item: customViewHeight + gap + safeAreaTop\n    const bottomEdge = itemY + itemHeight + GAP + menuHeight + safeAreaBottom;\n    const topEdge = itemY - GAP - customViewHeight - safeAreaTop;\n\n    let tY = 0;\n\n    // If bottom overflows screen\n    if (bottomEdge > screenHeight) {\n      tY = screenHeight - bottomEdge;\n    }\n    // After shifting, check if custom view goes above safe area\n    if (topEdge + tY < 0) {\n      tY = -topEdge;\n    }\n    return tY;\n  } else {\n    // Menu above item, custom view below item\n    // Total space needed above item: menuHeight + gap + safeAreaTop\n    // Total space needed below item: itemHeight + gap + customViewHeight + safeAreaBottom\n    const topEdge = itemY - GAP - menuHeight - safeAreaTop;\n    const bottomEdge =\n      itemY + itemHeight + GAP + customViewHeight + safeAreaBottom;\n\n    let tY = 0;\n    // If top overflows screen (goes above safe area)\n    if (topEdge < 0) {\n      tY = -topEdge;\n    }\n    // After shifting, check if custom view goes below screen\n    if (bottomEdge + tY > screenHeight) {\n      tY = screenHeight - bottomEdge;\n    }\n    return tY;\n  }\n};\n\nexport const getTransformOrigin = (\n  posX: number,\n  itemWidth: number,\n  windowWidth: number,\n  bottom?: boolean\n): TransformOriginAnchorPosition => {\n  'worklet';\n  const distanceToLeft = Math.round(posX + itemWidth / 2);\n  const distanceToRight = Math.round(windowWidth - distanceToLeft);\n\n  let position: TransformOriginAnchorPosition = bottom\n    ? 'bottom-right'\n    : 'top-right';\n\n  const majority = Math.abs(distanceToLeft - distanceToRight);\n\n  if (majority < MENU_TRANSFORM_ORIGIN_TOLERENCE) {\n    position = bottom ? 'bottom-center' : 'top-center';\n  } else if (distanceToLeft < distanceToRight) {\n    position = bottom ? 'bottom-left' : 'top-left';\n  }\n\n  return position;\n};\n"]}

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/types.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-hold-menu-actions",
-  "version": "0.1.15",
+  "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

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

package/src/components/holdItem/HoldItem.tsx

@@ -35,6 +35,7 @@ import {
   TransformOriginAnchorPosition,
   getTransformOrigin,
   calculateMenuHeight,
+  calculateDynamicTransformValue,
 } from '../../utils/calculations';
 import {
   HOLD_ITEM_TRANSFORM_DURATION,
@@ -195,6 +196,7 @@ const HoldItemComponent = ({
       menuHeight: menuHeight,
       items: items || [],
       transformValue: transformValue.value,
+      customViewHeight: 0,
       actionParams: actionParams || {},
       hasCustomView: !!renderCustomView,
     };
@@ -332,7 +334,18 @@ const HoldItemComponent = ({
     const animateOpacity = () =>
       withDelay(HOLD_ITEM_TRANSFORM_DURATION, withTiming(0, { duration: 0 }));
 
-    let tY = calculateTransformValue();
+    const screenH =
+      deviceOrientation === 'portrait' ? WINDOW_HEIGHT : WINDOW_WIDTH;
+    let tY = calculateDynamicTransformValue(
+      itemRectY.value,
+      itemRectHeight.value,
+      menuHeight,
+      menuProps.value.customViewHeight,
+      transformOrigin.value,
+      screenH,
+      safeAreaInsets?.top || 0,
+      safeAreaInsets?.bottom || 0
+    );
     const transformAnimation = () =>
       disableMove
         ? 0

package/src/components/menu/Menu.tsx

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

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

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

package/src/components/provider/Provider.tsx

@@ -1,6 +1,10 @@
 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
@@ -47,6 +51,7 @@ const ProviderComponent = ({
     anchorPosition: 'top-center',
     menuHeight: 0,
     transformValue: 0,
+    customViewHeight: 0,
     actionParams: {},
     hasCustomView: false,
   });
@@ -62,14 +67,12 @@ const ProviderComponent = ({
     state => {
       switch (state) {
         case CONTEXT_MENU_STATE.ACTIVE: {
-          if (onOpen)
-            runOnJS(onOpen)();
-          break
+          if (onOpen) runOnJS(onOpen)();
+          break;
         }
         case CONTEXT_MENU_STATE.END: {
-          if (onClose)
-            runOnJS(onClose)();
-          break
+          if (onClose) runOnJS(onClose)();
+          break;
         }
       }
     },

package/src/utils/calculations.ts

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