Chore: Migrate Touch to hooks

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -2,13 +2,13 @@ import { Text } from 'react-native';
 import React from 'react';
 import { BottomSheetView, BottomSheetFlatList } from '@gorhom/bottom-sheet';
 
-import { Button } from './Button';
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import { IActionSheetItem, Item } from './Item';
 import { TActionSheetOptionsItem } from './Provider';
 import styles from './styles';
 import * as List from '../List';
+import Touch from '../Touch';
 
 interface IBottomSheetContentProps {
 	hasCancel?: boolean;
@@ -18,19 +18,17 @@ interface IBottomSheetContentProps {
 }
 
 const BottomSheetContent = React.memo(({ options, hasCancel, hide, children }: IBottomSheetContentProps) => {
-	const { theme, colors } = useTheme();
+	const { colors } = useTheme();
 
 	const renderFooter = () =>
 		hasCancel ? (
-			<Button
+			<Touch
 				onPress={hide}
 				style={[styles.button, { backgroundColor: colors.auxiliaryBackground }]}
-				// TODO: Remove when migrate Touch
-				theme={theme}
 				accessibilityLabel={I18n.t('Cancel')}
 			>
 				<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text>
-			</Button>
+			</Touch>
 		) : null;
 
 	const renderItem = ({ item }: { item: IActionSheetItem['item'] }) => <Item item={item} hide={hide} />;

app/containers/ActionSheet/Item.tsx

@@ -4,9 +4,9 @@ import { Text, View } from 'react-native';
 import { themes } from '../../lib/constants';
 import { CustomIcon } from '../CustomIcon';
 import { useTheme } from '../../theme';
-import { Button } from './Button';
 import { TActionSheetOptionsItem } from './Provider';
 import styles from './styles';
+import Touch from '../Touch';
 
 export interface IActionSheetItem {
 	item: TActionSheetOptionsItem;
@@ -21,12 +21,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 	};
 
 	return (
-		<Button
-			onPress={onPress}
-			style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
-			theme={theme}
-			testID={item.testID}
-		>
+		<Touch onPress={onPress} style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]} testID={item.testID}>
 			{item.icon ? (
 				<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />
 			) : null}
@@ -42,6 +37,6 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 				</Text>
 			</View>
 			{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
-		</Button>
+		</Touch>
 	);
 });

app/containers/ActionSheet/index.ts

@@ -1,2 +1 @@
 export * from './Provider';
-export * from './Button';

app/containers/BackgroundContainer/index.stories.js

@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react-native';
 
 import { ThemeContext } from '../../theme';
 import { longText } from '../../../storybook/utils';
+import { themes } from '../../lib/constants';
 import BackgroundContainer from '.';
 
 const stories = storiesOf('BackgroundContainer', module);
@@ -17,7 +18,7 @@ stories.add('text', () => <BackgroundContainer text='Text here' />);
 stories.add('long text', () => <BackgroundContainer text={longText} />);
 
 const ThemeStory = ({ theme, ...props }) => (
-	<ThemeContext.Provider value={{ theme }}>
+	<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
 		<BackgroundContainer {...props} />
 	</ThemeContext.Provider>
 );

app/containers/DirectoryItem/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View, ViewStyle } from 'react-native';
 
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../Touch';
 import Avatar from '../Avatar';
 import RoomTypeIcon from '../RoomTypeIcon';
 import styles, { ROW_HEIGHT } from './styles';
@@ -49,7 +49,7 @@ const DirectoryItem = ({
 }: IDirectoryItem): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID} theme={theme}>
+		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID}>
 			<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
 				<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
 				<View style={styles.directoryItemTextContainer}>

app/containers/List/ListItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { I18nManager, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../Touch';
 import { themes } from '../../lib/constants';
 import sharedStyles from '../../views/Styles';
 import { TSupportedThemes, useTheme } from '../../theme';
@@ -139,7 +139,6 @@ const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }
 		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
-		theme={props.theme}
 	>
 		<Content {...props} />
 	</Touch>

app/containers/LoginServices/ButtonService.tsx

@@ -2,20 +2,19 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 import { useTheme } from '../../theme';
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../Touch';
 import { CustomIcon } from '../CustomIcon';
 import { IButtonService } from './interfaces';
 import styles from './styles';
 
 const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, icon }: IButtonService) => {
-	const { theme, colors } = useTheme();
+	const { colors } = useTheme();
 
 	return (
 		<Touch
 			key={name}
 			onPress={onPress}
 			style={[styles.serviceButton, { backgroundColor }]}
-			theme={theme}
 			activeOpacity={0.5}
 			underlayColor={colors.buttonText}
 		>

app/containers/MessageActions/Header.tsx

@@ -7,10 +7,10 @@ import { CustomIcon } from '../CustomIcon';
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import database from '../../lib/database';
-import { Button } from '../ActionSheet';
 import { useDimensions } from '../../dimensions';
 import sharedStyles from '../../views/Styles';
 import { TAnyMessageModel, TFrequentlyUsedEmojiModel } from '../../definitions';
+import Touch from '../Touch';
 
 type TItem = TFrequentlyUsedEmojiModel | string;
 
@@ -75,30 +75,28 @@ const HeaderItem = ({ item, onReaction, server, theme }: THeaderItem) => {
 	const emojiModel = item as TFrequentlyUsedEmojiModel;
 	const emoji = (emojiModel.id ? emojiModel.content : item) as string;
 	return (
-		<Button
+		<Touch
 			testID={`message-actions-emoji-${emoji}`}
 			onPress={() => onReaction({ emoji: `:${emoji}:` })}
 			style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
-			theme={theme}
 		>
 			{emojiModel?.isCustom ? (
 				<CustomEmoji style={styles.customEmoji} emoji={emojiModel} baseUrl={server} />
 			) : (
 				<Text style={styles.headerIcon}>{shortnameToUnicode(`:${emoji}:`)}</Text>
 			)}
-		</Button>
+		</Touch>
 	);
 };
 
 const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
-	<Button
+	<Touch
 		testID='add-reaction'
-		onPress={onReaction}
+		onPress={(param: any) => onReaction(param)}
 		style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
-		theme={theme}
 	>
 		<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} />
-	</Button>
+	</Touch>
 );
 
 const Header = React.memo(({ handleReaction, server, message, isMasterDetail }: IHeader) => {

app/containers/Passcode/Base/Button.tsx

@@ -3,7 +3,7 @@ import { Text } from 'react-native';
 
 import styles from './styles';
 import { themes } from '../../../lib/constants';
-import Touch from '../../../lib/methods/helpers/touch';
+import Touch from '../../Touch';
 import { CustomIcon, TIconsName } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 
@@ -25,7 +25,6 @@ const Button = React.memo(({ text, disabled, onPress, icon }: IPasscodeButton) =
 			underlayColor={themes[theme].passcodeButtonActive}
 			rippleColor={themes[theme].passcodeButtonActive}
 			enabled={!disabled}
-			theme={theme}
 			onPress={press}
 		>
 			{icon ? (

app/containers/RoomItem/Touchable.tsx

@@ -14,7 +14,7 @@ import {
 	PanGestureHandlerEventPayload
 } from 'react-native-gesture-handler';
 
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../Touch';
 import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
 import { LeftActions, RightActions } from './Actions';
 import { ITouchableProps } from './interfaces';
@@ -38,7 +38,7 @@ const Touchable = ({
 	swipeEnabled,
 	displayMode
 }: ITouchableProps): React.ReactElement => {
-	const { theme, colors } = useTheme();
+	const { colors } = useTheme();
 
 	const rowOffSet = useSharedValue(0);
 	const transX = useSharedValue(0);
@@ -221,7 +221,6 @@ const Touchable = ({
 						<Animated.View style={animatedStyles}>
 							<Touch
 								onPress={handlePress}
-								theme={theme}
 								testID={testID}
 								style={{
 									backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor

app/containers/Touch.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
+
+import { useTheme } from '../theme';
+
+export interface ITouchProps extends RectButtonProps {
+	children: React.ReactNode;
+	accessibilityLabel?: string;
+	testID?: string;
+}
+
+const Touch = React.forwardRef<RectButton, ITouchProps>(({ children, onPress, underlayColor, ...props }, ref) => {
+	const { colors } = useTheme();
+
+	return (
+		<RectButton
+			ref={ref}
+			onPress={onPress}
+			activeOpacity={1}
+			underlayColor={underlayColor || colors.bannerBackground}
+			rippleColor={colors.bannerBackground}
+			{...props}
+		>
+			{children}
+		</RectButton>
+	);
+});
+
+export default Touch;

app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
-import Touch from '../../../lib/methods/helpers/touch';
+import Touch from '../../../containers/Touch';
 import { CustomIcon, TIconsName } from '../../../containers/CustomIcon';
 import sharedStyles from '../../Styles';
 
@@ -34,7 +34,7 @@ const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) =>
 	const { theme } = useTheme();
 
 	return (
-		<Touch theme={theme} onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
+		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
 			<View style={styles.container}>
 				<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text>
 				{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].auxiliaryText} /> : null}

app/views/DirectoryView/Options.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native';
 
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../../containers/Touch';
 import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import Check from '../../containers/Check';
 import I18n from '../../i18n';
@@ -64,12 +64,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 		}
 
 		return (
-			<Touch
-				onPress={() => changeType(itemType)}
-				style={styles.dropdownItemButton}
-				theme={theme}
-				accessibilityLabel={I18n.t(text)}
-			>
+			<Touch onPress={() => changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}>
 				<View style={styles.dropdownItemContainer}>
 					<CustomIcon name={icon} size={22} color={themes[theme].bodyText} style={styles.dropdownItemIcon} />
 					<Text style={[styles.dropdownItemText, { color: themes[theme].bodyText }]}>{I18n.t(text)}</Text>
@@ -97,7 +92,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 				<Animated.View
 					style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: themes[theme].backgroundColor }]}
 				>
-					<Touch onPress={this.close} theme={theme} accessibilityLabel={I18n.t('Search_by')}>
+					<Touch onPress={this.close} accessibilityLabel={I18n.t('Search_by')}>
 						<View
 							style={[
 								styles.dropdownContainerHeader,

app/views/DirectoryView/index.tsx

@@ -7,7 +7,7 @@ import { CompositeNavigationProp } from '@react-navigation/native';
 import { ChatsStackParamList } from '../../stacks/types';
 import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
 import * as List from '../../containers/List';
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../../containers/Touch';
 import DirectoryItem from '../../containers/DirectoryItem';
 import sharedStyles from '../Styles';
 import I18n from '../../i18n';
@@ -210,7 +210,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		return (
 			<>
 				<SearchBox onChangeText={this.onSearchChangeText} onSubmitEditing={this.search} testID='directory-view-search' />
-				<Touch onPress={this.toggleDropdown} style={styles.dropdownItemButton} testID='directory-view-dropdown' theme={theme}>
+				<Touch onPress={this.toggleDropdown} style={styles.dropdownItemButton} testID='directory-view-dropdown'>
 					<View
 						style={[
 							sharedStyles.separatorVertical,