Increase tap area of the + button on home screen (#6207)

This commit is contained in:
Elias Nahum
2022-05-03 11:58:47 -04:00
committed by GitHub
parent 02b4295464
commit bb42339c42
3 changed files with 22 additions and 3 deletions

View File

@@ -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={

View File

@@ -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]}

View File

@@ -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