From bb42339c42ef3cfc1ff17ea57613a52a3fa360d9 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Tue, 3 May 2022 11:58:47 -0400
Subject: [PATCH] Increase tap area of the + button on home screen (#6207)

---
 .../categories_list/__snapshots__/index.test.tsx.snap  | 10 +++++++++-
 .../header/__snapshots__/header.test.tsx.snap          |  8 ++++++++
 .../channel_list/categories_list/header/header.tsx     |  7 +++++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap b/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
index 39b557dab6..5f93ac04f8 100644
--- a/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
@@ -109,6 +109,14 @@ exports[`components/categories_list should render channels error 1`] = `
         accessible={true}
         collapsable={false}
         focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 30,
+            "left": 20,
+            "right": 20,
+            "top": 10,
+          }
+        }
         onClick={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -368,7 +376,7 @@ exports[`components/categories_list should render team error 1`] = `
             "opacity": 1,
           }
         }
-        testID="channel_list_header.plus.button"
+        testID="channel_list_header.logout.button"
       >
         <Text
           style={
diff --git a/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap b/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
index 91c6653c7c..c6c0f76e8e 100644
--- a/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
@@ -89,6 +89,14 @@ exports[`components/channel_list/header Channel List Header Component should mat
       accessible={true}
       collapsable={false}
       focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 30,
+          "left": 20,
+          "right": 20,
+          "top": 10,
+        }
+      }
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
diff --git a/app/screens/home/channel_list/categories_list/header/header.tsx b/app/screens/home/channel_list/categories_list/header/header.tsx
index 442d41c30f..ba9b36c646 100644
--- a/app/screens/home/channel_list/categories_list/header/header.tsx
+++ b/app/screens/home/channel_list/categories_list/header/header.tsx
@@ -3,7 +3,7 @@
 
 import React, {useCallback, useEffect} from 'react';
 import {useIntl} from 'react-intl';
-import {Text, View} from 'react-native';
+import {Insets, Text, View} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
@@ -75,6 +75,8 @@ const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({
     },
 }));
 
+const hitSlop: Insets = {top: 10, bottom: 30, left: 20, right: 20};
+
 const ChannelListHeader = ({canCreateChannels, canJoinChannels, displayName, iconPad, onHeaderPress}: Props) => {
     const theme = useTheme();
     const isTablet = useIsTablet();
@@ -153,6 +155,7 @@ const ChannelListHeader = ({canCreateChannels, canJoinChannels, displayName, ico
                         </View>
                     </TouchableWithFeedback>
                     <TouchableWithFeedback
+                        hitSlop={hitSlop}
                         onPress={onPress}
                         style={styles.plusButton}
                         testID='channel_list_header.plus.button'
@@ -185,7 +188,7 @@ const ChannelListHeader = ({canCreateChannels, canJoinChannels, displayName, ico
                 </View>
                 <TouchableWithFeedback
                     onPress={onLogoutPress}
-                    testID='channel_list_header.plus.button'
+                    testID='channel_list_header.logout.button'
                     type='opacity'
                 >
                     <Text