Chore: Migrate Touch to hooks (#4422)

* migrate to hooks and fix types

* fix import and remove theme prop

* update tests

* fix touch file name

* wip

* rename

* change to touch

* remove button and change to touch

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/Button.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-
-import { isAndroid } from '../../lib/methods/helpers';
-import Touch from '../../lib/methods/helpers/touch';
-
-// Taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet#touchables
-export const Button: typeof React.Component = isAndroid ? Touch : TouchableOpacity;

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
+		<Touch onPress={onPress} style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]} testID={item.testID}>
-			onPress={onPress}
-			style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
-			theme={theme}
-			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/lib/methods/helpers/touch.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
-
-import { TSupportedThemes } from '../../../theme';
-import { themes } from '../../constants';
-
-interface ITouchProps extends RectButtonProps {
-	children: React.ReactNode;
-	theme: TSupportedThemes;
-	accessibilityLabel?: string;
-	testID?: string;
-}
-
-class Touch extends React.Component<ITouchProps> {
-	private ref: any;
-
-	setNativeProps(props: ITouchProps): void {
-		this.ref.setNativeProps(props);
-	}
-
-	getRef = (ref: RectButton): void => {
-		this.ref = ref;
-	};
-
-	render(): JSX.Element {
-		const { children, onPress, theme, underlayColor, ...props } = this.props;
-
-		return (
-			<RectButton
-				ref={this.getRef}
-				onPress={onPress}
-				activeOpacity={1}
-				underlayColor={underlayColor || themes[theme].bannerBackground}
-				rippleColor={themes[theme].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
+			<Touch onPress={() => changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}>
-				onPress={() => changeType(itemType)}
-				style={styles.dropdownItemButton}
-				theme={theme}
-				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,

app/views/NewMessageView.tsx

@@ -21,7 +21,7 @@ import UserItem from '../containers/UserItem';
 import { withTheme } from '../theme';
 import { goRoom, TGoRoomItem } from '../lib/methods/helpers/goRoom';
 import log, { events, logEvent } from '../lib/methods/helpers/log';
-import Touch from '../lib/methods/helpers/touch';
+import Touch from '../containers/Touch';
 import sharedStyles from './Styles';
 import { NewMessageStackParamList } from '../stacks/types';
 import { search } from '../lib/methods';
@@ -180,7 +180,7 @@ class NewMessageView extends React.Component<INewMessageViewProps, INewMessageVi
 	renderButton = ({ onPress, testID, title, icon, first }: IButton) => {
 		const { theme } = this.props;
 		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={[
 						first ? sharedStyles.separatorVertical : sharedStyles.separatorBottom,

app/views/NewServerView/ServerInput/Item.tsx

@@ -5,7 +5,7 @@ import { BorderlessButton } from 'react-native-gesture-handler';
 import { themes } from '../../../lib/constants';
 import { CustomIcon } from '../../../containers/CustomIcon';
 import sharedStyles from '../../Styles';
-import Touch from '../../../lib/methods/helpers/touch';
+import Touch from '../../../containers/Touch';
 import { TServerHistoryModel } from '../../../definitions/IServerHistory';
 import { TSupportedThemes } from '../../../theme';
 
@@ -36,7 +36,7 @@ interface IItem {
 }
 
 const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => (
-	<Touch style={styles.container} onPress={() => onPress(item.url)} theme={theme} testID={`server-history-${item.url}`}>
+	<Touch style={styles.container} onPress={() => onPress(item.url)} testID={`server-history-${item.url}`}>
 		<View style={styles.content}>
 			<Text numberOfLines={1} style={[styles.server, { color: themes[theme].bodyText }]}>
 				{item.url}

app/views/ProfileView/index.tsx

@@ -8,7 +8,7 @@ import { dequal } from 'dequal';
 import omit from 'lodash/omit';
 import { StackNavigationOptions } from '@react-navigation/stack';
 
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../../containers/Touch';
 import KeyboardView from '../../containers/KeyboardView';
 import sharedStyles from '../Styles';
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
@@ -376,7 +376,6 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 				onPress={onPress}
 				style={[styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: themes[theme].borderColor }]}
 				enabled={!disabled}
-				theme={theme}
 			>
 				{child}
 			</Touch>

app/views/RoomActionsView/index.tsx

@@ -28,7 +28,7 @@ import { ChatsStackParamList } from '../../stacks/types';
 import { withTheme } from '../../theme';
 import { showConfirmationAlert, showErrorAlert } from '../../lib/methods/helpers/info';
 import log, { events, logEvent } from '../../lib/methods/helpers/log';
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../../containers/Touch';
 import sharedStyles from '../Styles';
 import styles from './styles';
 import { ERoomType } from '../../definitions/ERoomType';
@@ -807,7 +807,6 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 					accessibilityLabel={I18n.t('Room_Info')}
 					enabled={!isGroupChatHandler}
 					testID='room-actions-info'
-					theme={theme}
 				>
 					<View style={[styles.roomInfoContainer, { height: 72 * fontScale }]}>
 						<Avatar text={avatar} style={styles.avatar} size={50 * fontScale} type={t} rid={rid}>

app/views/RoomView/List/NavBottomFAB.tsx

@@ -5,7 +5,7 @@ import Animated, { call, cond, greaterOrEq, useCode } from 'react-native-reanima
 import { themes } from '../../../lib/constants';
 import { CustomIcon } from '../../../containers/CustomIcon';
 import { useTheme } from '../../../theme';
-import Touch from '../../../lib/methods/helpers/touch';
+import Touch from '../../../containers/Touch';
 import { hasNotch } from '../../../lib/methods/helpers';
 
 const SCROLL_LIMIT = 200;
@@ -63,7 +63,7 @@ const NavBottomFAB = ({
 	}
 	return (
 		<Animated.View style={[styles.container, { bottom }]} testID='nav-jump-to-bottom'>
-			<Touch onPress={handleOnPress} theme={theme} style={[styles.button, { backgroundColor: themes[theme].backgroundColor }]}>
+			<Touch onPress={handleOnPress} style={[styles.button, { backgroundColor: themes[theme].backgroundColor }]}>
 				<View style={[styles.content, { borderColor: themes[theme].borderColor }]}>
 					<CustomIcon name='chevron-down' color={themes[theme].auxiliaryTintColor} size={36} />
 				</View>

app/views/RoomView/LoadMore/LoadMore.stories.js

@@ -24,7 +24,7 @@ stories.add('basic', () => (
 ));
 
 const ThemeStory = ({ theme }) => (
-	<ThemeContext.Provider value={{ theme }}>
+	<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
 		<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
 			<LoadMore load={load} type={MessageTypeLoad.PREVIOUS_CHUNK} />
 			<Message msg='Hey!' theme={theme} />

app/views/RoomView/LoadMore/index.tsx

@@ -4,7 +4,7 @@ import { ActivityIndicator, StyleSheet, Text } from 'react-native';
 import { MessageTypeLoad, themes } from '../../../lib/constants';
 import { MessageType } from '../../../definitions';
 import { useTheme } from '../../../theme';
-import Touch from '../../../lib/methods/helpers/touch';
+import Touch from '../../../containers/Touch';
 import sharedStyles from '../../Styles';
 import I18n from '../../../i18n';
 
@@ -59,7 +59,7 @@ const LoadMore = ({
 	}
 
 	return (
-		<Touch onPress={handleLoad} style={styles.button} theme={theme} enabled={!loading}>
+		<Touch onPress={handleLoad} style={styles.button} enabled={!loading}>
 			{loading ? (
 				<ActivityIndicator color={themes[theme].auxiliaryText} />
 			) : (

app/views/RoomView/index.tsx

@@ -9,7 +9,7 @@ import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
 import { Subscription } from 'rxjs';
 
 import { getRoutingConfig } from '../../lib/services/restApi';
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../../containers/Touch';
 import { replyBroadcast } from '../../actions/messages';
 import database from '../../lib/database';
 import Message from '../../containers/message';
@@ -1385,7 +1385,6 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 						onPress={this.resumeRoom}
 						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
 						enabled={!loading}
-						theme={theme}
 					>
 						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-chat-on-hold-button'>
 							{I18n.t('Resume')}
@@ -1407,7 +1406,6 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 						onPress={this.joinRoom}
 						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
 						enabled={!loading}
-						theme={theme}
 					>
 						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-join-button'>
 							{I18n.t(this.isOmnichannel ? 'Take_it' : 'Join')}

app/views/SidebarView/SidebarItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import Touch from '../../lib/methods/helpers/touch';
+import Touch from '../../containers/Touch';
 import { themes } from '../../lib/constants';
 import { TSupportedThemes, withTheme } from '../../theme';
 import styles from './styles';
@@ -21,7 +21,6 @@ const Item = React.memo(({ left, right, text, onPress, testID, current, theme }:
 		key={testID}
 		testID={testID}
 		onPress={onPress}
-		theme={theme}
 		style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}
 	>
 		<View style={styles.itemHorizontal}>{left}</View>

app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 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';
 
@@ -28,9 +28,9 @@ interface IDropdownItem {
 }
 
 const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => {
-	const { colors, theme } = useTheme();
+	const { colors } = useTheme();
 	return (
-		<Touch theme={theme} onPress={onPress} style={{ backgroundColor: colors.backgroundColor }}>
+		<Touch onPress={onPress} style={{ backgroundColor: colors.backgroundColor }}>
 			<View style={styles.container}>
 				<Text style={[styles.text, { color: colors.auxiliaryText }]}>{text}</Text>
 				{iconName ? <CustomIcon name={iconName} size={22} color={colors.auxiliaryText} /> : null}

storybook/stories/List.js

@@ -8,6 +8,7 @@ import SafeAreaView from '../../app/containers/SafeAreaView';
 import { longText } from '../utils';
 import { ThemeContext } from '../../app/theme';
 import { DimensionsContext } from '../../app/dimensions';
+import { themes } from '../../app/lib/constants';
 
 const stories = storiesOf('List', module);
 
@@ -176,7 +177,7 @@ const ListFull = () => (
 );
 
 const ThemeStory = ({ theme }) => (
-	<ThemeContext.Provider value={{ theme }}>
+	<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
 		<ListFull />
 	</ThemeContext.Provider>
 );