Feat: Support image in tooltip

Author: Anupriy R

src/components/ConnectedCopilotStep.js

@@ -7,6 +7,7 @@ type Props = {
   name: string,
   text: string,
   order: number,
+  imageSource: string,
   _copilot: CopilotContext,
   children: React$Element
 };
@@ -17,6 +18,7 @@ class ConnectedCopilotStep extends Component<Props> {
       name: this.props.name,
       text: this.props.text,
       order: this.props.order,
+      imageSource: this.props.imageSource,
       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,42 @@ 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.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,11 @@ export default StyleSheet.create({
   },
   tooltipText: {
 
+  },
+  imageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   tooltipContainer: {
     flex: 1,