fix(core): Update spot on layout changes

package/src/lib/components/attach-step/AttachStep.component.tsx

@@ -1,5 +1,14 @@
-import React, { ReactElement, ReactNode, RefObject, cloneElement, useContext, useEffect, useRef } from "react";
-import { StyleProp, View } from "react-native";
+import React, {
+  ReactElement,
+  ReactNode,
+  RefObject,
+  cloneElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
+import { LayoutChangeEvent, StyleProp, View } from "react-native";
 
 import { SpotlightTourContext } from "../../SpotlightTour.context";
 
@@ -8,6 +17,12 @@ export interface ChildProps<T> {
    * A React children, if any.
    */
   children?: ReactNode;
+  /**
+   * Native components layout change event.
+   *
+   * @param event The layout event.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
   /**
    * A React reference.
    */
@@ -56,14 +71,18 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
 
   const childRef = useRef<View>(null);
 
-  useEffect(() => {
+  const updateSpot = useCallback((): void => {
     if (current === index) {
       childRef.current?.measureInWindow((x, y, width, height) => {
         changeSpot({ height, width, x, y });
       });
     }
   }, [changeSpot, current, index]);
 
+  useEffect(() => {
+    updateSpot();
+  }, [updateSpot]);
+
   if (typeof children.type === "function") {
     const { style, ...rest } = children.props;
     const childStyle = style ?? { };
@@ -75,6 +94,7 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
         style={{ alignSelf: fill ? "stretch" : "flex-start", ...childStyle }}
         collapsable={false}
         focusable={false}
+        onLayout={updateSpot}
       >
         {cloneElement(
           children,
@@ -87,7 +107,14 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
 
   return cloneElement(
     children,
-    { ...children.props, ref: childRef },
+    {
+      ...children.props,
+      onLayout: (event: LayoutChangeEvent) => {
+        updateSpot();
+        children.props.onLayout?.(event);
+      },
+      ref: childRef,
+    },
     children.props?.children,
   );
 }