minor tweak

app/containers/Avatar/AvatarWithEdit.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 
 import Button from '../Button';
 import AvatarContainer from './AvatarContainer';
@@ -6,9 +7,22 @@ import { IAvatar } from './interfaces';
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import { BUTTON_HIT_SLOP } from '../message/utils';
-import styles from './styles';
 
-interface IAvatarContainer extends IAvatar {
+const styles = StyleSheet.create({
+	editAvatarButton: {
+		marginTop: 8,
+		paddingVertical: 8,
+		paddingHorizontal: 12,
+		marginBottom: 0,
+		height: undefined
+	},
+	textButton: {
+		fontSize: 12,
+		fontWeight: '600'
+	}
+});
+
+interface IAvatarContainer extends Omit<IAvatar, 'size'> {
 	handleEdit?: () => void;
 }
 
@@ -17,7 +31,6 @@ const AvatarWithEdit = ({
 	text = '',
 	avatar,
 	emoji,
-	size,
 	borderRadius,
 	type,
 	children,
@@ -36,7 +49,7 @@ const AvatarWithEdit = ({
 				text={text}
 				avatar={avatar}
 				emoji={emoji}
-				size={size}
+				size={120}
 				borderRadius={borderRadius}
 				type={type}
 				children={children}

app/containers/Avatar/styles.ts

@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-	editAvatarButton: {
-		marginTop: 8,
-		paddingVertical: 8,
-		paddingHorizontal: 12,
-		marginBottom: 0,
-		height: undefined
-	},
-	textButton: {
-		fontSize: 12,
-		fontWeight: '600'
-	}
-});

app/containers/Avatar/useAvatarETag.ts

@@ -23,7 +23,7 @@ export const useAvatarETag = ({
 	useEffect(() => {
 		let subscription: Subscription;
 		if (!avatarETag) {
-			(async () => {
+			const observeAvatarETag = async () => {
 				const db = database.active;
 				const usersCollection = db.get('users');
 				const subsCollection = db.get('subscriptions');
@@ -46,8 +46,8 @@ export const useAvatarETag = ({
 						setAvatarETag(r.avatarETag);
 					});
 				}
-			})();
+			};
-
+			observeAvatarETag();
 			return () => {
 				if (subscription?.unsubscribe) {
 					subscription.unsubscribe();

app/views/ChangeAvatarView/AvatarSuggestion.tsx

@@ -21,6 +21,7 @@ const AvatarSuggestion = ({
 
 	const { colors } = useTheme();
 
+	useEffect(() => {
 		const getAvatarSuggestion = async () => {
 			const result = await Services.getAvatarSuggestion();
 			const suggestions = Object.keys(result).map(service => {
@@ -34,8 +35,6 @@ const AvatarSuggestion = ({
 			});
 			setAvatarSuggestions(suggestions);
 		};
-
-	useEffect(() => {
 		getAvatarSuggestion();
 	}, []);
 

app/views/ChangeAvatarView/AvatarUrl.tsx

@@ -1,15 +1,8 @@
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import * as yup from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
 
 import I18n from '../../i18n';
 import { ControlledFormTextInput } from '../../containers/TextInput';
-import { regExpImageType } from '../../lib/methods/helpers';
-
-const schema = yup.object().shape({
-	avatarUrl: yup.string().url().matches(regExpImageType).required()
-});
 
 interface ISubmit {
 	avatarUrl: string;
@@ -18,18 +11,18 @@ interface ISubmit {
 const AvatarUrl = ({ submit }: { submit: (value: string) => void }) => {
 	const {
 		control,
-		formState: { isValid },
+		formState: { isDirty },
 		getValues
-	} = useForm<ISubmit>({ mode: 'onChange', resolver: yupResolver(schema) });
+	} = useForm<ISubmit>({ mode: 'onChange', defaultValues: { avatarUrl: '' } });
 
 	useEffect(() => {
-		if (isValid) {
+		if (isDirty) {
 			const { avatarUrl } = getValues();
 			submit(avatarUrl);
 		} else {
 			submit('');
 		}
-	}, [isValid]);
+	}, [isDirty]);
 
 	return (
 		<ControlledFormTextInput

app/views/ChangeAvatarView/index.tsx

@@ -31,7 +31,6 @@ const RESET_ROOM_AVATAR = 'resetRoomAvatar';
 
 const ChangeAvatarView = () => {
 	const [avatar, setAvatarState] = useState<IAvatar | null>(null);
-
 	const [textAvatar, setTextAvatar] = useState('');
 	const [saving, setSaving] = useState(false);
 	const { colors } = useTheme();