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

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuList.tsx"],"names":["React","StyleSheet","Animated","runOnJS","useAnimatedProps","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","withTiming","calculateMenuHeight","menuAnimationAnchor","BlurView","MenuItems","SPRING_CONFIGURATION_MENU","HOLD_ITEM_TRANSFORM_DURATION","IS_IOS","CONTEXT_MENU_STATE","styles","useInternal","deepEqual","leftOrRight","AnimatedView","createAnimatedComponent","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","backgroundColor","animatedProps","blurType","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  useAnimatedProps,\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';\nimport { BlurView } from '@react-native-community/blur';\n\nimport MenuItems from './MenuItems';\n\nimport {\n  SPRING_CONFIGURATION_MENU,\n  HOLD_ITEM_TRANSFORM_DURATION,\n  IS_IOS,\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 AnimatedView = Animated.createAnimatedComponent(BlurView);\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    return {\n      backgroundColor:\n        theme.value === 'light'\n          ? IS_IOS\n            ? 'rgba(255, 255, 255, .75)'\n            : 'rgba(255, 255, 255, .95)'\n          : IS_IOS\n          ? 'rgba(0,0,0,0.5)'\n          : 'rgba(39, 39, 39, .8)',\n    };\n  }, [theme]);\n\n  const animatedProps = useAnimatedProps(() => {\n    return { blurType: theme.value };\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    <AnimatedView\n      blurAmount={100}\n      animatedProps={animatedProps}\n      style={[styles.menuContainer, messageStyles]}\n    >\n      <Animated.View\n        style={[\n          StyleSheet.absoluteFillObject,\n          styles.menuInnerContainer,\n          animatedInnerContainerStyle,\n        ]}\n      >\n        <MenuItems items={itemList} />\n      </Animated.View>\n    </AnimatedView>\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":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,eAJF,EAKEC,cALF,EAMEC,UANF,EAOEC,UAPF,QAQO,yBARP;AAUA,SACEC,mBADF,EAEEC,mBAFF,QAGO,0BAHP;AAKA,OAAOC,SAAP,MAAsB,aAAtB;AAEA,SACEC,yBADF,EAEEC,4BAFF,EAGEC,kBAHF,QAIO,iBAJP;AAMA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,SAASC,WAAT,QAA4B,aAA5B;AACA,SAASC,SAAT,QAA0B,yBAA1B;AACA,SAASC,WAAT,QAA4B,gBAA5B;;AAEA,MAAMC,iBAAiB,GAAG,MAAM;AAC9B,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,KAAT;AAAgBC,IAAAA;AAAhB,MAA8BN,WAAW,EAA/C;AAEA,QAAM,CAACO,QAAD,EAAWC,WAAX,IAA0BzB,KAAK,CAAC0B,QAAN,CAAgC,EAAhC,CAAhC;AAEA,QAAMC,UAAU,GAAGrB,eAAe,CAAC,MAAM;AACvC,UAAMsB,kBAAkB,GAAGL,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBC,MAAtB,CACzBC,IAAI,IAAIA,IAAI,CAACC,aADY,CAA3B;AAGA,WAAOvB,mBAAmB,CACxBa,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBI,MADE,EAExBN,kBAAkB,CAACM,MAFK,CAA1B;AAID,GARiC,EAQ/B,CAACX,SAAD,CAR+B,CAAlC;AASA,QAAMY,QAAQ,GAAG5B,cAAc,CAAkB,EAAlB,CAA/B;AAEA,QAAM6B,aAAa,GAAG/B,gBAAgB,CAAC,MAAM;AAC3C,UAAMuB,kBAAkB,GAAGL,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBC,MAAtB,CACzBC,IAAI,IAAIA,IAAI,CAACC,aADY,CAA3B;AAIA,UAAMI,SAAS,GAAG1B,mBAAmB,CACnCY,SAAS,CAACM,KAAV,CAAgBS,cADmB,EAEnCf,SAAS,CAACM,KAAV,CAAgBU,SAFmB,EAGnChB,SAAS,CAACM,KAAV,CAAgBC,KAAhB,CAAsBI,MAHa,EAInCN,kBAAkB,CAACM,MAJgB,CAArC;;AAOA,UAAMM,aAAa,GAAGrB,WAAW,CAACI,SAAD,CAAjC;;AAEA,UAAMkB,kBAAkB,GAAG,MACzBpB,KAAK,CAACQ,KAAN,KAAgBd,kBAAkB,CAAC2B,MAAnC,GACIlC,UAAU,CAAC,CAAD,EAAIK,yBAAJ,CADd,GAEIJ,UAAU,CAAC,CAAD,EAAI;AACZkC,MAAAA,QAAQ,EAAE7B;AADE,KAAJ,CAHhB;;AAOA,UAAM8B,gBAAgB,GAAG,MACvBnC,UAAU,CAACY,KAAK,CAACQ,KAAN,KAAgBd,kBAAkB,CAAC2B,MAAnC,GAA4C,CAA5C,GAAgD,CAAjD,EAAoD;AAC5DC,MAAAA,QAAQ,EAAE7B;AADkD,KAApD,CADZ;;AAKA,WAAO;AACL+B,MAAAA,IAAI,EAAEL,aADD;AAELM,MAAAA,MAAM,EAAEnB,UAAU,CAACE,KAFd;AAGLkB,MAAAA,OAAO,EAAEH,gBAAgB,EAHpB;AAILI,MAAAA,SAAS,EAAE,CACT;AAAEC,QAAAA,UAAU,EAAEZ,SAAS,CAACa,wBAAV,CAAmCD;AAAjD,OADS,EAET;AAAEE,QAAAA,UAAU,EAAEd,SAAS,CAACa,wBAAV,CAAmCC;AAAjD,OAFS,EAGT;AACEC,QAAAA,KAAK,EAAEX,kBAAkB;AAD3B,OAHS,EAMT;AAAEQ,QAAAA,UAAU,EAAEZ,SAAS,CAACgB,qBAAV,CAAgCJ;AAA9C,OANS,EAOT;AAAEE,QAAAA,UAAU,EAAEd,SAAS,CAACgB,qBAAV,CAAgCF;AAA9C,OAPS;AAJN,KAAP;AAcD,GAxCqC,CAAtC;AA0CA,QAAMG,2BAA2B,GAAGjD,gBAAgB,CAAC,MAAM;AACzD,UAAMkD,KAAK,GAAGjC,KAAK,CAACO,KAAN,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,SAAjD;AACA,WAAO;AACL2B,MAAAA,eAAe,EAAED;AADZ,KAAP;AAGD,GALmD,EAKjD,CAACjC,KAAD,CALiD,CAApD;;AAOA,QAAMmC,MAAM,GAAI3B,KAAD,IAA4B;AACzCL,IAAAA,WAAW,CAACK,KAAD,CAAX;AACAK,IAAAA,QAAQ,CAACN,KAAT,GAAiBC,KAAjB;AACD,GAHD;;AAKA1B,EAAAA,mBAAmB,CACjB,MAAMmB,SAAS,CAACM,KAAV,CAAgBC,KADL,EAEjB4B,MAAM,IAAI;AACR,QAAI,CAACxC,SAAS,CAACwC,MAAD,EAASvB,QAAQ,CAACN,KAAlB,CAAd,EAAwC;AACtC1B,MAAAA,OAAO,CAACsD,MAAD,CAAP,CAAgBC,MAAhB;AACD;AACF,GANgB,EAOjB,CAACnC,SAAD,CAPiB,CAAnB;AAUA,MAAIC,QAAQ,CAACU,MAAT,KAAoB,CAAxB,EAA2B,OAAO,IAAP;AAE3B,sBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAAClB,MAAM,CAAC2C,aAAR,EAAuBvB,aAAvB;AAAtB,kBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACLnC,UAAU,CAAC2D,kBADN,EAEL5C,MAAM,CAAC6C,kBAFF,EAGLP,2BAHK;AADT,kBAOE,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAE9B;AAAlB,IAPF,CADF,CADF;AAaD,CA/FD;;AAiGA,MAAMsC,QAAQ,gBAAG9D,KAAK,CAAC+D,IAAN,CAAW3C,iBAAX,CAAjB;AAEA,eAAe0C,QAAf","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"]}

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

@@ -31,6 +31,7 @@ const ProviderComponent = ({
     anchorPosition: 'top-center',
     menuHeight: 0,
     transformValue: 0,
+    customViewHeight: 0,
     actionParams: {},
     hasCustomView: false
   });

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

@@ -1 +1 @@
-{"version":3,"sources":["Provider.tsx"],"names":["React","memo","useEffect","useMemo","useRef","PortalProvider","Animated","useSharedValue","useAnimatedReaction","runOnJS","GestureHandlerRootView","Backdrop","InternalContext","CONTEXT_MENU_STATE","Menu","CustomView","AnimatedIcon","ProviderComponent","children","theme","selectedTheme","iconComponent","safeAreaInsets","onOpen","onClose","createAnimatedComponent","state","UNDETERMINED","menuProps","itemHeight","itemWidth","itemX","itemY","items","anchorPosition","menuHeight","transformValue","actionParams","hasCustomView","customViewRef","value","ACTIVE","END","internalContextVariables","top","bottom","left","right","flex","Provider"],"mappings":"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","sourcesContent":["import React, { memo, useEffect, useMemo, useRef } from 'react';\nimport { PortalProvider } from '@gorhom/portal';\nimport Animated, { useSharedValue, useAnimatedReaction, runOnJS } from 'react-native-reanimated';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\n\n// Components\nimport { Backdrop } from '../backdrop';\n\n// Utils\nimport { InternalContext } from '../../context/internal';\nimport { HoldMenuProviderProps } from './types';\nimport { StateProps, Action } from './reducer';\nimport { CONTEXT_MENU_STATE } from '../../constants';\nimport { MenuInternalProps } from '../menu/types';\nimport Menu from '../menu';\nimport CustomView from '../customView/CustomView';\nimport { RenderCustomView } from '../menu/types';\n\nexport interface Store {\n  state: StateProps;\n  dispatch?: React.Dispatch<Action>;\n}\n\nexport let AnimatedIcon: any;\n\nconst ProviderComponent = ({\n  children,\n  theme: selectedTheme,\n  iconComponent,\n  safeAreaInsets,\n  onOpen,\n  onClose,\n}: HoldMenuProviderProps) => {\n  if (iconComponent)\n    AnimatedIcon = Animated.createAnimatedComponent(iconComponent);\n\n  const state = useSharedValue<CONTEXT_MENU_STATE>(\n    CONTEXT_MENU_STATE.UNDETERMINED\n  );\n  const theme = useSharedValue<'light' | 'dark'>(selectedTheme || 'light');\n  const menuProps = useSharedValue<MenuInternalProps>({\n    itemHeight: 0,\n    itemWidth: 0,\n    itemX: 0,\n    itemY: 0,\n    items: [],\n    anchorPosition: 'top-center',\n    menuHeight: 0,\n    transformValue: 0,\n    actionParams: {},\n    hasCustomView: false,\n  });\n  const customViewRef = useRef<RenderCustomView | null>(null);\n\n  useEffect(() => {\n    theme.value = selectedTheme || 'light';\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedTheme]);\n\n  useAnimatedReaction(\n    () => state.value,\n    state => {\n      switch (state) {\n        case CONTEXT_MENU_STATE.ACTIVE: {\n          if (onOpen)\n            runOnJS(onOpen)();\n          break\n        }\n        case CONTEXT_MENU_STATE.END: {\n          if (onClose)\n            runOnJS(onClose)();\n          break\n        }\n      }\n    },\n    [state]\n  );\n\n  const internalContextVariables = useMemo(\n    () => ({\n      state,\n      theme,\n      menuProps,\n      customViewRef,\n      safeAreaInsets: safeAreaInsets || {\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n      },\n    }),\n    [state, theme, menuProps, safeAreaInsets]\n  );\n\n  return (\n    <GestureHandlerRootView style={{ flex: 1 }}>\n      <InternalContext.Provider value={internalContextVariables}>\n        <PortalProvider>\n          {children}\n          <Backdrop />\n          <Menu />\n          <CustomView />\n        </PortalProvider>\n      </InternalContext.Provider>\n    </GestureHandlerRootView>\n  );\n};\n\nconst Provider = memo(ProviderComponent);\n\nexport default Provider;\n"]}
+{"version":3,"sources":["Provider.tsx"],"names":["React","memo","useEffect","useMemo","useRef","PortalProvider","Animated","useSharedValue","useAnimatedReaction","runOnJS","GestureHandlerRootView","Backdrop","InternalContext","CONTEXT_MENU_STATE","Menu","CustomView","AnimatedIcon","ProviderComponent","children","theme","selectedTheme","iconComponent","safeAreaInsets","onOpen","onClose","createAnimatedComponent","state","UNDETERMINED","menuProps","itemHeight","itemWidth","itemX","itemY","items","anchorPosition","menuHeight","transformValue","customViewHeight","actionParams","hasCustomView","customViewRef","value","ACTIVE","END","internalContextVariables","top","bottom","left","right","flex","Provider"],"mappings":"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","sourcesContent":["import React, { memo, useEffect, useMemo, useRef } from 'react';\nimport { PortalProvider } from '@gorhom/portal';\nimport Animated, {\n  useSharedValue,\n  useAnimatedReaction,\n  runOnJS,\n} from 'react-native-reanimated';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\n\n// Components\nimport { Backdrop } from '../backdrop';\n\n// Utils\nimport { InternalContext } from '../../context/internal';\nimport { HoldMenuProviderProps } from './types';\nimport { StateProps, Action } from './reducer';\nimport { CONTEXT_MENU_STATE } from '../../constants';\nimport { MenuInternalProps } from '../menu/types';\nimport Menu from '../menu';\nimport CustomView from '../customView/CustomView';\nimport { RenderCustomView } from '../menu/types';\n\nexport interface Store {\n  state: StateProps;\n  dispatch?: React.Dispatch<Action>;\n}\n\nexport let AnimatedIcon: any;\n\nconst ProviderComponent = ({\n  children,\n  theme: selectedTheme,\n  iconComponent,\n  safeAreaInsets,\n  onOpen,\n  onClose,\n}: HoldMenuProviderProps) => {\n  if (iconComponent)\n    AnimatedIcon = Animated.createAnimatedComponent(iconComponent);\n\n  const state = useSharedValue<CONTEXT_MENU_STATE>(\n    CONTEXT_MENU_STATE.UNDETERMINED\n  );\n  const theme = useSharedValue<'light' | 'dark'>(selectedTheme || 'light');\n  const menuProps = useSharedValue<MenuInternalProps>({\n    itemHeight: 0,\n    itemWidth: 0,\n    itemX: 0,\n    itemY: 0,\n    items: [],\n    anchorPosition: 'top-center',\n    menuHeight: 0,\n    transformValue: 0,\n    customViewHeight: 0,\n    actionParams: {},\n    hasCustomView: false,\n  });\n  const customViewRef = useRef<RenderCustomView | null>(null);\n\n  useEffect(() => {\n    theme.value = selectedTheme || 'light';\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedTheme]);\n\n  useAnimatedReaction(\n    () => state.value,\n    state => {\n      switch (state) {\n        case CONTEXT_MENU_STATE.ACTIVE: {\n          if (onOpen) runOnJS(onOpen)();\n          break;\n        }\n        case CONTEXT_MENU_STATE.END: {\n          if (onClose) runOnJS(onClose)();\n          break;\n        }\n      }\n    },\n    [state]\n  );\n\n  const internalContextVariables = useMemo(\n    () => ({\n      state,\n      theme,\n      menuProps,\n      customViewRef,\n      safeAreaInsets: safeAreaInsets || {\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n      },\n    }),\n    [state, theme, menuProps, safeAreaInsets]\n  );\n\n  return (\n    <GestureHandlerRootView style={{ flex: 1 }}>\n      <InternalContext.Provider value={internalContextVariables}>\n        <PortalProvider>\n          {children}\n          <Backdrop />\n          <Menu />\n          <CustomView />\n        </PortalProvider>\n      </InternalContext.Provider>\n    </GestureHandlerRootView>\n  );\n};\n\nconst Provider = memo(ProviderComponent);\n\nexport default Provider;\n"]}

package/lib/module/utils/calculations.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["calculations.ts"],"names":["styleGuide","MENU_WIDTH","MENU_TRANSFORM_ORIGIN_TOLERENCE","FONT_SCALE","MenuItemHeight","typography","callout","lineHeight","spacing","calculateMenuHeight","itemLength","separatorCount","menuAnimationAnchor","anchorPoint","itemWidth","itemsWithSeparatorLength","MenuHeight","splittetAnchorName","split","Center1","Center2","TyTop1","TyTop2","TxLeft1","TxLeft2","beginningTransformations","translateX","translateY","endingTransformations","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/menu/MenuList.d.ts

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

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.14",
+  "version": "0.1.16",
   "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/customView/CustomView.tsx

@@ -5,6 +5,7 @@ import Animated, {
   runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
+  useSharedValue,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
@@ -16,31 +17,40 @@ import {
   SPRING_CONFIGURATION,
   SPRING_CONFIGURATION_MENU,
   WINDOW_WIDTH,
+  WINDOW_HEIGHT,
 } from '../../constants';
 import { RenderCustomView } from '../menu/types';
+import { calculateDynamicTransformValue } from '../../utils/calculations';
 
 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 isActive = useSharedValue(false);
+
   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;
+      setCustomViewHeight(height);
+      setCustomViewWidth(width);
+      menuProps.value = { ...menuProps.value, customViewHeight: height };
+    },
+    [menuProps]
+  );
 
   const clearRenderFn = useCallback(() => {
     setRenderFn(null);
     setCustomViewHeight(0);
     setCustomViewWidth(0);
-  }, []);
+    menuProps.value = { ...menuProps.value, customViewHeight: 0 };
+  }, [menuProps]);
 
   const updateRenderFn = useCallback(
     (hasCustomView: boolean) => {
@@ -60,14 +70,33 @@ 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(() => {
+    return {
+      opacity: withTiming(isActive.value ? 1 : 0, {
+        duration: HOLD_ITEM_TRANSFORM_DURATION,
+      }),
+      transform: [
+        {
+          scale: isActive.value
+            ? 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';
@@ -94,7 +123,16 @@ const CustomViewComponent = () => {
     if (left < SCREEN_PADDING) {
       left = SCREEN_PADDING;
     }
-    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
+    );
 
     // Positional offset via translateY:
     // above item: shift up by customViewHeight + gap
@@ -103,40 +141,15 @@ const CustomViewComponent = () => {
       ? -(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 }
-    );
-
-    // Scale anchor: scale from the edge closest to the item
-    const scaleAnchorOffset = isAbove
-      ? customViewHeight / 2
-      : -(customViewHeight / 2);
-
     return {
       top,
       left,
       maxWidth: MAX_WIDTH,
-      opacity: opacityAnimation,
       transform: [
         // 1. Transform value (screen boundary compensation)
-        {
-          translateY:
-            state.value === CONTEXT_MENU_STATE.ACTIVE
-              ? withSpring(tY, SPRING_CONFIGURATION)
-              : withTiming(0, { duration: HOLD_ITEM_TRANSFORM_DURATION }),
-        },
+        { translateY: withSpring(tY, SPRING_CONFIGURATION) },
         // 2. Position offset (animated when customViewHeight changes)
         { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },
-        // 3. Scale anchor: move to edge -> scale -> move back
-        { translateY: scaleAnchorOffset },
-        { scale: scaleAnimation },
-        { translateY: -scaleAnchorOffset },
       ],
     };
   }, [menuProps, customViewHeight, customViewWidth]);
@@ -145,8 +158,10 @@ const CustomViewComponent = () => {
 
   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>
   );

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/MenuList.tsx

@@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native';
 
 import Animated, {
   runOnJS,
-  useAnimatedProps,
   useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
@@ -16,14 +15,12 @@ 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';
 
@@ -33,8 +30,6 @@ 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();
 
@@ -94,22 +89,12 @@ const MenuListComponent = () => {
   });
 
   const animatedInnerContainerStyle = useAnimatedStyle(() => {
+    const color = theme.value === 'light' ? '#fff' : '#1A1A1A';
     return {
-      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)',
+      backgroundColor: color,
     };
   }, [theme]);
 
-  const animatedProps = useAnimatedProps(() => {
-    return { blurType: theme.value };
-  }, [theme]);
-
   const setter = (items: MenuItemProps[]) => {
     setItemList(items);
     prevList.value = items;
@@ -126,11 +111,7 @@ const MenuListComponent = () => {
   );
 
   return (
-    <AnimatedView
-      blurAmount={100}
-      animatedProps={animatedProps}
-      style={[styles.menuContainer, messageStyles]}
-    >
+    <Animated.View style={[styles.menuContainer, messageStyles]}>
       <Animated.View
         style={[
           StyleSheet.absoluteFillObject,
@@ -140,7 +121,7 @@ const MenuListComponent = () => {
       >
         <MenuItems items={itemList} />
       </Animated.View>
-    </AnimatedView>
+    </Animated.View>
   );
 };
 

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,