How can I display the Show/Hide icon for the password in Textinput?

[WO-Mehul]

I have a requirement for display password show/hide functionality. So, my question is how can I display an "eye" icon on the right side of "Textinput" for particular "Textinput"(only for password input not for others)

[bczak]

Is there any update?

[bczak]

Found the solution: Use TextInput.Icon inside TextInput component and use state to change visibility

[traviswimer]

As @tashpjak said, you use TextInput.Icon. Here is an example:

import React, { useState } from "react";
import { TextInput } from "react-native-paper";

export default function MyComponent() {
  const [secureTextEntry, setSecureTextEntry] = useState(true);

  return (
    <TextInput
      label="Password"
      secureTextEntry={secureTextEntry}
      right={
        <TextInput.Icon
          name="eye"
          onPress={() => {
            setSecureTextEntry(!secureTextEntry);
            return false;
          }}
        />
      }
    />
  );
}

It's also worth noting that if you use it within a ScrollView, the keyboard may not function correctly. You may need to set keyboardShouldPersistTaps="handled" as described here: https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps

[ricardoGlobant]

keyboardShouldPersistTaps="handled"

Thanks man, this really helped me a lot