add hitslop to attach buttons

Author: nhannah

src/components/AttachmentPicker/components/AttachmentSelectionBar.tsx

@@ -75,7 +75,10 @@ export const AttachmentSelectionBar: React.FC = () => {
         { height: attachmentSelectionBarHeight ?? 52 },
       ]}
     >
-      <TouchableOpacity onPress={() => setPicker('images')}>
+      <TouchableOpacity
+        hitSlop={{ bottom: 15, top: 15 }}
+        onPress={() => setPicker('images')}
+      >
         <View style={[styles.icon, icon]}>
           <ImageSelectorIcon
             numberOfImageUploads={imageUploads.length}
@@ -86,6 +89,7 @@ export const AttachmentSelectionBar: React.FC = () => {
       {hasFilePicker && (
         <TouchableOpacity
           disabled={imageUploads.length > 0}
+          hitSlop={{ bottom: 15, top: 15 }}
           onPress={openFilePicker}
         >
           <View style={[styles.icon, icon]}>
@@ -96,7 +100,10 @@ export const AttachmentSelectionBar: React.FC = () => {
           </View>
         </TouchableOpacity>
       )}
-      <TouchableOpacity onPress={takeAndUploadImage}>
+      <TouchableOpacity
+        hitSlop={{ bottom: 15, top: 15 }}
+        onPress={takeAndUploadImage}
+      >
         <View style={[styles.icon, icon]}>
           <CameraSelectorIcon
             numberOfImageUploads={imageUploads.length}

src/components/MessageInput/AttachButton.tsx

@@ -58,6 +58,7 @@ const AttachButtonWithContext = <
   return (
     <TouchableOpacity
       disabled={disabled}
+      hitSlop={{ bottom: 15, left: 15, right: 5, top: 15 }}
       onPress={handleOnPress}
       style={[attachButton]}
       testID='attach-button'

src/components/MessageInput/CommandsButton.tsx

@@ -63,6 +63,7 @@ export const CommandsButtonWithContext = <
   return (
     <TouchableOpacity
       disabled={disabled}
+      hitSlop={{ bottom: 15, left: 5, right: 15, top: 15 }}
       onPress={handleOnPress}
       style={[commandsButton]}
       testID='commands-button'

src/components/MessageInput/MoreOptionsButton.tsx

@@ -57,6 +57,7 @@ const MoreOptionsButtonWithContext = <
   return (
     <TouchableOpacity
       disabled={disabled}
+      hitSlop={{ bottom: 15, left: 15, right: 15, top: 15 }}
       onPress={handleOnPress}
       style={[moreOptionsButton]}
       testID='more-options-button'