Add bottom props, update Telegram example

example/src/screens/Telegram/NavButton.tsx

@@ -35,7 +35,7 @@ function NavButton({
         <HoldItem
           id={id}
           disableMove
-          menuAnchorPosition="bottom-right"
+          bottom
           items={menuItems}
           active={active}
           onActivate={onActivate}

src/components/holdItem/HoldItemChild.tsx

@@ -49,6 +49,7 @@ const HoldItemChildComponent = ({
   id,
   items,
   theme,
+  bottom,
   styles: customStyles,
   children,
   isActive,
@@ -86,7 +87,8 @@ const HoldItemChildComponent = ({
         const position = getTransformOrigin(
           measured.pageX,
           itemRectWidth.value,
-          deviceOrientation == 'portrait' ? WINDOW_WIDTH : WINDOW_HEIGHT
+          deviceOrientation == 'portrait' ? WINDOW_WIDTH : WINDOW_HEIGHT,
+          bottom
         );
         transformOrigin.value = position;
       }

src/components/holdItem/types.d.ts

@@ -63,6 +63,15 @@ export interface HoldItemCommonProps {
    * theme="light"
    */
   theme?: 'light' | 'dark';
+
+  /**
+   * Set true if you want to open menu from bottom
+   * @type boolean
+   * @default false
+   * @examples
+   * bottom={true}
+   */
+  bottom?: boolean;
 }
 
 export interface HoldItemProps extends HoldItemCommonProps {

src/utils/calculations.ts

@@ -73,15 +73,21 @@ export const menuAnimationAnchor = (
 export const getTransformOrigin = (
   posX: number,
   itemWidth: number,
-  windowWidth: number
+  windowWidth: number,
+  bottom?: boolean
 ): TransformOriginAnchorPosition => {
   'worklet';
   const distanceToLeft = posX + itemWidth / 2;
   const distanceToRight = windowWidth - distanceToLeft;
-  let position: TransformOriginAnchorPosition = 'top-right';
 
-  if (distanceToLeft < distanceToRight) position = 'top-left';
-  else if (distanceToRight === distanceToLeft) position = 'top-center';
+  let position: TransformOriginAnchorPosition = bottom
+    ? 'bottom-right'
+    : 'top-right';
+
+  if (distanceToLeft < distanceToRight)
+    position = bottom ? 'bottom-left' : 'top-left';
+  else if (distanceToRight === distanceToLeft)
+    position = bottom ? 'bottom-center' : 'top-center';
 
   return position;
 };