fix(attach-step): Composed components being wrapped

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

@@ -8,11 +8,11 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import { LayoutChangeEvent, StyleProp, View } from "react-native";
+import { LayoutChangeEvent, StyleProp, View, ViewStyle } from "react-native";
 
 import { SpotlightTourContext } from "../../SpotlightTour.context";
 
-export interface ChildProps<T> {
+export interface ChildProps {
   /**
    * A React children, if any.
    */
@@ -27,18 +27,14 @@ export interface ChildProps<T> {
    * A React reference.
    */
   ref: RefObject<unknown>;
-  /**
-   * The style prop.
-   */
-  style: StyleProp<T>;
 }
 
-export interface AttachStepProps<T> {
+export interface AttachStepProps {
   /**
    * The element in which the spotlight will be to wrapped to in the specified
    * step of the tour.
    */
-  children: ReactElement<ChildProps<T>>;
+  children: ReactElement<ChildProps>;
   /**
    * When `AttachStep` wraps a Functional Component, it needs to add an
    * additional `View` on top of it to be able to measure the layout upon
@@ -58,6 +54,10 @@ export interface AttachStepProps<T> {
    * It can be a single index or multiple ones.
    */
   index: number | Array<number>;
+  /**
+   * Style applied to AttachStep wrapper
+   */
+  style?: StyleProp<ViewStyle>;
 }
 
 /**
@@ -67,7 +67,7 @@ export interface AttachStepProps<T> {
  * @param props the component props
  * @returns an AttachStep React element
  */
-export function AttachStep<T>({ children, fill = false, index }: AttachStepProps<T>): ReactElement {
+export function AttachStep({ children, fill = false, index, style }: AttachStepProps): ReactElement {
   const { current, changeSpot } = useContext(SpotlightTourContext);
 
   const ref = useRef<View>(null);
@@ -91,31 +91,20 @@ export function AttachStep<T>({ children, fill = false, index }: AttachStepProps
     updateSpot();
   }, [updateSpot]);
 
-  if (typeof children.type === "function") {
-    const { style, ...rest } = children.props;
-    const childStyle = style ?? { };
-
-    return (
-      <View
-        testID="attach-wrapper-view"
-        ref={ref}
-        style={{ alignSelf: fill ? "stretch" : "flex-start", ...childStyle }}
-        collapsable={false}
-        focusable={false}
-        onLayout={updateSpot}
-      >
-        {cloneElement(
-          children,
-          rest,
-          children.props.children,
-        )}
-      </View>
-    );
-  }
-
-  return cloneElement(
-    children,
-    { ...children.props, onLayout, ref },
-    children.props?.children,
+  return (
+    <View
+      testID="attach-wrapper-view"
+      ref={ref}
+      style={[{ alignSelf: fill ? "stretch" : "flex-start" }, style]}
+      collapsable={false}
+      focusable={false}
+      onLayout={onLayout}
+    >
+      {cloneElement(
+        children,
+        children.props,
+        children.props.children,
+      )}
+    </View>
   );
 }

package/test/integration/lib/AttachStep.component.test.tsx

@@ -1,4 +1,3 @@
-import { expect } from "@assertive-ts/core";
 import { render, waitFor, within } from "@testing-library/react-native";
 import React, { ReactElement, forwardRef } from "react";
 import { Text } from "react-native";
@@ -26,18 +25,19 @@ function CustomText(): ReactElement {
 
 suite("[Integration] AttachStep.component.test.tsx", () => {
   describe("when a native component is passed as child", () => {
-    it("renders the child without wrapping it on a native View", async () => {
-      const { getByText, queryByTestId } = render(
+    it("renders the child wrapping it on a native View", async () => {
+      const { getByTestId } = render(
         <SpotlightTourProvider steps={[]}>
           <AttachStep index={0}>
             <NativeText />
           </AttachStep>
         </SpotlightTourProvider>,
       );
 
-      await waitFor(() => getByText("Native Text"));
-
-      expect(queryByTestId("attach-wrapper-view")).toBeNull();
+      await waitFor(() =>
+        within(getByTestId("attach-wrapper-view"))
+          .getByText("Native Text"),
+      );
     });
   });