Add feature to handle clicks on Copilot Walkthroughables

Fix issue #6 only for view overlays

Author: iamsoorena

src/components/ViewMask.js

@@ -1,10 +1,10 @@
 // @flow
 import React, { Component } from 'react';
-
-import { View, Animated, I18nManager } from 'react-native';
+import PropTypes from 'prop-types';
+import { View, Animated, I18nManager, TouchableOpacity } from 'react-native';
 import styles from './style';
 
-import type { valueXY } from '../types';
+import type { CopilotContext, valueXY } from '../types';
 
 
 const rtl = I18nManager.isRTL;
@@ -31,6 +31,10 @@ type State = {
 };
 
 class ViewMask extends Component<Props, State> {
+  static contextTypes = {
+    _copilot: PropTypes.object,
+  }
+
   state = {
     size: new Animated.ValueXY({ x: 0, y: 0 }),
     position: new Animated.ValueXY({ x: 0, y: 0 }),
@@ -42,6 +46,10 @@ class ViewMask extends Component<Props, State> {
     }
   }
 
+  context: {
+    _copilot: CopilotContext,
+  }
+
   animate = (size: valueXY = this.props.size, position: valueXY = this.props.position): void => {
     if (this.state.animated) {
       Animated.parallel([
@@ -113,6 +121,17 @@ class ViewMask extends Component<Props, State> {
             },
           ]}
         />
+        <TouchableOpacity
+          style={{
+            backgroundColor: 'transparent',
+            [start]: this.props.position.x,
+            [end]: (this.props.layout.width - (this.props.size.x + this.props.position.x)),
+            top: this.props.position.y,
+            width: this.props.size.x,
+            height: this.props.size.y,
+          }}
+          onPress={this.context._copilot.getCurrentStep().target.props.children.props.onPress || null}
+        />
       </View>
     );
   }