avatar suggestion item

app/views/ChangeAvatarView/AvatarSuggestion.tsx

@@ -4,25 +4,10 @@ import { Text, View } from 'react-native';
 import { IAvatar, IUser } from '../../definitions';
 import { Services } from '../../lib/services';
 import I18n from '../../i18n';
-import Avatar from '../../containers/Avatar';
 import styles from './styles';
 import { useTheme } from '../../theme';
-import Touch from '../../containers/Touch';
+import AvatarSuggestionItem from './AvatarSuggestionItem';
 
-const Item = ({ item, onPress, text, testID }: { item?: IAvatar; testID?: string; onPress: Function; text?: string }) => {
-	const { colors } = useTheme();
-
-	return (
-		<Touch
-			key={item?.service}
-			testID={testID}
-			onPress={() => onPress(item)}
-			style={[styles.avatarButton, { backgroundColor: colors.borderColor }]}
-		>
-			<Avatar avatar={item?.url} text={text} size={64} />
-		</Touch>
-	);
-};
 const AvatarSuggestion = ({
 	onPress,
 	user,
@@ -59,10 +44,10 @@ const AvatarSuggestion = ({
 			<Text style={[styles.itemLabel, { color: colors.titleText }]}>{I18n.t('Images_uploaded')}</Text>
 			<View style={styles.containerAvatarSuggestion}>
 				{user?.username && resetAvatar ? (
-					<Item text={`@${user.username}`} testID={`reset-avatar-suggestion`} onPress={resetAvatar} />
+					<AvatarSuggestionItem text={`@${user.username}`} testID={`reset-avatar-suggestion`} onPress={resetAvatar} />
 				) : null}
 				{avatarSuggestions.slice(0, 7).map(item => (
-					<Item item={item} testID={`${item?.service}-avatar-suggestion`} onPress={onPress} />
+					<AvatarSuggestionItem item={item} testID={`${item?.service}-avatar-suggestion`} onPress={onPress} />
 				))}
 			</View>
 		</View>

app/views/ChangeAvatarView/AvatarSuggestionItem.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { IAvatar } from '../../definitions';
+import Avatar from '../../containers/Avatar';
+import { useTheme } from '../../theme';
+
+const styles = StyleSheet.create({
+	container: {
+		width: 64,
+		height: 64,
+		alignItems: 'center',
+		justifyContent: 'center',
+		marginRight: 20,
+		marginBottom: 12,
+		borderRadius: 4
+	}
+});
+
+const AvatarSuggestionItem = ({
+	item,
+	onPress,
+	text,
+	testID
+}: {
+	item?: IAvatar;
+	testID?: string;
+	onPress: Function;
+	text?: string;
+}) => {
+	const { colors } = useTheme();
+
+	return (
+		<View key={item?.service} testID={testID} style={[styles.container, { backgroundColor: colors.borderColor }]}>
+			<Avatar avatar={item?.url} text={text} size={64} onPress={() => onPress(item)} />
+		</View>
+	);
+};
+
+export default AvatarSuggestionItem;

app/views/ChangeAvatarView/styles.ts

@@ -19,15 +19,6 @@ export default StyleSheet.create({
 		fontSize: 14,
 		...sharedStyles.textSemibold
 	},
-	avatarButton: {
-		width: 64,
-		height: 64,
-		alignItems: 'center',
-		justifyContent: 'center',
-		marginRight: 20,
-		marginBottom: 12,
-		borderRadius: 4
-	},
 	containerAvatarSuggestion: {
 		flex: 1,
 		flexWrap: 'wrap',