Basic Form in React-Native | form with state

 App.js:

import React, { useState } from 'react';

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

const App = () => {

    const [name, setName] = useState("");

    const [password, setPassword] = useState("");

    const [email, setEmail] = useState("");

    const [display, setDisplay] = useState(false);

    const resetFormData = () => {

        setDisplay(false);

        setName("");

        setPassword("");

        setEmail("");

    }

    return (

        <View style={{ margin: 5 }}>

            <Text style={{ fontSize: 30 }}>Simple Form in React Native</Text>

            <TextInput style={styles.textInput} placeholder='Enter Name' onChangeText={(text) => setName(text)} />

            <TextInput style={styles.textInput} placeholder='Enter Password' onChangeText={(text) => setPassword(text)} />

            <TextInput style={styles.textInput} placeholder='Enter Email' onChangeText={(text) => setEmail(text)} />

            <View style={{ marginBottom: 8 }}>

                <Button title='Print Values' onPress={() => setDisplay(true)} />

            </View>

            <Button title='Reset Values' onPress={resetFormData} />

            <View>

                {

                    display ?

                        <View>

                            <Text style={{ fontSize: 15 }}>Name: {name}</Text>

                            <Text style={{ fontSize: 15 }}>Password: {password}</Text>

                            <Text style={{ fontSize: 15 }}>Email: {email}</Text>

                        </View> : null

                }

            </View>

        </View>

    );

};

const styles = StyleSheet.create({

    textInput: {

        color: 'blue',

        borderColor: 'blue',

        borderWidth: 2,

        fontSize: 20,

        margin: 5

    }

})

export default App;