fix : android issue

Author: jiunshinn

src/HighLightToolTip.tsx

@@ -8,7 +8,6 @@ import {
   type LayoutRectangle,
   Dimensions,
   Platform,
-  type LayoutChangeEvent,
   InteractionManager,
 } from 'react-native';
 
@@ -45,52 +44,55 @@ export const HighlightToolTip: React.FC<HighlightOverlayProps> = ({
   androidOffsetY = 0,
 }) => {
   const [hole, setHole] = useState<LayoutRectangle | null>(null);
-  const [tooltipLayout, setTooltipLayout] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
   const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
   useEffect(() => {
     const task = InteractionManager.runAfterInteractions(() => {
-      if (targetRef.current) {
-        const handle = findNodeHandle(targetRef.current);
-        if (handle) {
-          UIManager.measureInWindow(
-            handle,
-            (x: number, y: number, width: number, height: number) => {
-              const isAndroid = Platform.OS === 'android';
-              setHole({
-                x,
-                y: isAndroid ? y + androidOffsetY : y,
-                width,
-                height,
-              });
+      if (!targetRef.current) {
+        return;
+      }
+      const handle = findNodeHandle(targetRef.current);
+      if (handle) {
+        UIManager.measureInWindow(
+          handle,
+          (x: number, y: number, width: number, height: number) => {
+            if ([x, y, width, height].some((val) => isNaN(val))) {
+              console.warn(
+                'HighlightToolTip: Failed to measure target component.'
+              );
+              return;
             }
-          );
-        }
+
+            const isAndroid = Platform.OS === 'android';
+            setHole({
+              x,
+              y: isAndroid ? y + androidOffsetY : y,
+              width,
+              height,
+            });
+          }
+        );
       }
     });
 
-    return () => task.cancel();
+    return () => {
+      task.cancel();
+    };
   }, [targetRef, androidOffsetY]);
 
-  const onTooltipLayout = (event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    if (tooltipLayout?.width !== width || tooltipLayout?.height !== height) {
-      setTooltipLayout({ width, height });
-    }
-  };
-
   const getTooltipPosition = () => {
-    if (!hole || !tooltipLayout) {
-      return { top: 0, left: 0, opacity: 0 };
-    }
+    if (!hole) return { top: 0, left: 0 };
 
     const { x: offsetX = 0, y: offsetY = 0 } = offset;
-    const margin = allowOverlap ? -4 : 24;
-    const { width: tooltipWidth, height: tooltipHeight } = tooltipLayout;
+    // Adjust margin based on allowOverlap - use larger margin to prevent overlap
+    const margin = allowOverlap ? -4 : 24; // Negative margin when overlap is allowed, otherwise larger margin
+
+    // Calculate tooltip size dynamically based on screen size
+    const maxTooltipWidth = Math.min(screenWidth * 0.8, 320); // Max 80% of screen width or 320px
+    const tooltipWidth = maxTooltipWidth;
+    const tooltipHeight = 120; // Adjust to actual height + extra space
 
+    // Calculate initial position
     let calculatedPosition = { top: 0, left: 0 };
 
     switch (tooltipPosition) {
@@ -167,26 +169,39 @@ export const HighlightToolTip: React.FC<HighlightOverlayProps> = ({
         };
     }
 
+    // Check screen boundaries and auto-adjust
     let { top, left } = calculatedPosition;
+
+    // Fixed margin for screen boundary adjustment (always positive)
     const boundaryMargin = 16;
 
+    // Left boundary check
     if (left < boundaryMargin) {
       left = boundaryMargin;
     }
 
+    // Right boundary check - ensure tooltip doesn't extend beyond screen
     if (left + tooltipWidth > screenWidth - boundaryMargin) {
       left = screenWidth - tooltipWidth - boundaryMargin;
+      // If still not enough space, adjust tooltip width
+      if (left < boundaryMargin) {
+        left = boundaryMargin;
+      }
     }
 
+    // Top boundary check
     if (top < boundaryMargin) {
+      // If it goes above, move to bottom - maintain allowOverlap setting
       if (tooltipPosition.includes('top')) {
         top = hole.y + hole.height + (allowOverlap ? -4 : 24);
       } else {
         top = boundaryMargin;
       }
     }
 
+    // Bottom boundary check
     if (top + tooltipHeight > screenHeight - boundaryMargin) {
+      // If it goes below, move to top - maintain allowOverlap setting
       if (tooltipPosition.includes('bottom')) {
         top = hole.y - tooltipHeight - (allowOverlap ? -4 : 24);
       } else {
@@ -197,17 +212,11 @@ export const HighlightToolTip: React.FC<HighlightOverlayProps> = ({
     return {
       top: top + offsetY,
       left: left + offsetX,
-      opacity: 1,
-      maxWidth: screenWidth * 0.9,
+      maxWidth: tooltipWidth,
     };
   };
 
-  const isHoleLayoutInvalid =
-    !hole || [hole.x, hole.y, hole.width, hole.height].some(isNaN);
-
-  if (isHoleLayoutInvalid) {
-    return null;
-  }
+  if (!hole) return null;
 
   const tooltipStyle = getTooltipPosition();
 
@@ -265,12 +274,10 @@ export const HighlightToolTip: React.FC<HighlightOverlayProps> = ({
 
           {/* Tooltip */}
           <View
-            onLayout={onTooltipLayout}
             style={{
               position: 'absolute',
               top: tooltipStyle.top,
               left: tooltipStyle.left,
-              opacity: tooltipStyle.opacity,
               maxWidth: tooltipStyle.maxWidth,
             }}
           >