import { StyleSheet, Text, TextInput, View, Button } from "react-native";
import React, { useState } from "react";
const App = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [display, setDisplay] = useState(false);
const resetFormData = () =>{
setDisplay(false);
setEmail(false);
setName(false);
setPassword(false);
}
return (
<View style={styles.viewTag}>
<Text style={styles.textTag}>Form Changer</Text>
<TextInput style={styles.textInput} placeholder="Enter your name" onChangeText={(text)=>setName(text)} value={name}/>
<TextInput style={styles.textInput} placeholder="Enter your email" onChangeText={(text)=>setEmail(text)} value={email}/>
<TextInput
style={styles.textInput}
placeholder="Enter your password"
secureTextEntry={true}
onChangeText={(text)=>setPassword(text)}
value={password}
/>
<View style={styles.btn}>
<Button title="PRINT" onPress={()=>setDisplay(true)}/>
<View style={styles.btn1}>
<Button title="REMOVE" onPress={resetFormData}/>
</View>
</View>
<View>
{
display?
<View style={{fontSize:30, textAlign:'center'}}>
<Text>
User name:{name}
</Text>
<Text>
User name:{email}
</Text>
<Text>
User name:{password}
</Text>
</View>:null
}
</View>
</View>
);
};
export default App;
const styles = StyleSheet.create({
viewTag: {
flex: 1,
paddingTop: 20,
},
textTag: {
textAlign: "center",
fontSize: 25,
paddingTop: 60,
},
textInput: {
borderWidth: 2,
fontSize: 20,
paddingTop: 20,
marginTop: 20,
marginLeft: 20,
marginRight: 20,
textAlign: "center",
},
btn: {
marginTop: 20,
marginLeft: 20,
marginRight: 20,
},
btn1: {
marginTop: 10,
},
});