How to pass a already implemented Component inside the Copilot Step in react-native-copilot - react-native

Question

I am trying to built a guided tour for my app using react native copilot
https://github.com/okgrow/react-native-copilot
and i cannot figure out how to use a already built component inside the its CopilotSteps as mentioned in the tutorial.
This is the my code so far and it gives me the following error
<CopilotStep
text="This is a hello world example!"
order={1}
name="hello"
>
{({ copilot }) => (
<Card snow to={`${basePath}/account`} {...copilot}>
<Row inline justify="center" fluid>
<Block inline justify="center">
<FIcon name="shield" size={25} />
</Block>
<Block justify="center">
<P compact>Account and Security</P>
<P compact small helper>
Edit Your Account Information
</P>
</Block>
<Block inline justify="center">
<FIcon name="chevron-right" size={25} />
</Block>
</Row>
</Card>
)}
</CopilotStep>
error =>
D:\My Work\Company Projects\Ongoing\ZappyFoods\Mobile App\zappyfood_app\node_modules\react-native\Libraries\Core\ExceptionsManager.js:63 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
what should i do to get this code run proerly

Answer 1

You have to make the component "walkthroughable", so for example if my original component was a simple TouchableOpacity button.
<TouchableOpacity
onPress={this.callFunction}
>
<Icon name="photo" type="FontAwesome" />
</TouchableOpacity>
Then to make it work with copilot first import walkthroughable.
import {
copilot,
walkthroughable,
CopilotStep
} from "#okgrow/react-native-copilot";
Then call the walkthroughable function passing our TouchableOpacity component.
const WalkthroughableTouchableOpacity = walkthroughable(TouchableOpacity);
Finally add the copilot step and use the new Walkthroughable component in place where you would've used TouchableOpacity.
<CopilotStep
text="Hey! This is the first step of the tour!"
order={1}
name="openApp"
>
<WalkthroughableTouchableOpacity
onPress={this.callFunction}
>
<Icon name="photo" type="FontAwesome" />
</WalkthroughableTouchableOpacity>
</CopilotStep>
So the entire file could look like
import {
copilot,
walkthroughable,
CopilotStep
} from "#okgrow/react-native-copilot";
import { Icon } from "native-base";
import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
const WalkthroughableTouchableOpacity = walkthroughable(TouchableOpacity);
class Example extends Component {
componentDidMount = async () => {
this.props.copilotEvents.on("stepChange", () => {});
this.props.start();
};
callFunction = () => {
console.log("Button Pressed.");
};
render() {
return (
<CopilotStep
text="Hey! This is the first step of the tour!"
order={1}
name="openApp"
>
<WalkthroughableTouchableOpacity onPress={this.callFunction}>
<Icon name="photo" type="FontAwesome" />
</WalkthroughableTouchableOpacity>
</CopilotStep>
);
}
}
export default copilot({
animated: true,
overlay: "svg"
})(Example);