import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
FlatList
} from 'react-native';
export default class Profile extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{id:1, image: ()=> <Image style={styles.icon} source={require('./assets/utilisateur.png')}/>, title:"Nom"},
{id:2, image: ()=> <Image style={styles.icon} source={require("./assets/email.png")}/>, title:"Email"},
{id:3, image: ()=> <Image style={styles.icon} source={require("./assets/editer.png")}/>, title:"Editer"},
{id:4, image: ()=> <Image style={styles.icon} source={require("./assets/arrow.png")}/>, title:"Se deconnecter"},
],
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.headerContent}>
<Image style={styles.avatar} source={require('./assets/avatar.png')}/>
<Text style={styles.name}>Jane Doe</Text>
</View>
</View>
<View style={styles.body}>
<FlatList
style={styles.container}
enableEmptySections={true}
data={this.state.data}
keyExtractor= {(item) => {
return item.id;
}}
renderItem={({item}) => {
return (
<TouchableOpacity>
<View style={styles.box}>
{item.image()}
<Text style={styles.title}>{item.title}</Text>
</View>
</TouchableOpacity>
)
}}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
backgroundColor: "#96ee82",
},
header:{
backgroundColor: "#96ee82",
},
headerContent:{
padding:30,
alignItems: 'center',
},
avatar: {
width: 130,
height: 130,
borderRadius: 63,
borderWidth: 4,
borderColor: "#2fff00",
marginBottom:10,
},
icon:{
width: 40,
height: 40,
},
title:{
fontSize:18,
color:"#EE82EE",
marginLeft:4
},
btn:{
marginLeft: 'auto',
width: 40,
height: 40,
},
body: {
backgroundColor :"#96ee82",
},
box: {
padding:5,
marginBottom:2,
backgroundColor: '#FFFFFF',
flexDirection: 'row',
shadowColor: 'black',
shadowOpacity: .2,
shadowOffset: {
height:1,
width:-2
},
elevation:2
},
username:{
color: "#20B2AA",
fontSize:22,
alignSelf:'center',
marginLeft:10
}
});