Fix/Badge - add hitSlop support to badge container (#724)

* Adding hitSlop support to badge container

* Adding hitSlop PropType

Author: ArnonZ

src/components/badge/index.js

@@ -44,6 +44,15 @@ export default class Badge extends PureBaseComponent {
      * the badge size (default, small)
      */
     size: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(BADGE_SIZES)), PropTypes.number]),
+    /**
+     * Defines how far a touch event can start away from the badge.
+     */
+    hitSlop: PropTypes.shape({
+      top: PropTypes.number,
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number
+    }),
     /**
      * width of border around the badge
      */
@@ -212,6 +221,7 @@ export default class Badge extends PureBaseComponent {
       borderWidth,
       backgroundColor,
       containerStyle,
+      hitSlop,
       icon,
       onPress,
       testId,
@@ -226,7 +236,7 @@ export default class Badge extends PureBaseComponent {
     const Container = !_.isEmpty(animationProps) ? AnimatableView : onPress ? TouchableOpacity : View;
     if (!_.isEmpty(animationProps)) {
       console.warn('Badge component will soon stop supporting animationProps.' +
-          'Please wrap your Badge component with your own animation component, such as Animatable.View',);
+          'Please wrap your Badge component with your own animation component, such as Animatable.View');
     }
     return (
       // The extra View wrapper is to break badge's flex-ness
@@ -237,6 +247,7 @@ export default class Badge extends PureBaseComponent {
           style={[sizeStyle, this.styles.badge, borderStyle, backgroundStyle]}
           onPress={onPress}
           activeOpacity={activeOpacity}
+          hitSlop={hitSlop}
           {...animationProps}
         >
           {icon ? this.renderIcon() : this.renderLabel()}