fix(attach-step): Fix attach to function components (#49)

fix(attach-step): Fix attach to function components

example/yarn.lock

@@ -1068,7 +1068,7 @@
 
 "@stackbuilders/react-native-spotlight-tour@../stackbuilders-react-native-spotlight-tour-v0.0.0.tgz":
   version "0.0.0"
-  resolved "../stackbuilders-react-native-spotlight-tour-v0.0.0.tgz#1c9cab35d8a64af870ea92fcd10a92078f3e6191"
+  resolved "../stackbuilders-react-native-spotlight-tour-v0.0.0.tgz#a50e50ba75ee637a0b40ea177f238640d79e6772"
   dependencies:
     react-native-responsive-dimensions "^3.1.1"
     styled-components "^5.2.3"

package.json

@@ -52,6 +52,9 @@
     "react-native": ">=0.50.0",
     "react-native-svg": ">=12.1.0"
   },
+  "resolutions": {
+    "@types/react-native": "^0.66.10"
+  },
   "release": {
     "branches": [
       "release"

src/lib/AttachStep.component.tsx

@@ -1,5 +1,6 @@
-import React, { ClassAttributes, isValidElement, useContext, useEffect, useRef } from "react";
-import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import React, { useContext, useEffect, useRef } from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import styled from "styled-components/native";
 
 import { SpotlightTourContext } from "./SpotlightTour.context";
 
@@ -9,6 +10,10 @@ interface AttachStepProps {
   style?: StyleProp<ViewStyle>;
 }
 
+const StepView = styled.View`
+  align-self: flex-start;
+`;
+
 export const AttachStep: React.FC<AttachStepProps> = ({ children, disabled, index, style }) => {
   const { current, changeSpot, spot } = useContext(SpotlightTourContext);
 
@@ -26,16 +31,9 @@ export const AttachStep: React.FC<AttachStepProps> = ({ children, disabled, inde
     }
   }, [current, disabled]);
 
-  if (isValidElement(children) && React.Children.count(children) === 1) {
-    return React.cloneElement<ClassAttributes<View> & ViewProps>(
-      React.Children.only(children),
-      { ref: childRef, collapsable: false }
-    );
-  }
-
   return (
-    <View ref={childRef} collapsable={false} style={style}>
+    <StepView ref={childRef} collapsable={false} style={style}>
       {children}
-    </View>
+    </StepView>
   );
 };

test/index.test.tsx

@@ -177,7 +177,7 @@ describe("Spotlight tour", () => {
           left: 325,
           marginBottom: "2%",
           position: "absolute",
-          top: -72
+          top: -79
         });
       });
     });

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

@@ -66,7 +66,7 @@ describe("Lib.TourOverlay.TourOverlayComponent", () => {
     });
 
     describe("and the next step is triggered", () => {
-      it("rcalls the next callback once", async () => {
+      it("calls the next callback once", async () => {
         const { getByText } = render(<TourOverlay tour={BASE_TOUR} />);
 
         await waitFor(() => getByText("Step 1"));