SurveyApp/src/component/myAccount.tsx

import React from "react";
import {
    TextInput,
    StatusBar,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    RefreshControl,
    Pressable,
    TouchableOpacity,
  } from 'react-native';
import { useEffect, useState } from 'react';

import AsyncStorage from '@react-native-async-storage/async-storage';
import {useIsFocused} from '@react-navigation/native';
import AwesomeAlert from "react-native-awesome-alerts";
import LinearGradient from 'react-native-linear-gradient';

export default function MyAccount() {
    return(
        <View style={{flex:1}}>
            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
                <View key={"image section"} style={{alignItems:'center',justifyContent:'center',paddingLeft: 10,paddingRight:10,marginTop:'10%',height:'20%'}}>
                    <View key={"image container"} style={[{width:150,height:150,borderRadius:100,borderWidth:12,borderColor:'#EDEDED',alignItems:'center',justifyContent:'center',shadowColor:'black'}]}>
                        <Image
                            source={require('../../assets/img/mcf.jpg')}
                            style={[{width:131,height:131,borderRadius:100}]}
                        />
                    </View>
                </View>
                <View key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}>
                    <View key={"name"} style={{marginBottom:20}}>
                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Name :</Text>
                        <TextInput style={{
                            backgroundColor:'#F9F9F9',
                            color:'#6B5E5E',
                            height : 50,
                            paddingHorizontal : 20,
                            borderColor : "#A6A6A6",
                            borderWidth : 1.5,
                            borderRadius: 7,
                        }} placeholderTextColor={'grey'} value={"Muhammad Choirul Fajri"} autoCorrect={false} autoCapitalize='none' />
                    </View>
                    <View key={"email"} style={{marginBottom:20}}>
                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Email :</Text>
                        <TextInput style={{
                            backgroundColor:'#F9F9F9',
                            color:'#6B5E5E',
                            height : 50,
                            paddingHorizontal : 20,
                            borderColor : "#A6A6A6",
                            borderWidth : 1.5,
                            borderRadius: 7,
                        }} placeholderTextColor={'grey'} autoComplete='email' value={"mfajri@geonet.co.id"} autoCorrect={false} autoCapitalize='none' />
                    </View>
                    <View key={"phone"} style={{marginBottom:20}}>
                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Phone :</Text>
                        <TextInput style={{
                            backgroundColor:'#F9F9F9',
                            color:'#6B5E5E',
                            height : 50,
                            paddingHorizontal : 20,
                            borderColor : "#A6A6A6",
                            borderWidth : 1.5,
                            borderRadius: 7,
                        }} placeholderTextColor={'grey'} value={"6281295807554"} autoCorrect={false} autoCapitalize='none' />
                    </View>
                    <View key={"address"} style={{marginBottom:20}}>
                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Address :</Text>
                        <TextInput
                            multiline
                            numberOfLines={5}
                            maxLength={255}
                            style={{
                                backgroundColor:'#F9F9F9',
                                color:'#6B5E5E',
                                // height : 50,
                                paddingHorizontal : 20,
                                borderColor : "#A6A6A6",
                                borderWidth : 1.5,
                                borderRadius: 7,
                                textAlignVertical:'top'
                            }} placeholderTextColor={'grey'} value={"Bekasi, West Java"} autoCorrect={false} autoCapitalize='none'
                        />
                    </View>
                    <View key={"Button"}>
                        <TouchableOpacity>
                            <View style={{
                                paddingHorizontal : 20,
                                backgroundColor:'#0386D0',
                                // borderWidth : 1.5,
                                borderRadius: 7,
                                height : 50,
                                alignItems:'center',
                                justifyContent:'center'
                            }}>
                                <Text style={{color:'#F5F5F5',fontSize:16,fontWeight:600}}>Save</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </View>
    );
}