make anchorAlignment work on native

src/components/MenuItem.tsx

@@ -297,6 +297,12 @@ type MenuItemBaseProps = {
     /** Additional styles for tooltip wrapper */
     tooltipWrapperStyle?: StyleProp<ViewStyle>;
 
+    /** Any additional amount to manually adjust the horizontal position of the tooltip */
+    tooltipShiftHorizontal?: number;
+
+    /** Any additional amount to manually adjust the vertical position of the tooltip */
+    tooltipShiftVertical?: number;
+
     /** Render custom content inside the tooltip. */
     renderTooltipContent?: () => ReactNode;
 };
@@ -386,6 +392,8 @@ function MenuItem(
         shouldRenderTooltip = false,
         tooltipAnchorAlignment,
         tooltipWrapperStyle = {},
+        tooltipShiftHorizontal = 0,
+        tooltipShiftVertical = 0,
         renderTooltipContent,
     }: MenuItemProps,
     ref: PressableRef,
@@ -494,8 +502,8 @@ function MenuItem(
                 anchorAlignment={tooltipAnchorAlignment}
                 renderTooltipContent={renderTooltipContent}
                 wrapperStyle={tooltipWrapperStyle}
-                shiftHorizontal={styles.popoverMenuItem.paddingHorizontal}
-                shiftVertical={styles.popoverMenuItem.paddingVertical / 2}
+                shiftHorizontal={tooltipShiftHorizontal}
+                shiftVertical={tooltipShiftVertical}
             >
                 <View>
                     <Hoverable>

src/components/PopoverMenu.tsx

@@ -244,6 +244,9 @@ function PopoverMenu({
                             success={item.success}
                             containerStyle={item.containerStyle}
                             shouldRenderTooltip={item.shouldRenderTooltip}
+                            tooltipAnchorAlignment={item.tooltipAnchorAlignment}
+                            tooltipShiftHorizontal={item.tooltipShiftHorizontal}
+                            tooltipShiftVertical={item.tooltipShiftVertical}
                             tooltipWrapperStyle={item.tooltipWrapperStyle}
                             renderTooltipContent={item.renderTooltipContent}
                         />

src/components/Tooltip/BaseGenericTooltip/index.native.tsx

@@ -4,6 +4,7 @@ import {Animated, View} from 'react-native';
 import type {Text as RNText, View as RNView} from 'react-native';
 import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
+import CONST from '@src/CONST';
 import type {BaseGenericTooltipProps} from './types';
 
 // Props will change frequently.
@@ -25,6 +26,10 @@ function BaseGenericTooltip({
     maxWidth = 0,
     renderTooltipContent,
     shouldForceRenderingBelow = false,
+    anchorAlignment = {
+        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+    },
     wrapperStyle = {},
 }: BaseGenericTooltipProps) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
@@ -65,6 +70,7 @@ function BaseGenericTooltip({
                 manualShiftHorizontal: shiftHorizontal,
                 manualShiftVertical: shiftVertical,
                 shouldForceRenderingBelow,
+                anchorAlignment,
                 wrapperStyle,
             }),
         [
@@ -81,6 +87,7 @@ function BaseGenericTooltip({
             shiftHorizontal,
             shiftVertical,
             shouldForceRenderingBelow,
+            anchorAlignment,
             wrapperStyle,
         ],
     );

src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

@@ -471,11 +471,13 @@ function FloatingActionButtonAndPopover(
                                   numberOfLinesDescription: 1,
                                   onSelected: () => interceptAnonymousUser(() => navigateToQuickAction()),
                                   shouldShowSubscriptRightAvatar: ReportUtils.isPolicyExpenseChat(quickActionReport),
-                                  shouldRenderTooltip: true,
+                                  shouldRenderTooltip: quickAction.isFirstQuickAction,
                                   tooltipAnchorAlignment: {
                                       vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                                       horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                                   },
+                                  tooltipShiftHorizontal: styles.popoverMenuItem.paddingHorizontal,
+                                  tooltipShiftVertical: styles.popoverMenuItem.paddingVertical / 2,
                                   renderTooltipContent: renderQuickActionTooltip,
                                   tooltipWrapperStyle: styles.quickActionTooltipWrapper,
                               },

src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/index.native.ts

@@ -0,0 +1,5 @@
+import type ComputeHorizontalShift from './types';
+
+const computeHorizontalShift: ComputeHorizontalShift = () => 0;
+
+export default computeHorizontalShift;

src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/index.ts

@@ -0,0 +1,42 @@
+import roundToNearestMultipleOfFour from '@libs/roundToNearestMultipleOfFour';
+import variables from '@styles/variables';
+import type ComputeHorizontalShift from './types';
+
+/** This defines the proximity with the edge of the window in which tooltips should not be displayed.
+ * If a tooltip is too close to the edge of the screen, we'll shift it towards the center. */
+const GUTTER_WIDTH = variables.gutterWidth;
+
+/**
+ * Compute the amount the tooltip needs to be horizontally shifted in order to keep it from displaying in the gutters.
+ *
+ * @param windowWidth - The width of the window.
+ * @param xOffset - The distance between the left edge of the window
+ *                           and the left edge of the wrapped component.
+ * @param componentWidth - The width of the wrapped component.
+ * @param tooltipWidth - The width of the tooltip itself.
+ * @param [manualShiftHorizontal] - Any additional amount to manually shift the tooltip to the left or right.
+ *                                         A positive value shifts it to the right,
+ *                                         and a negative value shifts it to the left.
+ */
+const computeHorizontalShift: ComputeHorizontalShift = (windowWidth, xOffset, componentWidth, tooltipWidth, manualShiftHorizontal) => {
+    // First find the left and right edges of the tooltip (by default, it is centered on the component).
+    const componentCenter = xOffset + componentWidth / 2 + manualShiftHorizontal;
+    const tooltipLeftEdge = componentCenter - tooltipWidth / 2;
+    const tooltipRightEdge = componentCenter + tooltipWidth / 2;
+
+    if (tooltipLeftEdge < GUTTER_WIDTH) {
+        // Tooltip is in left gutter, shift right by a multiple of four.
+        return roundToNearestMultipleOfFour(GUTTER_WIDTH - tooltipLeftEdge);
+    }
+
+    if (tooltipRightEdge > windowWidth - GUTTER_WIDTH) {
+        // Tooltip is in right gutter, shift left by a multiple of four.
+        return roundToNearestMultipleOfFour(windowWidth - GUTTER_WIDTH - tooltipRightEdge);
+    }
+
+    // Tooltip is not in the gutter, so no need to shift it horizontally
+    return 0;
+};
+
+export {GUTTER_WIDTH};
+export default computeHorizontalShift;

src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/types.ts

@@ -0,0 +1,3 @@
+type ComputeHorizontalShift = (windowWidth: number, xOffset: number, componentWidth: number, tooltipWidth: number, manualShiftHorizontal: number) => number;
+
+export default ComputeHorizontalShift;