Question 33639 in React native Question posted in
The official React Native documentation can be found here.

Hide and Show password in react native with vector icon

import React, { useState } from 'react'
import { Text, View, Image, Pressable, TextInput, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';

const Signin = ({ navigation }) => {
    const [passwordVisibility, setPasswordVisibility] = useState(true);
    const [rightIcon, setRightIcon] = useState('eye');
    const [password, setPassword] = useState('');


    const handlePasswordVisibility = () => {
        if (rightIcon === 'eye') {
            setRightIcon('eye-off');
            setPasswordVisibility(!passwordVisibility);
        } else if (rightIcon === 'eye-off') {
            setRightIcon('eye');
            setPasswordVisibility(!passwordVisibility);
        }
    };

    return (
        <View>
            <View style={{ marginTop: 20, marginLeft: 10 }}>
                <Pressable
                    onPress={() => navigation.navigate("Home3")}
                    style={{
                        width: 50,
                        height: 50,
                        backgroundColor: 'white',
                        borderRadius: 25,
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}
                >
                    <Image
                        source={require("../img/back.png")}
                        style={{ width: 40, height: 40 }}
                    />
                </Pressable>
            </View>

            <View style={{ marginLeft: 20, marginTop: 10 }}>
                <Text style={{ fontSize: 30, fontWeight: '800', color: 'black' }}>Welcome Back</Text>
                <Text style={{ marginTop: 5 }}>Welcome Back!! Please Enter Your Detalis</Text>
            </View>

            <View style={{ marginLeft: 5, marginTop: 20 }}>
                <Text style={{ fontSize: 16, color: 'black', marginLeft: 14, fontWeight: '900' }}>Email</Text>
                <TextInput
                    placeholder='Enter Your Email'
                    style={{
                        height: 45,
                        margin: 12,
                        padding: 10,
                        backgroundColor: 'white',
                        borderRadius: 10
                    }}
                //onChangeText={onChangeNumber}
                //value={number}
                //keyboardType="numeric"

                />
            </View>

            <View style={{ marginLeft: 5 }}>
                <Text style={{ fontSize: 16, color: 'black', marginLeft: 14, fontWeight: '900' }}>Password</Text>
                <TextInput
                    style={{
                        height: 45,
                        margin: 12,
                        padding: 10,
                        backgroundColor: 'white',
                        borderRadius: 10
                    }}
                    name="password"
                    placeholder="Enter password"
                    autoCapitalize="none"
                    autoCorrect={false}
                    secureTextEntry={passwordVisibility}
                    value={password}
                    enablesReturnKeyAutomatically
                    onChangeText={text => setPassword(text)}
                />
                <TouchableOpacity 
                style={{
                    marginTop:-50,
                    marginLeft:325,
                }}
                onPress={handlePasswordVisibility}
                >
                    <Icon name="eye" size={30} color="#0C8A7B"/>
                </TouchableOpacity>
            </View>

        </View >
    )
}
export default Signin;

Below is My code…

  • I want to like this…

  • if the password is shown then the eye icon color changes or

  • if the password is hidden then also eye icon color is different

  • so anyone can understand easily

  • I can click the eye icon does not give any result or if I can click the eye icon then the password also doesn’t display ad gives **** like this

  • so what can I do…!!

Here is my output

enter image description here

is that before the eye icon click looks like this

enter image description here

this is after clicking the eye icon like this

nothing changes anything

Tags:

2

Answers


  1. 0

    I think there may be problem with handlePasswordVisibility function.

    You can try more easily without use rightIcon state

               <TouchableOpacity 
            style={{
                marginTop:-50,
                marginLeft:325,
            }}
            onPress={() => setPasswordVisibility(!passwordVisibility)}
            >
                <Icon name={passwordVisibility ? 'eye-off':'eye'} size={30} color="#0C8A7B"/>
            </TouchableOpacity>
    Login or Signup to reply.
  2. 0

    Use state for icon name and color. Something like this:

    const [passwordVisibility, setPasswordVisibility] = useState(true);
const [rightIcon, setRightIcon] = useState('eye');
const [rightIconColor, setRightIconColor] = useState('#0C8A7B');

const handlePasswordVisibility = () => {
  if (rightIcon === 'eye') {
      setRightIcon('eye-slash');
      setRightIconColor('#FF0000')
      setPasswordVisibility(!passwordVisibility);
  } else if (rightIcon === 'eye-slash') {
      setRightIcon('eye');
      setRightIconColor('#0C8A7B')
      setPasswordVisibility(!passwordVisibility);
  }
};

<TouchableOpacity 
  onPress={handlePasswordVisibility}>
  <Icon name={rightIcon} size={30} color={rightIconColor}/>
</TouchableOpacity>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search