refactor: replace measureOffsetY with androidOffsetY in HighlightToolTip for better clarity and usage

Author: jiunshinn

README.md

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