Add hint onPress support (#1312)

* Add hint onPress support

* Container instead of wrapper component

* typing autogenerated

Author: mendyEdri

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -39,6 +39,10 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
     });
   };
 
+  onHintPressed = () => {
+    alert('Hint Pressed');
+  }
+
   render() {
     const {
       showHint,
@@ -85,6 +89,7 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             position={showBottomHint ? Hint.positions.BOTTOM : Hint.positions.TOP}
             useSideTip={useSideTip}
             key={targetPosition}
+            onPress={this.onHintPressed}
             targetFrame={useTargetFrame ? targetFrame : undefined}
             // borderRadius={BorderRadiuses.br40}
             // edgeMargins={30}

generatedTypes/components/hint/index.d.ts

@@ -80,8 +80,12 @@ export interface HintProps {
      */
     offset?: number;
     /**
-     * Callback for the background press
+     * Callback for Hint press
      */
+    onPress?: () => void;
+    /**
+      * Callback for the background press
+      */
     onBackgroundPress?: (event: GestureResponderEvent) => void;
     /**
      * The hint container width

src/components/hint/index.tsx

@@ -22,6 +22,7 @@ import View from '../view';
 import Text from '../text';
 import Image from '../image';
 import Modal from '../modal';
+import TouchableOpacity from '../touchableOpacity';
 
 const sideTip = require('./assets/hintTipSide.png');
 const middleTip = require('./assets/hintTipMiddle.png');
@@ -117,9 +118,13 @@ export interface HintProps {
    */
   offset?: number;
   /**
-   * Callback for the background press
+   * Callback for Hint press
    */
-  onBackgroundPress?: (event: GestureResponderEvent) => void;
+  onPress?: () => void;
+  /**
+    * Callback for the background press
+    */
+   onBackgroundPress?: (event: GestureResponderEvent) => void;
   /**
    * The hint container width
    */
@@ -437,11 +442,15 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   renderHint() {
-    const {testID} = this.props;
-
+    const {onPress, testID} = this.props;
+    const opacity = onPress ? 0.9 : 1.0;
+    const Container = onPress ? TouchableOpacity : View;
+    
     if (this.showHint) {
       return (
-        <View
+        <Container
+          activeOpacity={opacity}
+          onPress={onPress}
           animated
           style={[
             {width: this.containerWidth},
@@ -455,7 +464,7 @@ class Hint extends Component<HintProps, HintState> {
         >
           {this.renderHintTip()}
           {this.renderContent()}
-        </View>
+        </Container>
       );
     }
   }