Scribd
Upload
27 views4 pages

Projet Developpement

The document defines a React component for a form with fields for name, gender, date of birth, and buttons. It imports React and React Native components. The component renders a View with nested Views and TextInputs for each form field styled with CSS. It also includes reset, submit, and cancel buttons.

Uploaded by

Frank Stephane Lemana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
27 views4 pages

Projet Developpement

The document defines a React component for a form with fields for name, gender, date of birth, and buttons. It imports React and React Native components. The component renders a View with nested Views and TextInputs for each form field styled with CSS. It also includes reset, submit, and cancel buttons.

Uploaded by

Frank Stephane Lemana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

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,

},

});

You might also like