fix(profile): change layout view profile page

src/screens/Login.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { KeyboardAvoidingView, ScrollView, StatusBar, View, StyleSheet, Image, Platform, Dimensions } from 'react-native';
-import { Button, TextInput, useTheme, Text, IconButton } from 'react-native-paper';
+import { Button, TextInput, HelperText, Text } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 import { setIsLogin, setUser } from '../appredux/actions';
 import { store } from '../appredux/store';
@@ -58,13 +58,16 @@ const LoginScreen = ({ route, navigation }) => {
                                     label="Username"
                                     onBlur={onBlur}
                                     onChangeText={onChange}
-                                    value={value}
                                     style={{ marginTop: 10 }}
+                                    value={value}
                                 />
                             )}
                             name="username"
                         />
-                        {errors.username && <Text style={styles.errorMessage}>{strings('loginPage.usernameErrorMsg')}</Text>}
+                        {errors.username &&
+                            <HelperText type="error" padding='none' visible={!!errors.username}>
+                                {strings('loginPage.usernameErrorMsg')}
+                            </HelperText>}
                         <Controller
                             control={control}
                             rules={{
@@ -91,8 +94,11 @@ const LoginScreen = ({ route, navigation }) => {
                             )}
                             name="password"
                         />
+                        {errors.password &&
+                            <HelperText type="error" padding='none' visible={!!errors.password}>
+                                {strings('loginPage.passwordErrorMsg')}
+                            </HelperText>}
 
-                        {errors.password && <Text style={styles.errorMessage}>{strings('loginPage.passwordErrorMsg')}</Text>}
                         <Button
                             mode="contained"
                             onPress={handleSubmit(onSubmitLogin)}
@@ -112,9 +118,9 @@ const LoginScreen = ({ route, navigation }) => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        padding: 20
-    },
-    errorMessage: { color: 'red', fontSize: 12, padding: 0, marginTop: 5, marginBottom: 5 }
+        padding: 20,
+        backgroundColor: colors.pureWhite
+    }
 })
 
 export default LoginScreen