change touch

app/containers/List/ListItem.tsx

@@ -61,7 +61,6 @@ interface IListItemContent {
 	right?: () => JSX.Element | null;
 	disabled?: boolean;
 	theme: TSupportedThemes;
-	testID?: string;
 	color?: string;
 	translateTitle?: boolean;
 	translateSubtitle?: boolean;
@@ -76,7 +75,6 @@ const Content = React.memo(
 		title,
 		subtitle,
 		disabled,
-		testID,
 		left,
 		right,
 		color,
@@ -91,9 +89,7 @@ const Content = React.memo(
 		const { fontScale } = useDimensions();
 
 		return (
-			<View
-				style={[styles.container, disabled && styles.disabled, { height: (heightContainer || BASE_HEIGHT) * fontScale }]}
-				{...testProps(testID || '')}>
+			<View style={[styles.container, disabled && styles.disabled, { height: (heightContainer || BASE_HEIGHT) * fontScale }]}>
 				{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 				<View style={styles.textContainer}>
 					<View style={styles.textAlertContainer}>
@@ -121,25 +117,28 @@ const Content = React.memo(
 	}
 );
 
-interface IListButtonPress extends IListItemButton {
-	onPress: Function;
-}
-
 interface IListItemButton {
 	title?: string;
 	disabled?: boolean;
 	theme: TSupportedThemes;
 	backgroundColor?: string;
+	testID?: string;
 	underlayColor?: string;
 }
 
+interface IListButtonPress extends IListItemButton {
+	onPress: Function;
+}
+
 const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
 	<Touch
 		onPress={() => onPress(props.title)}
 		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
-		theme={props.theme}>
+		theme={props.theme}
+		{...testProps(props.testID)}
+		touchable>
 		<Content {...props} />
 	</Touch>
 ));

app/utils/touch.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
+import { RectButton, RectButtonProps, TouchableOpacity } from 'react-native-gesture-handler';
 
 import { TSupportedThemes } from '../theme';
 import { themes } from '../lib/constants';
@@ -9,6 +9,7 @@ interface ITouchProps extends RectButtonProps {
 	theme: TSupportedThemes;
 	accessibilityLabel?: string;
 	testID?: string;
+	touchable?: boolean;
 }
 
 class Touch extends React.Component<ITouchProps> {
@@ -23,8 +24,15 @@ class Touch extends React.Component<ITouchProps> {
 	};
 
 	render(): JSX.Element {
-		const { children, onPress, theme, underlayColor, ...props } = this.props;
+		const { children, onPress, theme, underlayColor, touchable, ...props } = this.props;
 
+		if (touchable) {
+			return (
+				<TouchableOpacity onPress={onPress as () => void} {...(props as any)}>
+					{children}
+				</TouchableOpacity>
+			);
+		}
 		return (
 			<RectButton
 				ref={this.getRef}

app/views/SidebarView/SidebarItem.tsx

@@ -13,17 +13,18 @@ interface SidebarItemProps {
 	text: string;
 	current?: boolean;
 	onPress(): void;
-	testID: string;
+	test: string;
 	theme: TSupportedThemes;
 }
 
-const Item = React.memo(({ left, right, text, onPress, testID, current, theme }: SidebarItemProps) => (
+const Item = React.memo(({ left, right, text, onPress, test, current, theme }: SidebarItemProps) => (
 	<Touch
-		key={testID}
-		{...testProps(testID)}
+		key={test}
+		{...testProps(test)}
 		onPress={onPress}
 		theme={theme}
-		style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}>
+		style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}
+		touchable>
 		<View style={styles.itemHorizontal}>{left}</View>
 		<View style={styles.itemCenter}>
 			<Text style={[styles.itemText, { color: themes[theme].titleText }]} numberOfLines={1} accessibilityLabel={text}>

app/views/SidebarView/index.tsx

@@ -146,8 +146,10 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 	}
 
 	sidebarNavigate = (route: string) => {
+		const { navigation } = this.props;
 		// @ts-ignore
 		logEvent(events[`SIDEBAR_GO_${route.replace('StackNavigator', '').replace('View', '').toUpperCase()}`]);
+		navigation.closeDrawer();
 		Navigation.navigate(route);
 	};
 
@@ -177,7 +179,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 					text={I18n.t('Admin_Panel')}
 					left={<CustomIcon name='settings' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate(routeName)}
-					testID='sidebar-admin'
+					test='sidebar-admin'
 					theme={theme!}
 					current={this.currentItemKey === routeName}
 				/>
@@ -188,12 +190,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 	renderNavigation = () => {
 		const { theme } = this.props;
 		return (
-			<>
+			<View>
 				<SidebarItem
 					text={I18n.t('Chats')}
 					left={<CustomIcon name='message' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate('ChatsStackNavigator')}
-					testID='sidebar-chats'
+					test='sidebar-chats'
 					theme={theme!}
 					current={this.currentItemKey === 'ChatsStackNavigator'}
 				/>
@@ -201,7 +203,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 					text={I18n.t('Profile')}
 					left={<CustomIcon name='user' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate('ProfileStackNavigator')}
-					testID='sidebar-profile'
+					test='sidebar-profile'
 					theme={theme!}
 					current={this.currentItemKey === 'ProfileStackNavigator'}
 				/>
@@ -209,7 +211,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 					text={I18n.t('Display')}
 					left={<CustomIcon name='sort' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')}
-					testID='sidebar-display'
+					test='sidebar-display'
 					theme={theme!}
 					current={this.currentItemKey === 'DisplayPrefStackNavigator'}
 				/>
@@ -217,12 +219,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 					text={I18n.t('Settings')}
 					left={<CustomIcon name='administration' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate('SettingsStackNavigator')}
-					testID='sidebar-settings'
+					test='sidebar-settings'
 					theme={theme!}
 					current={this.currentItemKey === 'SettingsStackNavigator'}
 				/>
 				{this.renderAdmin()}
-			</>
+			</View>
 		);
 	};