Feat: Support image in tooltip

README.md

@@ -76,6 +76,8 @@ Every `CopilotStep` must have these props:
 1. **name**: A unique name for the walkthrough step.
 2. **order**: A positive number indicating the order of the step in the entire walkthrough.
 3. **text**: The text shown as the description for the step.
+4. **imageSource(optional)**: Image to be shown on the tooltip of walkthrough step.
+5. **extraComponent(optional)**: Any other custom React component or React element to be shown in the tooltip of walkthrough step.
 
 In order to start the tutorial, you can call the `start` prop function in the root component that is injected by `copilot`:
 

src/components/ConnectedCopilotStep.js

@@ -7,6 +7,8 @@ type Props = {
   name: string,
   text: string,
   order: number,
+  imageSource: string,
+  extraComponent: React$Element,
   _copilot: CopilotContext,
   children: React$Element
 };
@@ -17,6 +19,8 @@ class ConnectedCopilotStep extends Component<Props> {
       name: this.props.name,
       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

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
 
 import Button from './Button';
 
@@ -24,37 +24,45 @@ const Tooltip = ({
   handlePrev,
   handleStop,
   currentStep,
-}: Props) => (
-  <View>
-    <View style={styles.tooltipContainer}>
-      <Text testID="stepDescription" style={styles.tooltipText}>{currentStep.text}</Text>
+}: Props) => {
+  return (
+    <View>
+      <View style={styles.extraComponentContainer}>
+        {currentStep.extraComponent}
+      </View>
+      <View style={styles.imageContainer}>
+        <Image style={{ flex: 1 }} source={currentStep.imageSource} />
+      </View>
+      <View style={styles.tooltipContainer}>
+        <Text testID="stepDescription" style={styles.tooltipText}>{currentStep.text}</Text>
+      </View>
+      <View style={[styles.bottomBar]}>
+        {
+          !isLastStep ?
+            <TouchableOpacity onPress={handleStop}>
+              <Button>Skip</Button>
+            </TouchableOpacity>
+            : null
+        }
+        {
+          !isFirstStep ?
+            <TouchableOpacity onPress={handlePrev}>
+              <Button>Previous</Button>
+            </TouchableOpacity>
+            : null
+        }
+        {
+          !isLastStep ?
+            <TouchableOpacity onPress={handleNext}>
+              <Button>Next</Button>
+            </TouchableOpacity> :
+            <TouchableOpacity onPress={handleStop}>
+              <Button>Finish</Button>
+            </TouchableOpacity>
+        }
+      </View>
     </View>
-    <View style={[styles.bottomBar]}>
-      {
-        !isLastStep ?
-          <TouchableOpacity onPress={handleStop}>
-            <Button>Skip</Button>
-          </TouchableOpacity>
-          : null
-      }
-      {
-        !isFirstStep ?
-          <TouchableOpacity onPress={handlePrev}>
-            <Button>Previous</Button>
-          </TouchableOpacity>
-          : null
-      }
-      {
-        !isLastStep ?
-          <TouchableOpacity onPress={handleNext}>
-            <Button>Next</Button>
-          </TouchableOpacity> :
-          <TouchableOpacity onPress={handleStop}>
-            <Button>Finish</Button>
-          </TouchableOpacity>
-      }
-    </View>
-  </View>
-);
+  )
+};
 
 export default Tooltip;

src/components/style.js

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