Why can't clear value from TextInput in react native using Hooks?

Question

I am trying to clear user's value from TextInput when user click on button but ican't get it.

I am implementing this demo using Hooks in react-native.

So please help me I am new in hooks with react-native.Thank you in advanced.

 import React, { useState, useEffect } from 'react';
    import { StyleSheet, View, TextInput, TouchableOpacity, Text } from 'react-native';
    import { RFValue } from 'react-native-responsive-fontsize';
    import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';
    const Login = ({ navigation }) => {
        const [name, setName] = useState('');
        const [password, setPassword] = useState('');
    
        /*   useEffect(() => {
              console.log("login screen");
               setName('');
              setPassword('');
              
      
          }); */
        function resetTextInput () {
            console.log("reset TextInput");
            setName(" ");
            setPassword(" ");
    
        }
        return (
            <View style={styles.mainContainer}>
                <Text style={styles.txtTitle}>Login</Text>
                <View style={{ marginTop: 80 }}>
                    <TextInput
                        placeholder={'Username'}
                        style={styles.txtInput}
                        onChangeText={(name) => { setName(name) }}
    
                    />
                    <TextInput
                        placeholder={'Password'}
                        style={styles.txtInput}
                        secureTextEntry={true}
                        onChangeText={(password) => { setPassword(password) }}
    
                    />
                </View>
                <TouchableOpacity style={styles.loginBtn} onPress={()=>{resetTextInput()}}>
                    <Text style={styles.loginBtnTxt}>Login</Text>
                </TouchableOpacity>
            </View>
        )
    }

Answer 1

You can set a null value:

function resetTextInput () {
console.log("reset TextInput");
setName(null);//changed this
setPassword(null);//changed this
}

and the main thing set the state value using TextInput props "value"

<View style={{ marginTop: 80 }}>
                <TextInput
                    placeholder={'Username'}
                    style={styles.txtInput}
                    value={name} // set state to value prop
                    onChangeText={(name) => { setName(name) }}

                />
                <TextInput
                    placeholder={'Password'}
                    style={styles.txtInput}
                    secureTextEntry={true}
                    value={password} // set state to value prop
                    onChangeText={(password) => { setPassword(password) }}

                />
            </View>

This solution will help you.