feat: add measureOffsetY prop to HighlightToolTip for Y-axis positioning correction

Author: jiunshinn

README.md

@@ -78,6 +78,7 @@ The `HighlightToolTip` component accepts the following props:
 | `tooltipPosition` | `TooltipPosition`            | No       | 'bottom'         | Position of the tooltip relative to the target      |
 | `offset`          | `{ x?: number; y?: number }` | No       | `{ x: 0, y: 0 }` | Offset for tooltip positioning                      |
 | `allowOverlap`    | `boolean`                    | No       | `false`          | Whether to allow tooltip to overlap with the target |
+| `measureOffsetY`  | `number`                     | No       | `0`              | Y-axis offset for coordinate measurement correction |
 
 ### TooltipPosition Types
 
@@ -98,6 +99,30 @@ type TooltipPosition =
 
 ## Advanced Usage
 
+### Coordinate Measurement Correction
+
+If you notice that the highlight position is slightly off (especially on devices with status bars, notches, or navigation bars), you can use the `measureOffsetY` prop to correct the Y-axis positioning:
+
+```jsx
+<HighlightToolTip
+  targetRef={targetRef}
+  measureOffsetY={-24} // Adjust by -24px if highlight appears too low
+  tooltipPosition="bottom"
+  onRequestClose={() => setShowTooltip(false)}
+>
+  <View style={{ padding: 16, backgroundColor: 'white', borderRadius: 8 }}>
+    <Text>Perfectly positioned tooltip!</Text>
+  </View>
+</HighlightToolTip>
+```
+
+**Common scenarios where `measureOffsetY` is useful:**
+
+- Android devices with varying status bar heights
+- iOS devices with notches or Dynamic Island
+- Apps with custom navigation bars
+- Different screen densities and resolutions
+
 ### Custom Styling
 
 You can customize the tooltip's appearance by wrapping your content in a styled View:

src/HighLightToolTip.tsx

@@ -7,7 +7,6 @@ import {
   UIManager,
   type LayoutRectangle,
   Dimensions,
-  Platform,
 } from 'react-native';
 
 type TooltipPosition =
@@ -30,7 +29,7 @@ type HighlightOverlayProps = {
   tooltipPosition?: TooltipPosition;
   offset?: { x?: number; y?: number };
   allowOverlap?: boolean;
-  androidOffsetY?: number;
+  measureOffsetY?: number;
 };
 
 export const HighlightToolTip: React.FC<HighlightOverlayProps> = ({
@@ -40,7 +39,7 @@ export const HighlightToolTip: React.FC<HighlightOverlayProps> = ({
   tooltipPosition = 'bottom',
   offset = { x: 0, y: 0 },
   allowOverlap = false,
-  androidOffsetY = 0,
+  measureOffsetY = 0,
 }) => {
   const [hole, setHole] = useState<LayoutRectangle | null>(null);
   const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
@@ -51,16 +50,15 @@ export const HighlightToolTip: React.FC<HighlightOverlayProps> = ({
     UIManager.measureInWindow(
       handle!,
       (x: number, y: number, width: number, height: number) => {
-        const isAndroid = Platform.OS === 'android';
         setHole({
           x,
-          y: isAndroid ? y + androidOffsetY : y,
+          y: y + measureOffsetY,
           width,
           height,
         });
       }
     );
-  }, [targetRef, androidOffsetY]);
+  }, [targetRef, measureOffsetY]);
 
   const getTooltipPosition = () => {
     if (!hole) return { top: 0, left: 0 };