Feat: Support custom extra component in tooltip along with imageSource

Author: Anupriy R

src/components/ConnectedCopilotStep.js

@@ -8,6 +8,7 @@ type Props = {
   text: string,
   order: number,
   imageSource: string,
+  extraComponent: React$Element,
   _copilot: CopilotContext,
   children: React$Element
 };
@@ -19,6 +20,7 @@ class ConnectedCopilotStep extends Component<Props> {
       text: this.props.text,
       order: this.props.order,
       imageSource: this.props.imageSource,
+      extraComponent: this.props.extraComponent,
       target: this,
       wrapper: this.wrapper,
     });

src/components/Tooltip.js

@@ -27,6 +27,9 @@ const Tooltip = ({
 }: Props) => {
   return (
     <View>
+      <View style={styles.extraComponentContainer}>
+        {currentStep.extraComponent}
+      </View>
       <View style={styles.imageContainer}>
         <Image style={{ flex: 1 }} source={currentStep.imageSource} />
       </View>

src/components/style.js

@@ -32,6 +32,11 @@ export default StyleSheet.create({
   },
   tooltipText: {
 
+  },
+  extraComponentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   imageContainer: {
     flex: 1,