I am pretty new to React Native and I want to create a very simple passwordShow Button in the Textinput. The TouchableOpacity triggers the very simple showPassword function and changes the var passwordHidden to false. But sadly the reactTextInput isn't updating and the password keeps hidden. Any ideas why?

export function TextInput(props: Props) {
    let passwordHidden = true


    function showPassword() {
        passwordHidden = false
    }

    return (
        <View style={{marginBottom: props.marginBottomProp}}>
            <FormComponentMargin>
                <View style={styles.container}>
                    <View style={{width: 48, alignItems: 'center'}}>
                         <Icon
                            name={props.icon}
                            type={props.iconType ?? "font-awesome"}/>
                    </View>
                    <ReactTextInput
                        style={{...styles.textInput}}
                        placeholderTextColor={placeholderTextColor}
                        secureTextEntry={passwordHidden}
                        {...props}
                    />

                    <TouchableOpacity onPress={showPassword}>
                                <View
                                    style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
                                    <Icon
                                        name={"eye"}
                                        type={props.iconType ?? "font-awesome"}
                                        color={tintColor}
                                        size={20}

                                    />
                                </View>
                     </TouchableOpacity>
                </View>
            </FormComponentMargin>
        </View>
    )
}

CodePudding user response：

You need to re-render your component once you tapped the button, so handle the variable as a state.

Make use of useState hook -

import React, {useState} from 'react';

export function TextInput(props: Props) {

    const [passwordHidden, setPasswordHidden] = useState(true);
 
    function showPassword() {
        setPasswordHidden(!passwordHidden);
    }

    return (
        <View style={{marginBottom: props.marginBottomProp}}>
            <FormComponentMargin>
                <View style={styles.container}>
                    <View style={{width: 48, alignItems: 'center'}}>
                         <Icon
                            name={props.icon}
                            type={props.iconType ?? "font-awesome"}/>
                    </View>
                    <ReactTextInput
                        style={{...styles.textInput}}
                        placeholderTextColor={placeholderTextColor}
                        secureTextEntry={passwordHidden}
                        {...props}
                    />

                    <TouchableOpacity onPress={showPassword}>
                                <View
                                    style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
                                    <Icon
                                        name={"eye"}
                                        type={props.iconType ?? "font-awesome"}
                                        color={tintColor}
                                        size={20}

                                    />
                                </View>
                     </TouchableOpacity>
                </View>
            </FormComponentMargin>
        </View>
    )
}