feat(core): Allow multiple indexes in a single AttachStep

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

@@ -40,8 +40,9 @@ export interface AttachStepProps<T> {
   fill?: boolean;
   /**
    * The index of the `steps` array to which the step is attached to.
+   * It can be a single index or multiple ones.
    */
-  index: number;
+  index: number | Array<number>;
 }
 
 /**
@@ -57,12 +58,12 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
   const childRef = useRef<View>(null);
 
   useEffect(() => {
-    if (current === index) {
+    if (checkIndex(index, current)) {
       childRef.current?.measureInWindow((x, y, width, height) => {
         changeSpot({ height, width, x, y });
       });
     }
-  }, [changeSpot, current, index]);
+  }, [changeSpot, current, index.toString()]);
 
   if (typeof children.type === "function") {
     const { style, ...rest } = children.props;
@@ -91,3 +92,15 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
     children.props?.children,
   );
 }
+
+function checkIndex<T>(index: AttachStepProps<T>["index"], current: number | undefined): boolean {
+  if (current === undefined) {
+    return false;
+  }
+
+  if (Array.isArray(index)) {
+    return index.includes(current);
+  }
+
+  return current === index;
+}

package/test/integration/lib/tour-overlay/TourOverlay.component.test.tsx

@@ -24,7 +24,7 @@ function TestScreen(): React.ReactElement {
         <Text>{"Test Tour 1"}</Text>
       </AttachStep>
 
-      <AttachStep index={1}>
+      <AttachStep index={[1]}>
         <Text>{"Test Tour 2"}</Text>
       </AttachStep>
 
@@ -267,4 +267,47 @@ describe("[Integration] TourOverlay.component.test.tsx", () => {
       });
     });
   });
+
+  context("when an AttachStep has multiple indexes", () => {
+    it("renders all the steps correctly", async() => {
+      const spy = Sinon.spy<(values: StopParams) => void>(() => undefined);
+
+      function TestView(): React.ReactElement {
+        const { start } = useSpotlightTour();
+
+        useEffect(() => {
+          start();
+        }, []);
+
+        return <View>
+            <AttachStep index={[0, 1, 2]}>
+              <Text>{"Test Tour"}</Text>
+            </AttachStep>
+          </View>;
+      }
+
+      const { getByText } = render(
+        <SpotlightTourProvider steps={STEPS} onStop={spy}>
+          <TestView />
+        </SpotlightTourProvider>,
+      );
+
+      await waitFor(() => getByText("Step 1"));
+
+      fireEvent.press(getByText("Next"));
+
+      await waitFor(() => getByText("Step 2"));
+
+      fireEvent.press(getByText("Next"));
+
+      await waitFor(() => getByText("Step 3"));
+
+      fireEvent.press(getByText("Stop"));
+
+      Sinon.assert.calledOnceWithExactly(spy, {
+        index: 2,
+        isLast: true,
+      });
+    });
+  });
 });