Is there any solution for keyboard changing when secureTextEntry prop of TextInput changes on react native?

Question

I'm working with a login screen, and I have that eye icon so I can hide or reveal the password content. But when I update the state of the icon, the keyboard of the mobile phone changes. Is there any way to keep the keyboard in the same way in both cases?

I tried to change the prop keyboardType, but it still changes.

That's with the secureTextInput unabled

That's with the secureTextInput abled

As you can see, the number keyboard appears and disappears, so the full app interface translates.

Answer 1

I don't know how you have implemented the code so far , But try like this ,

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';

const LoginScreen = () => {
  const [password, setPassword] = useState('');
  const [isPasswordVisible, setPasswordVisible] = useState(false);

  const togglePasswordVisibility = () => {
    setPasswordVisible(!isPasswordVisible);
  };

  return (
    <View>
      <TextInput
        secureTextEntry={!isPasswordVisible}
        value={password}
        onChangeText={setPassword}
        placeholder="Password"
      />
      <TouchableOpacity onPress={togglePasswordVisibility}>
         <Image
              source={isPasswordVisible  ? images.eyeOpen : images.eyeClose}
              style={styles.icon}
            />
      </TouchableOpacity>
    </View>
  );
};

export default LoginScreen;

const styles = StyleSheet.create({
  icon: {
    width: 20,
    height: 20,
  },
  });

You have to change styles to make a perfect textInput with eyeIcon to the right .