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

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

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

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

@@ -8,7 +8,7 @@ import { Backdrop } from '../backdrop'; // Utils
 import { InternalContext } from '../../context/internal';
 import { CONTEXT_MENU_STATE } from '../../constants';
 import Menu from '../menu';
-import Content from './Content';
+import CustomView from '../customView/CustomView';
 export let AnimatedIcon;
 
 const ProviderComponent = ({
@@ -31,9 +31,10 @@ const ProviderComponent = ({
     anchorPosition: 'top-center',
     menuHeight: 0,
     transformValue: 0,
-    actionParams: {}
+    actionParams: {},
+    hasCustomView: false
   });
-  const contentRenderer = useRef(null);
+  const customViewRef = useRef(null);
   useEffect(() => {
     theme.value = selectedTheme || 'light'; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedTheme]);
@@ -56,7 +57,7 @@ const ProviderComponent = ({
     state,
     theme,
     menuProps,
-    contentRenderer,
+    customViewRef,
     safeAreaInsets: safeAreaInsets || {
       top: 0,
       bottom: 0,
@@ -70,7 +71,7 @@ const ProviderComponent = ({
     }
   }, /*#__PURE__*/React.createElement(InternalContext.Provider, {
     value: internalContextVariables
-  }, /*#__PURE__*/React.createElement(PortalProvider, null, children, /*#__PURE__*/React.createElement(Backdrop, null), /*#__PURE__*/React.createElement(Menu, null), /*#__PURE__*/React.createElement(Content, null))));
+  }, /*#__PURE__*/React.createElement(PortalProvider, null, children, /*#__PURE__*/React.createElement(Backdrop, null), /*#__PURE__*/React.createElement(Menu, null), /*#__PURE__*/React.createElement(CustomView, null))));
 };
 
 const Provider = /*#__PURE__*/memo(ProviderComponent);

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","Content","AnimatedIcon","ProviderComponent","children","theme","selectedTheme","iconComponent","safeAreaInsets","onOpen","onClose","createAnimatedComponent","state","UNDETERMINED","menuProps","itemHeight","itemWidth","itemX","itemY","items","anchorPosition","menuHeight","transformValue","actionParams","contentRenderer","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 Content from './Content';\n\nexport interface Store {\n  state: StateProps;\n  dispatch?: React.Dispatch<Action>;\n}\n\nexport let AnimatedIcon: any;\n\nconst ProviderComponent: React.FC<HoldMenuProviderProps> = ({\n  children,\n  theme: selectedTheme,\n  iconComponent,\n  safeAreaInsets,\n  onOpen,\n  onClose,\n}) => {\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  });\n  const contentRenderer = useRef<((params: any) => React.ReactNode) | null>(\n    null\n  );\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      contentRenderer,\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          <Content />\n        </PortalProvider>\n      </InternalContext.Provider>\n    </GestureHandlerRootView>\n  );\n};\n\nconst Provider = memo(ProviderComponent) as React.FC<HoldMenuProviderProps>;\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","actionParams","hasCustomView","customViewRef","value","ACTIVE","END","internalContextVariables","top","bottom","left","right","flex","Provider"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,IAAhB,EAAsBC,SAAtB,EAAiCC,OAAjC,EAA0CC,MAA1C,QAAwD,OAAxD;AACA,SAASC,cAAT,QAA+B,gBAA/B;AACA,OAAOC,QAAP,IAAmBC,cAAnB,EAAmCC,mBAAnC,EAAwDC,OAAxD,QAAuE,yBAAvE;AACA,SAASC,sBAAT,QAAuC,8BAAvC,C,CAEA;;AACA,SAASC,QAAT,QAAyB,aAAzB,C,CAEA;;AACA,SAASC,eAAT,QAAgC,wBAAhC;AAGA,SAASC,kBAAT,QAAmC,iBAAnC;AAEA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,UAAP,MAAuB,0BAAvB;AAQA,OAAO,IAAIC,YAAJ;;AAEP,MAAMC,iBAAiB,GAAG,CAAC;AACzBC,EAAAA,QADyB;AAEzBC,EAAAA,KAAK,EAAEC,aAFkB;AAGzBC,EAAAA,aAHyB;AAIzBC,EAAAA,cAJyB;AAKzBC,EAAAA,MALyB;AAMzBC,EAAAA;AANyB,CAAD,KAOG;AAC3B,MAAIH,aAAJ,EACEL,YAAY,GAAGV,QAAQ,CAACmB,uBAAT,CAAiCJ,aAAjC,CAAf;AAEF,QAAMK,KAAK,GAAGnB,cAAc,CAC1BM,kBAAkB,CAACc,YADO,CAA5B;AAGA,QAAMR,KAAK,GAAGZ,cAAc,CAAmBa,aAAa,IAAI,OAApC,CAA5B;AACA,QAAMQ,SAAS,GAAGrB,cAAc,CAAoB;AAClDsB,IAAAA,UAAU,EAAE,CADsC;AAElDC,IAAAA,SAAS,EAAE,CAFuC;AAGlDC,IAAAA,KAAK,EAAE,CAH2C;AAIlDC,IAAAA,KAAK,EAAE,CAJ2C;AAKlDC,IAAAA,KAAK,EAAE,EAL2C;AAMlDC,IAAAA,cAAc,EAAE,YANkC;AAOlDC,IAAAA,UAAU,EAAE,CAPsC;AAQlDC,IAAAA,cAAc,EAAE,CARkC;AASlDC,IAAAA,YAAY,EAAE,EAToC;AAUlDC,IAAAA,aAAa,EAAE;AAVmC,GAApB,CAAhC;AAYA,QAAMC,aAAa,GAAGnC,MAAM,CAA0B,IAA1B,CAA5B;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACdiB,IAAAA,KAAK,CAACqB,KAAN,GAAcpB,aAAa,IAAI,OAA/B,CADc,CAEd;AACD,GAHQ,EAGN,CAACA,aAAD,CAHM,CAAT;AAKAZ,EAAAA,mBAAmB,CACjB,MAAMkB,KAAK,CAACc,KADK,EAEjBd,KAAK,IAAI;AACP,YAAQA,KAAR;AACE,WAAKb,kBAAkB,CAAC4B,MAAxB;AAAgC;AAC9B,cAAIlB,MAAJ,EACEd,OAAO,CAACc,MAAD,CAAP;AACF;AACD;;AACD,WAAKV,kBAAkB,CAAC6B,GAAxB;AAA6B;AAC3B,cAAIlB,OAAJ,EACEf,OAAO,CAACe,OAAD,CAAP;AACF;AACD;AAVH;AAYD,GAfgB,EAgBjB,CAACE,KAAD,CAhBiB,CAAnB;AAmBA,QAAMiB,wBAAwB,GAAGxC,OAAO,CACtC,OAAO;AACLuB,IAAAA,KADK;AAELP,IAAAA,KAFK;AAGLS,IAAAA,SAHK;AAILW,IAAAA,aAJK;AAKLjB,IAAAA,cAAc,EAAEA,cAAc,IAAI;AAChCsB,MAAAA,GAAG,EAAE,CAD2B;AAEhCC,MAAAA,MAAM,EAAE,CAFwB;AAGhCC,MAAAA,IAAI,EAAE,CAH0B;AAIhCC,MAAAA,KAAK,EAAE;AAJyB;AAL7B,GAAP,CADsC,EAatC,CAACrB,KAAD,EAAQP,KAAR,EAAeS,SAAf,EAA0BN,cAA1B,CAbsC,CAAxC;AAgBA,sBACE,oBAAC,sBAAD;AAAwB,IAAA,KAAK,EAAE;AAAE0B,MAAAA,IAAI,EAAE;AAAR;AAA/B,kBACE,oBAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAEL;AAAjC,kBACE,oBAAC,cAAD,QACGzB,QADH,eAEE,oBAAC,QAAD,OAFF,eAGE,oBAAC,IAAD,OAHF,eAIE,oBAAC,UAAD,OAJF,CADF,CADF,CADF;AAYD,CAjFD;;AAmFA,MAAM+B,QAAQ,gBAAGhD,IAAI,CAACgB,iBAAD,CAArB;AAEA,eAAegC,QAAf","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"]}

package/lib/module/context/internal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["internal.ts"],"names":["createContext","InternalContext"],"mappings":"AAAA,SAASA,aAAT,QAA8B,OAA9B;AAuBA;AACA,OAAO,MAAMC,eAAe,gBAAGD,aAAa,EAArC","sourcesContent":["import { createContext } from 'react';\nimport type { MutableRefObject } from 'react';\nimport type Animated from 'react-native-reanimated';\nimport type { CONTEXT_MENU_STATE } from '../constants';\nimport { MenuInternalProps } from '../components/menu/types';\n\nexport type ContentRendererRef = MutableRefObject<\n  ((params: any) => React.ReactNode) | null\n>;\n\nexport type InternalContextType = {\n  state: Animated.SharedValue<CONTEXT_MENU_STATE>;\n  theme: Animated.SharedValue<'light' | 'dark'>;\n  menuProps: Animated.SharedValue<MenuInternalProps>;\n  contentRenderer: ContentRendererRef;\n  safeAreaInsets?: {\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n  };\n};\n\n// @ts-ignore\nexport const InternalContext = createContext<InternalContextType>();\n"]}
+{"version":3,"sources":["internal.ts"],"names":["createContext","InternalContext"],"mappings":"AAAA,SAASA,aAAT,QAAgD,OAAhD;AAkBA;AACA,OAAO,MAAMC,eAAe,gBAAGD,aAAa,EAArC","sourcesContent":["import { createContext, MutableRefObject } from 'react';\nimport type Animated from 'react-native-reanimated';\nimport type { CONTEXT_MENU_STATE } from '../constants';\nimport { MenuInternalProps, RenderCustomView } from '../components/menu/types';\n\nexport type InternalContextType = {\n  state: Animated.SharedValue<CONTEXT_MENU_STATE>;\n  theme: Animated.SharedValue<'light' | 'dark'>;\n  menuProps: Animated.SharedValue<MenuInternalProps>;\n  customViewRef: MutableRefObject<RenderCustomView | null>;\n  safeAreaInsets?: {\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n  };\n};\n\n// @ts-ignore\nexport const InternalContext = createContext<InternalContextType>();\n"]}

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","HoldItem","HoldMenuProvider","HoldMenuFlatList","HoldMenuIcon"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB,QAAoC,uBAApC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,uBAA5C;AACA,SAASF,OAAO,IAAIG,gBAApB,QAA4C,uBAA5C;AACA,SAASH,OAAO,IAAII,YAApB,QAAwC,mBAAxC","sourcesContent":["export { default as HoldItem } from './components/holdItem';\nexport { default as HoldMenuProvider } from './components/provider';\nexport { default as HoldMenuFlatList } from './components/flatList';\nexport { default as HoldMenuIcon } from './components/icon';\n\nexport type { HoldMenuProviderProps } from './components/provider';\nexport type {\n  HoldItemProps,\n  RenderContentParams,\n} from './components/holdItem/types';\n"]}
+{"version":3,"sources":["index.ts"],"names":["default","HoldItem","HoldMenuProvider","HoldMenuFlatList","HoldMenuIcon"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB,QAAoC,uBAApC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,uBAA5C;AACA,SAASF,OAAO,IAAIG,gBAApB,QAA4C,uBAA5C;AACA,SAASH,OAAO,IAAII,YAApB,QAAwC,mBAAxC","sourcesContent":["export { default as HoldItem } from './components/holdItem';\nexport { default as HoldMenuProvider } from './components/provider';\nexport { default as HoldMenuFlatList } from './components/flatList';\nexport { default as HoldMenuIcon } from './components/icon';\n"]}

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

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

package/lib/typescript/components/holdItem/HoldItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { HoldItemProps } from './types';
-declare const HoldItem: React.FC<HoldItemProps>;
+declare const HoldItem: React.MemoExoticComponent<({ items, renderCustomView, bottom, containerStyles, disableMove, menuAnchorPosition, activateOn, hapticFeedback, actionParams, closeOnTap, longPressMinDurationMs, children, }: HoldItemProps) => JSX.Element>;
 export default HoldItem;

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

@@ -1,12 +1,8 @@
 import { ViewStyle } from 'react-native';
-import { MenuItemProps } from '../menu/types';
+import { MenuItemProps, RenderCustomView } from '../menu/types';
 import { TransformOriginAnchorPosition } from '../../utils/calculations';
 
-export interface RenderContentParams {
-  closeMenu: () => void;
-}
-
-export type HoldItemProps = {
+type HoldItemBaseProps = {
   /**
    * List of context menu items.
    * @type MenuItemProps[]
@@ -14,6 +10,15 @@ export type HoldItemProps = {
    */
   items?: MenuItemProps[];
 
+  /**
+   * Render function for a custom view displayed on the opposite side of the menu.
+   * Receives { closeMenu } prop to programmatically close the context menu.
+   * @type RenderCustomView
+   * @examples
+   * renderCustomView={({ closeMenu }) => <ReactionsBar onSelect={() => closeMenu()} />}
+   */
+  renderCustomView?: RenderCustomView;
+
   /**
    * Object of keys that same name with items to match parameters to onPress actions.
    * @type { [name: string]: (string | number)[] }
@@ -128,17 +133,18 @@ export type HoldItemProps = {
    * longPressMinDurationMs={250}
    */
   longPressMinDurationMs?: number;
+};
 
-  /**
-   * Custom content renderer for this HoldItem.
-   * Allows to render custom content (e.g. reactions) above/below the menu.
-   * @type (params: RenderContentParams) => React.ReactNode
-   * @examples
-   * renderContent={({ closeMenu }) => <MyReactions onClose={closeMenu} />}
-   */
-  renderContent?: (params: RenderContentParams) => React.ReactNode;
+export type HoldItemWithItems = HoldItemBaseProps & {
+  items: MenuItemProps[];
 };
 
+export type HoldItemWithCustomView = HoldItemBaseProps & {
+  renderCustomView: RenderCustomView;
+};
+
+export type HoldItemProps = HoldItemWithItems | HoldItemWithCustomView;
+
 export type GestureHandlerProps = {
   children: React.ReactElement | React.ReactElement[];
 };

package/lib/typescript/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/lib/typescript/components/provider/Provider.d.ts

@@ -6,5 +6,5 @@ export interface Store {
     dispatch?: React.Dispatch<Action>;
 }
 export declare let AnimatedIcon: any;
-declare const Provider: React.FC<HoldMenuProviderProps>;
+declare const Provider: React.MemoExoticComponent<({ children, theme: selectedTheme, iconComponent, safeAreaInsets, onOpen, onClose, }: HoldMenuProviderProps) => JSX.Element>;
 export default Provider;

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

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

package/lib/typescript/context/internal.d.ts

@@ -1,13 +1,12 @@
-import type { MutableRefObject } from 'react';
+import { MutableRefObject } from 'react';
 import type Animated from 'react-native-reanimated';
 import type { CONTEXT_MENU_STATE } from '../constants';
-import { MenuInternalProps } from '../components/menu/types';
-export declare type ContentRendererRef = MutableRefObject<((params: any) => React.ReactNode) | null>;
+import { MenuInternalProps, RenderCustomView } from '../components/menu/types';
 export declare 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/lib/typescript/index.d.ts

@@ -2,5 +2,3 @@ export { default as HoldItem } from './components/holdItem';
 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, RenderContentParams, } from './components/holdItem/types';

package/package.json

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

@@ -71,10 +71,8 @@ const BackdropComponent = () => {
   );
 
   const animatedContainerStyle = useAnimatedStyle(() => {
-    const isActive = state.value === CONTEXT_MENU_STATE.ACTIVE;
-
     const topValueAnimation = () =>
-      isActive
+      state.value === CONTEXT_MENU_STATE.ACTIVE
         ? 0
         : withDelay(
             HOLD_ITEM_TRANSFORM_DURATION,
@@ -84,14 +82,13 @@ const BackdropComponent = () => {
           );
 
     const opacityValueAnimation = () =>
-      withTiming(isActive ? 1 : 0, {
+      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
         duration: HOLD_ITEM_TRANSFORM_DURATION,
       });
 
     return {
       top: topValueAnimation(),
       opacity: opacityValueAnimation(),
-      pointerEvents: isActive ? 'auto' : 'none',
     };
   });
 

package/src/components/customView/CustomView.tsx

@@ -0,0 +1,164 @@
+import React, { useCallback, useState } from 'react';
+import { LayoutChangeEvent, StyleSheet } from 'react-native';
+
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useInternal } from '../../hooks';
+import {
+  HOLD_ITEM_TRANSFORM_DURATION,
+  CONTEXT_MENU_STATE,
+  SPRING_CONFIGURATION,
+  SPRING_CONFIGURATION_MENU,
+  WINDOW_WIDTH,
+} from '../../constants';
+import { RenderCustomView } from '../menu/types';
+
+const CustomViewComponent = () => {
+  const { state, menuProps, customViewRef } = useInternal();
+
+  const [renderFn, setRenderFn] = useState<RenderCustomView | null>(null);
+  const [customViewHeight, setCustomViewHeight] = useState(0);
+  const [customViewWidth, setCustomViewWidth] = useState(0);
+
+  const closeMenu = useCallback(() => {
+    state.value = CONTEXT_MENU_STATE.END;
+  }, [state]);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height, width } = event.nativeEvent.layout;
+    setCustomViewHeight(height);
+    setCustomViewWidth(width);
+  }, []);
+
+  const clearRenderFn = useCallback(() => {
+    setRenderFn(null);
+    setCustomViewHeight(0);
+    setCustomViewWidth(0);
+  }, []);
+
+  const updateRenderFn = useCallback(
+    (hasCustomView: boolean) => {
+      if (hasCustomView && customViewRef.current) {
+        setRenderFn(() => customViewRef.current);
+      } else {
+        setTimeout(clearRenderFn, HOLD_ITEM_TRANSFORM_DURATION);
+      }
+    },
+    [customViewRef, clearRenderFn]
+  );
+
+  useAnimatedReaction(
+    () => ({
+      currentState: state.value,
+      hasCustomView: menuProps.value.hasCustomView,
+    }),
+    ({ currentState, hasCustomView }) => {
+      if (currentState === CONTEXT_MENU_STATE.ACTIVE && hasCustomView) {
+        runOnJS(updateRenderFn)(true);
+      } else if (currentState === CONTEXT_MENU_STATE.END) {
+        runOnJS(updateRenderFn)(false);
+      }
+    },
+    [state, menuProps]
+  );
+
+  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
+      );
+    }
+    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 }
+    );
+
+    // 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 }),
+        },
+        // 2. Position offset (animated when customViewHeight changes)
+        { translateY: withSpring(positionOffsetY, SPRING_CONFIGURATION_MENU) },
+        // 3. Scale anchor: move to edge -> scale -> move back
+        { translateY: scaleAnchorOffset },
+        { scale: scaleAnimation },
+        { translateY: -scaleAnchorOffset },
+      ],
+    };
+  }, [menuProps, customViewHeight, customViewWidth]);
+
+  if (!renderFn) return null;
+
+  return (
+    <Animated.View style={[styles.customViewWrapper, wrapperStyles]}>
+      <Animated.View onLayout={onLayout}>
+        {renderFn({ closeMenu })}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  customViewWrapper: {
+    position: 'absolute',
+    zIndex: 20,
+  },
+});
+
+const CustomView = React.memo(CustomViewComponent);
+
+export default CustomView;

package/src/components/holdItem/HoldItem.tsx

@@ -51,13 +51,13 @@ import styles from './styles';
 import type { HoldItemProps, GestureHandlerProps } from './types';
 import styleGuide from '../../styleGuide';
 import { useInternal } from '../../hooks';
-import { MenuItemProps } from '../menu/types';
 //#endregion
 
 type Context = { didMeasureLayout: boolean };
-const defaultItems = [] as MenuItemProps[];
-const HoldItemComponent: React.FC<HoldItemProps> = ({
-  items = defaultItems,
+
+const HoldItemComponent = ({
+  items,
+  renderCustomView,
   bottom,
   containerStyles,
   disableMove,
@@ -68,10 +68,9 @@ const HoldItemComponent: React.FC<HoldItemProps> = ({
   closeOnTap,
   longPressMinDurationMs = 150,
   children,
-  renderContent,
-}) => {
+}: HoldItemProps) => {
   //#region hooks
-  const { state, menuProps, safeAreaInsets, contentRenderer } = useInternal();
+  const { state, menuProps, customViewRef, safeAreaInsets } = useInternal();
   const deviceOrientation = useDeviceOrientation();
   //#endregion
 
@@ -92,6 +91,7 @@ const HoldItemComponent: React.FC<HoldItemProps> = ({
 
   const key = useMemo(() => `hold-item-${nanoid()}`, []);
   const menuHeight = useMemo(() => {
+    if (!items || items.length === 0) return 0;
     const itemsWithSeparator = items.filter(item => item.withSeparator);
     return calculateMenuHeight(items.length, itemsWithSeparator.length);
   }, [items]);
@@ -154,7 +154,7 @@ const HoldItemComponent: React.FC<HoldItemProps> = ({
     const height =
       deviceOrientation === 'portrait' ? WINDOW_HEIGHT : WINDOW_WIDTH;
 
-    const isAnchorPointTop = itemRectY.value > WINDOW_HEIGHT / 2;
+    const isAnchorPointTop = transformOrigin.value.includes('top');
 
     let tY = 0;
     if (!disableMove) {
@@ -177,9 +177,15 @@ const HoldItemComponent: React.FC<HoldItemProps> = ({
     return tY;
   };
 
+  const updateCustomViewRef = () => {
+    customViewRef.current = renderCustomView || null;
+  };
+
   const setMenuProps = () => {
     'worklet';
 
+    runOnJS(updateCustomViewRef)();
+
     menuProps.value = {
       itemHeight: itemRectHeight.value,
       itemWidth: itemRectWidth.value,
@@ -187,9 +193,10 @@ const HoldItemComponent: React.FC<HoldItemProps> = ({
       itemX: itemRectX.value,
       anchorPosition: transformOrigin.value,
       menuHeight: menuHeight,
-      items,
+      items: items || [],
       transformValue: transformValue.value,
       actionParams: actionParams || {},
+      hasCustomView: !!renderCustomView,
     };
   };
 
@@ -200,32 +207,20 @@ const HoldItemComponent: React.FC<HoldItemProps> = ({
     });
   };
 
-  const setContentRenderer = () => {
-    if (renderContent) {
-      contentRenderer.current = (params: any) =>
-        renderContent({ closeMenu: params });
-    } else {
-      contentRenderer.current = null;
-    }
-  };
-
   const onCompletion = (isFinised?: boolean) => {
     'worklet';
-    const isListValid = true;
-    // items && items.length > 0;
-    if (isFinised && isListValid) {
+    const hasItems = items && items.length > 0;
+    const hasCustomView = !!renderCustomView;
+    if (isFinised && (hasItems || hasCustomView)) {
       state.value = CONTEXT_MENU_STATE.ACTIVE;
       isActive.value = true;
       scaleBack();
-      runOnJS(setContentRenderer)();
       if (hapticFeedback !== 'None') {
         runOnJS(hapticResponse)();
       }
     }
 
     isAnimationStarted.value = false;
-
-    // TODO: Warn user if item list is empty or not given
   };
 
   const scaleHold = () => {
@@ -456,6 +451,6 @@ const HoldItemComponent: React.FC<HoldItemProps> = ({
   //#endregion
 };
 
-const HoldItem = memo(HoldItemComponent) as React.FC<HoldItemProps>;
+const HoldItem = memo(HoldItemComponent);
 
 export default HoldItem;

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

@@ -1,12 +1,8 @@
 import { ViewStyle } from 'react-native';
-import { MenuItemProps } from '../menu/types';
+import { MenuItemProps, RenderCustomView } from '../menu/types';
 import { TransformOriginAnchorPosition } from '../../utils/calculations';
 
-export interface RenderContentParams {
-  closeMenu: () => void;
-}
-
-export type HoldItemProps = {
+type HoldItemBaseProps = {
   /**
    * List of context menu items.
    * @type MenuItemProps[]
@@ -14,6 +10,15 @@ export type HoldItemProps = {
    */
   items?: MenuItemProps[];
 
+  /**
+   * Render function for a custom view displayed on the opposite side of the menu.
+   * Receives { closeMenu } prop to programmatically close the context menu.
+   * @type RenderCustomView
+   * @examples
+   * renderCustomView={({ closeMenu }) => <ReactionsBar onSelect={() => closeMenu()} />}
+   */
+  renderCustomView?: RenderCustomView;
+
   /**
    * Object of keys that same name with items to match parameters to onPress actions.
    * @type { [name: string]: (string | number)[] }
@@ -128,17 +133,18 @@ export type HoldItemProps = {
    * longPressMinDurationMs={250}
    */
   longPressMinDurationMs?: number;
+};
 
-  /**
-   * Custom content renderer for this HoldItem.
-   * Allows to render custom content (e.g. reactions) above/below the menu.
-   * @type (params: RenderContentParams) => React.ReactNode
-   * @examples
-   * renderContent={({ closeMenu }) => <MyReactions onClose={closeMenu} />}
-   */
-  renderContent?: (params: RenderContentParams) => React.ReactNode;
+export type HoldItemWithItems = HoldItemBaseProps & {
+  items: MenuItemProps[];
 };
 
+export type HoldItemWithCustomView = HoldItemBaseProps & {
+  renderCustomView: RenderCustomView;
+};
+
+export type HoldItemProps = HoldItemWithItems | HoldItemWithCustomView;
+
 export type GestureHandlerProps = {
   children: React.ReactElement | React.ReactElement[];
 };