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

CodePudding user response：

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>

CodePudding user response：

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>