Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native - Disable Password AutoFill Option on iOS Keyboard

In React Native, how do you disable or prevent the keyboard from displaying the Password Autofill accessory view option? There doesn't seem to be an property for TextInput that handles disabling this option. React Native TextInput Documentation. I am also using Expo on top of React Native.

Password AutoFill was introduced in iOS 11

Image of Password AutoFill Accessory view option

Here is a post that has a solution for disabling the password autofill accessory, but how can we achieve this using React Native?

iOS 11 disable password autofill accessory view option?

like image 705
David Avatar asked Jan 28 '18 17:01

David


1 Answers

From RN docs:

For iOS 11+ you can set textContentType to username or password to enable autofill of login details from the device keychain.

This means that setting textContentType to something different than username or password should disable autofill on iOS keyboard. But I noticed that setting secureTextEntry prop to true in the TextInput component also enables autofill even if textContentType is not username or password. This is true except for one particular case, when textContentType is set to "oneTimeCode". This disables autofill even if secureTextEntry is true.

When I want to hide the password autofill and still set secureTextEntry to true, I just do this:

<TextInput
  secureTextEntry
  textContentType="oneTimeCode"
/>

There are other situations where textContentType is not "username" or "password" and secureTextEntry is false but autofill is still shown. Setting textContentType to "oneTimeCode" also works here.

<TextInput
  textContentType="oneTimeCode"
/>

This seems more like a hack than a solution, but it works for me.

like image 119
Jero Avatar answered Sep 29 '22 01:09

Jero