/* eslint-disable react/forbid-prop-types */
/**
 * mSupply Mobile
 * Sustainable Solutions (NZ) Ltd. 2019
 */

import React from 'react';
import { TouchableOpacity as TouchableHighlight, StyleSheet, View, Text } from 'react-native';
import PropTypes from 'prop-types';

import globalStyles from '../globalStyles/index';

/**
 * Simple component rendering a button with an icon, and option text label on the right side
 *
 * @prop {Node} Icon An icon component (JSX literal).
 * @prop {Func} onPress OnPress callback.
 * @prop {Func} onPressIn onPressIn callback.
 * @prop {Func} onPressOut  onPressOut callback.
 * @prop {Boolean} containerStyle  override default styles.
 * @prop {Boolean} isDisabled  When true, no action on press. Disabled styling too.
 * @prop {String} label Button label text to right of icon
 */
export const IconButton = ({
  Icon,
  onPress,
  onPressIn,
  onPressOut,
  containerStyle,
  isDisabled,
  label,
  labelStyle,
  right,
}) => {
  const internalLabelStyle = [localStyles.label, globalStyles.authWindowButtonText, labelStyle];
  const buttonContainerStyle = [localStyles.buttonContainer, containerStyle];
  const Container = isDisabled ? View : TouchableHighlight;

  return (
    <Container
      onPressIn={onPressIn}
      onPressOut={onPressOut}
      onPress={onPress}
      style={buttonContainerStyle}
    >
      {!right && Icon}
      {label && <Text style={internalLabelStyle}>{label}</Text>}
      {right && Icon}
    </Container>
  );
};

IconButton.defaultProps = {
  onPress: null,
  onPressIn: null,
  onPressOut: null,
  containerStyle: null,
  isDisabled: false,
  label: null,
  labelStyle: {},
  right: false,
};

IconButton.propTypes = {
  labelStyle: PropTypes.object,
  Icon: PropTypes.node.isRequired,
  onPress: PropTypes.func,
  onPressIn: PropTypes.func,
  onPressOut: PropTypes.func,
  containerStyle: PropTypes.object,
  isDisabled: PropTypes.bool,
  label: PropTypes.string,
  right: PropTypes.bool,
};

const localStyles = StyleSheet.create({
  label: {
    paddingHorizontal: 5,
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

@@ -952,16 +952,27 @@
  right,%0A
+  hitSlop,%0A
 %7D) =%3E %7B%0A
@@ -1315,16 +1315,40 @@
 nPress%7D%0A
+      hitSlop=%7BhitSlop%7D%0A
       st
@@ -1694,16 +1694,31 @@
  false,%0A
+  hitSlop: %7B%7D,%0A
 %7D;%0A%0AIcon
@@ -1738,16 +1738,165 @@
 pes = %7B%0A
+  hitSlop: PropTypes.shape(%7B%0A    bottom: PropTypes.number,%0A    top: PropTypes.number,%0A    left: PropTypes.number,%0A    right: PropTypes.number,%0A  %7D),%0A
   labelS

Add hitSlop prop to iconbutton