Refactor useHintLayout hook to accept props directly and improve targ…

…et layout handling

src/components/hint/hooks/useHintLayout.ts

@@ -1,10 +1,13 @@
 import {type ElementRef, useState, useCallback, useRef} from 'react';
 import type {LayoutChangeEvent, LayoutRectangle, View as RNView} from 'react-native';
 import _ from 'lodash';
+import {HintProps} from '../types';
 
-export default function useHintLayout(hasBackgroundPress: boolean) {
-  const [targetLayoutState, setTargetLayout] = useState<LayoutRectangle>();
-  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState<LayoutRectangle>();
+type UseHintLayoutProps = Pick<HintProps, 'onBackgroundPress' | 'targetFrame'>
+
+export default function useHintLayout({onBackgroundPress, targetFrame}: UseHintLayoutProps) {
+  const [targetLayoutState, setTargetLayout] = useState<LayoutRectangle | undefined>(targetFrame);
+  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState<LayoutRectangle | undefined>(targetFrame);
   const [hintMessageWidth, setHintMessageWidth] = useState<number | undefined>();
   const targetRef = useRef<ElementRef<typeof RNView> | null>(null);
 
@@ -13,7 +16,7 @@ export default function useHintLayout(hasBackgroundPress: boolean) {
       setTargetLayout(layout);
     }
 
-    if (!targetLayoutInWindowState || hasBackgroundPress) {
+    if (!targetLayoutInWindowState || !!onBackgroundPress) {
       setTimeout(() => {
         targetRef?.current?.measureInWindow?.((x: number, y: number, width: number, height: number) => {
           const targetLayoutInWindow = {x, y, width, height};
@@ -22,7 +25,7 @@ export default function useHintLayout(hasBackgroundPress: boolean) {
       });
     }
   },
-  [targetLayoutState, targetLayoutInWindowState, hasBackgroundPress]);
+  [targetLayoutState, targetLayoutInWindowState, onBackgroundPress]);
 
   const setHintLayout = useCallback(({nativeEvent: {layout}}: LayoutChangeEvent) => {
     if (!hintMessageWidth) {

src/components/hint/index.tsx

@@ -56,7 +56,7 @@ const NewHint = (props: HintProps) => {
 
   const {hintUnmounted, visibleAnimated, animateHint} = useHintAnimation(visible);
   const {targetLayoutState, targetLayoutInWindowState, hintMessageWidth, targetRef, onTargetLayout, setHintLayout} =
-    useHintLayout(!!onBackgroundPress);
+    useHintLayout({onBackgroundPress, targetFrame});
   const {focusAccessibilityOnHint, accessibilityInfo} = useHintAccessibility(message);
 
   useEffect(() => {
@@ -70,12 +70,8 @@ const NewHint = (props: HintProps) => {
   }, [visible]);
 
   const targetLayout = useMemo(() => {
-    if (targetFrame) {
-      return targetFrame;
-    }
-
     return isUsingModal ? targetLayoutInWindowState : targetLayoutState;
-  }, [isUsingModal, targetLayoutState, targetLayoutInWindowState, targetFrame]);
+  }, [isUsingModal, targetLayoutState, targetLayoutInWindowState]);
 
   const setTargetRef = useCallback((ref: ElementRef<typeof RNView>) => {
     targetRef.current = ref;