React Native - secureTextEntry Disable IOS 13+ Strong Password behavior

Question

I have an create account form in my app and now on iOS devices running 13+ I'm having an issue where if the the user presses the "done" key while entering a password the normal secure password dots are replaced with the following (see below). How to disable this behavior so it continues to work as it did on older devices?

Answer 1

Try the following prop:

textContentType={'oneTimeCode'}

Answer 2

Not a optimal solution, but adding blurOnSubmit, and a keyboard Dismiss on submit seems to get the desired behavior back:

import { Keyboard } from 'react-native'

<TextInput
   ...
   blurOnSubmit={false}
   onSubmitEditing={()=> Keyboard.dismiss()}
/>

Answer 3

This problem occurs only if I use two TextInput components with secureTextEntry set to true.

If you don't need that, you might want to get rid of the second TextInput component.

You can also hack around with the value of secureTextEntry, e.g. setting it only to true when onFocus event was triggered and evolve it from there. (see: https://github.com/facebook/react-native/issues/27586#issuecomment-580739397)

Answer 4

The best solution so far is to disable the simulator strong password feature.

Go to:

1. Settings
2. Passwords
3. It will ask for a password! Type anything and tap on Done.
4. Turn On AutoFill Passwords and turn it Off again.

Source: Strong password autofill appears in iOS simulator