import { Component } from 'react';

import { Text,StyleSheet,View, TextInput, Button, date } from 'react-native';

export default class myApp extends Component {

render() {
return (
<View style={styles.container1}>
<View style={styles.box1}>
<Text style={styles.text1}>MON PROJET</Text>
</View>
<View style={styles.style1}></View>
<Text style={styles.text2}>Nom</Text>
<TextInput style={styles.placeholder1} placeholder=" entrez votre
nom"></TextInput>

<View style={styles.style2}></View>
<Text style={styles.text3}>Prenom</Text>
<TextInput style={styles.placeholder2} placeholder=" entrez votre
prenom"></TextInput>

<View style={styles.style3}></View>
<Text style={styles.text4}>Sexe</Text>
<TextInput style={styles.placeholder3} placeholder=""></TextInput>

<View style={styles.style4}></View>
<Text style={styles.text5}>Date_de_naissance </Text>
<TextInput style={styles.placeholder4} placeholder=""
value={date}
onChange={(date) => setDate(date)}></TextInput>

<View style={styles.button}>
<Text>
<View style={styles.button1}>
<Button color='red' title="RESET" />
</View>
</Text>
<Text>
<View style={styles.button2}>
<Button color='grey' title="M" />
</View>
</Text>
<Text>
<View style={styles.button3}>
<Button title="OK" />
</View>
</Text>
</View>
</View>

);
}
}

const styles = StyleSheet.create({

 container1: {
borderWidth: 3,
width: '80%',
high:'80%',
marginLeft:40,
marginTop:50,
padding: 3,

},

text1: {
fontSize:30,
marginLeft:3,
borderWidth: 2,
textAlign:'center',
marginTop:6

},
text2: {
borderWidth: 1,
marginLeft:3,
marginRight:40,
width: '25%',
padding:5,
},
text3: {
borderWidth: 1,
marginLeft:3,
marginRight:22,
width: '30%',
padding:5,
},
text4: {
borderWidth: 1,
marginLeft:3,
marginRight:42,
width: '15%',
padding:5,
},
text5: {
borderWidth: 1,
marginLeft:3,
marginRight:42,
width: '60%',
padding:3,
},
style1: {
width: '100%',
flex:1,
flexDirection:'row',
marginTop: 30,
borderRadius: 13,

},
style2: {
 width: '100%',
flex:1,
flexDirection:'row',
marginTop: 20
},

style3: {
width: '150%',
flex:1,
flexDirection:'row',

marginTop: 20,

},

style4: {
width: '100%',
flex:1,
flexDirection:'row',
marginTop: 20,
},

button: {

justifyContent:'center',
flex:2,
flexDirection:'row',

padding:5,

},

button1: {
marginLeft:40,
marginRight:12,
padding:5,

},

button2: {

marginLeft:5,
marginRight:20,
padding:5,
},

button3: {

marginLeft:10,
marginRight:52,
padding:5,
},

placeholder4: {
width:'60%',
borderWidth: 3,
 },

placeholder3: {
width:'10%',
borderWidth: 3,
},

placeholder2: {
borderWidth: 3,
},

placeholder1: {
borderWidth: 3,
},

box1: {
width: '100%',
high:'50%',
fontSize:30,
marginRight:80,
padding: 5,

},

});