Tooltip arrow is not centered on the highlighted element and `arrowSize` does not control its rendered size

[olitynskyi-mtb]

In react-native-copilot@3.3.3, the tooltip arrow is positioned at a fixed margin from either the left or right tooltip edge:

arrow.right = tooltip.right + margin;

// or

arrow.left = tooltip.left + margin;

The side is selected based on which half of the screen contains the highlighted element. However, the arrow position does not use the element's actual horizontal center. This causes the arrow to appear near a tooltip corner instead of pointing at the highlighted element, especially for wide targets such as cards, banners, and navigation areas.

The arrowSize prop is also used in the positioning calculations, but the rendered triangle keeps the hardcoded ARROW_SIZE value as its borderWidth. Therefore, a custom arrowSize can produce a mismatch between the calculated and rendered arrow sizes.

Expected behavior:

• The arrow should point at the horizontal center of the highlighted element.
• The rendered triangle should use the value provided through arrowSize.
• The arrow should remain inside the screen when the highlighted element is close to an edge.

Potential solution:

arrow.borderWidth = arrowSize;

arrow.left = Math.max(
  0,
  Math.min(
    center.x - arrowSize,
    newMeasuredLayout.width - arrowSize * 2,
  ),
);

The existing arrow.left and arrow.right assignments based on the tooltip edge would be removed. center.x - arrowSize aligns the middle of the triangle with the middle of the highlighted element, while the bounds keep the complete arrow visible on screen.

[olitynskyi-mtb]

react-native-copilot+3.3.3.patch