From b9489670fa955c16b7817ef003990fd49c600079 Mon Sep 17 00:00:00 2001
From: Mohamad Mohebifar <mohamad@mohebifar.com>
Date: Thu, 11 Apr 2024 16:55:44 -0400
Subject: [PATCH] Fix type error in walkthroughable

---
 README.md                    | 26 +++++++++++++++-----------
 src/hocs/walkthroughable.tsx | 20 +++++++++-----------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index c9480361..efd2b7dc 100644
--- a/README.md
+++ b/README.md
@@ -141,17 +141,21 @@ By default, if overlay is not explicitly specified, the `svg` overlay will be us
 You can customize the tooltip and the step number components by passing a component to the `CopilotProvider` component. If you are looking for an example tooltip component, take a look at [the default ui implementations](https://github.com/mohebifar/react-native-copilot/blob/master/src/components/default-ui).
 
 ```js
-const TooltipComponent = ({
-  isFirstStep,
-  isLastStep,
-  handleNext,
-  handleNth,
-  handlePrev,
-  handleStop,
-  currentStep,
-}) => (
-  // ...
-);
+const TooltipComponent = () => {
+  const {
+    isFirstStep,
+    isLastStep,
+    handleNext,
+    handleNth,
+    handlePrev,
+    handleStop,
+    currentStep,
+  } = useCopilot();
+
+  return (
+    // ...
+  )
+};
 
 
 <CopilotProvider tooltipComponent={TooltipComponent} stepNumberComponent={StepComponent}>
diff --git a/src/hocs/walkthroughable.tsx b/src/hocs/walkthroughable.tsx
index b237aca9..78e1769f 100644
--- a/src/hocs/walkthroughable.tsx
+++ b/src/hocs/walkthroughable.tsx
@@ -1,20 +1,18 @@
 import React, { type FunctionComponent } from "react";
 import { type NativeMethods } from "react-native/types";
 
-type PropsWithCopilot<P> = P & {
-  copilot: {
-    ref?: React.RefObject<NativeMethods>;
-    onLayout?: () => void;
-  };
-};
+interface CopilotType {
+  ref?: React.RefObject<NativeMethods>;
+  onLayout?: () => void;
+}
 
 export function walkthroughable<P = any>(
-  WrappedComponent: React.ComponentType<P>
+  WrappedComponent: React.ComponentType<P>,
 ) {
-  const Component: FunctionComponent<PropsWithCopilot<P>> = ({
-    copilot,
-    ...props
-  }) => <WrappedComponent {...(copilot as any)} {...props} />;
+  const Component: FunctionComponent<P> = (props: P) => {
+    const { copilot, ...rest } = props as { copilot: CopilotType } & P;
+    return <WrappedComponent {...copilot} {...(rest as any)} />;
+  };
 
   Component.displayName = "Walkthroughable";