TextFormField now display error message without part of it being cut

front/components/UI/TextFormField.tsx

@@ -9,7 +9,7 @@ interface TextFormFieldProps extends TextFieldBaseProps {
 	error: string | null;
 }
 
-const ERROR_HEIGHT = 20;
+const ERROR_HEIGHT = 25;
 const ERROR_PADDING_TOP = 8;
 
 const TextFormField: React.FC<TextFormFieldProps> = ({ error, style, ...textFieldBaseProps }) => {
@@ -49,7 +49,12 @@ const TextFormField: React.FC<TextFormFieldProps> = ({ error, style, ...textFiel
 				}}
 			>
 				<Warning2 size="16" color="#f7253d" variant="Bold" />
-				<Text isTruncated maxW={'100%'} style={styles.errorText}>
+				<Text
+					isTruncated
+					maxW={'100%'}
+					fontSize={styles.errorText.fontSize}
+					color={styles.errorText.color}
+				>
 					{error}
 				</Text>
 			</Animated.View>
@@ -62,14 +67,14 @@ const styles = StyleSheet.create({
 		width: '100%',
 	},
 	errorContainer: {
+		display: 'flex',
+		gap: 8,
 		flexDirection: 'row',
-		alignItems: 'center',
 		paddingLeft: 12,
 	},
 	errorText: {
 		color: '#f7253d',
 		fontSize: 12,
-		marginLeft: 8,
 	},
 });
 

front/views/V2/DiscoveryView.tsx

@@ -6,7 +6,7 @@ import SongCardInfo from '../../components/V2/SongCardInfo';
 import API from '../../API';
 import { useNavigation } from '../../Navigation';
 import GoldenRatio from '../../components/V2/GoldenRatio';
-import { useTranslation } from 'react-i18next';
+import { translate } from '../../i18n/i18n';
 
 const HomeView = () => {
 	const suggestionsQuery = useQuery(
@@ -17,8 +17,6 @@ const HomeView = () => {
 	const isPhone = screenSize === 'small';
 	const topSuggestions = suggestionsQuery.data?.slice(0, 4) ?? [];
 	const suggestions = suggestionsQuery.data?.slice(4) ?? [];
-	const { t } = useTranslation();
-
 	return (
 		<ScrollView>
 			<View
@@ -57,7 +55,7 @@ const HomeView = () => {
 							marginTop: 24,
 						}}
 					>
-						{t('discoverySuggestionSectionTitle')}
+						{translate('discoverySuggestionSectionTitle')}
 					</Text>
 					<View
 						style={{