import React, {useState, useEffect} from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
  ScrollView,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
import {Icon} from 'react-native-elements';

const UserProfile = () => {
  return (
    <>
      <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
      <View style={styles.viewRoot}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'flex-start',
            alignItems: 'flex-start',
            marginTop: '-40%',
          }}>
          <TouchableHighlight
            onPress={() => navigation.goBack()}
            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
            <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
          </TouchableHighlight>
        </View>
        <Text style={styles.heading}>Username</Text>
      </View>
    </>
  );
};
const styles = StyleSheet.create({
  viewRoot: {
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    height: '100%',
    flex: 1,
  },
  heading: {
    color: '#1C254E',
    fontSize: 60,
    textAlign: 'center',
    fontFamily: 'Ubuntu-Bold',
  },
  icon: {
    alignSelf: 'flex-start',
    marginLeft: '28%',
    flexDirection: 'row',
  },
  btnNormal: {
    borderRadius: 10,
    height: 45,
    width: 140,
    backgroundColor: '#1C254E',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnText: {
    textAlign: 'center',
    fontSize: 22,
    color: 'white',
  },
  btnPress: {
    borderRadius: 10,
    height: 45,
    width: 140,
    backgroundColor: '#1C254E',
    justifyContent: 'center',
  },
  input: {
    height: 60,
    width: 280,
    margin: 12,
    borderRadius: 15,
    padding: 10,
    color: 'black',
    backgroundColor: '#c4c4c4',
  },
  inputHeading: {
    fontSize: 25,
    margin: 12,
    justifyContent: 'center',
    fontFamily: 'Ubuntu-Bold',
    color: '#1C254E',
  },
  dropdownText: {
    margin: 20,
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default UserProfile;