Redid the implementation of the icon in the TextFieldBase to work on mobile

front/components/UI/TextFieldBase.tsx

@@ -1,6 +1,6 @@
 import { Eye, EyeSlash, Icon } from 'iconsax-react-native';
 import React, { useState } from 'react';
-import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { View, StyleSheet, StyleProp, ViewStyle, Pressable } from 'react-native';
 import InteractiveBase from './InteractiveBase';
 import { Input, useTheme } from 'native-base';
 
@@ -102,7 +102,7 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
 
 	return (
 		<InteractiveBase
-			style={[style, { borderRadius: 12 }]}
+			style={[style, { borderRadius: 12, width: '100%' }]}
 			styleAnimate={styleAnimate}
 			focusable={false}
 		>
@@ -116,20 +116,23 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
 						/>
 					)}
 				</View>
-				<Input
+				<View style={styles.input}>
-					variant="unstyled"
+					<Input
-					w="100%"
+						variant="unstyled"
-					style={[styles.input, icon ? {} : { paddingLeft: 12 }]}
+						style={{
-					autoComplete={autoComplete}
+							width: 0,
-					placeholder={placeholder + (isRequired ? '*' : '')}
+						}}
-					placeholderTextColor={colors.text[700]}
+						autoComplete={autoComplete}
-					secureTextEntry={isSecret ? !isPasswordVisible : false}
+						placeholder={placeholder + (isRequired ? '*' : '')}
-					onFocus={() => setFocused(true)}
+						placeholderTextColor={colors.text[700]}
-					onBlur={() => setFocused(false)}
+						secureTextEntry={isSecret ? !isPasswordVisible : false}
-					{...props}
+						onFocus={() => setFocused(true)}
-				/>
+						onBlur={() => setFocused(false)}
+						{...props}
+					/>
+				</View>
 				{isSecret && (
-					<TouchableOpacity
+					<Pressable
 						style={styles.iconContainerRight}
 						onPress={() => setPasswordVisible((prevState) => !prevState)}
 					>
@@ -146,7 +149,7 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
 								variant="Bold"
 							/>
 						)}
-					</TouchableOpacity>
+					</Pressable>
 				)}
 			</View>
 		</InteractiveBase>
@@ -157,25 +160,29 @@ const styles = StyleSheet.create({
 	container: {
 		display: 'flex',
 		alignItems: 'center',
-		justifyContent: 'center',
+		justifyContent: 'space-between',
 		flexDirection: 'row',
+		gap: 5,
+		width: '100%',
+		paddingHorizontal: 12,
 	},
 	input: {
-		flex: 1,
+		flexGrow: 1,
-		paddingHorizontal: 12 + 20 + 12,
+		flexShrink: 1,
-		paddingVertical: 12,
+		paddingVertical: 8,
 		// outlineStyle: 'none',
+		width: 0,
 	},
 	iconContainerLeft: {
-		position: 'absolute',
+		flexGrow: 0,
-		left: 12,
+		flexShrink: 0,
-		zIndex: 1,
+		width: 20,
 	},
 	iconContainerRight: {
-		position: 'absolute',
 		// outlineStyle: 'none',
-		right: 12,
+		flexGrow: 0,
-		zIndex: 1,
+		flexShrink: 0,
+		width: 20,
 	},
 });
 

front/views/HomeView.tsx

@@ -42,25 +42,6 @@ const HomeView = (props: RouteProps<{}>) => {
 	}
 	return (
 		<ScaffoldCC routeName={props.route.name}>
-			<Flex>
-				<Stack
-					space={4}
-					display={{ base: 'block', md: 'flex' }}
-					direction={{ base: 'column', md: 'row' }}
-					textAlign={{ base: 'center', md: 'inherit' }}
-					justifyContent="space-evenly"
-				>
-					<Translate
-						fontSize="xl"
-						flex={2}
-						translationKey="welcome"
-						format={(welcome) => `${welcome} ${userQuery.data.name}!`}
-					/>
-					<Box flex={1}>
-						<ProgressBar xp={userQuery.data.data.xp} />
-					</Box>
-				</Stack>
-			</Flex>
 			<Stack direction={{ base: 'column', lg: 'row' }} space={5} paddingTop={5}>
 				<VStack flex={{ lg: 2 }} space={5}>
 					<SongCardGrid

front/views/SigninView.tsx

@@ -84,6 +84,7 @@ const SigninView = () => {
 					isRequired
 				/>,
 				<TextFormField
+					style={{ width: '100%', flex: 1 }}
 					key={'signin-form-2'}
 					error={formData.password.error}
 					icon={Lock1}