9

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?

enter image description here

Sean Tansey
  • 409
  • 2
  • 7
  • 14

8 Answers8

23

Try the following prop:

textContentType={'oneTimeCode'}

dev
  • 818
  • 8
  • 14
12

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()}
/>
Sean Tansey
  • 409
  • 2
  • 7
  • 14
  • 2
    As of iOS 15.4 this does not seem to run, is there a better way to do this in 2022 - https://snack.expo.dev/@ramakay/spunky-celery – Ramakay Mar 15 '22 at 18:21
5

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)

Björn W
  • 231
  • 3
  • 4
  • Tried everything and I'm using onSubmitEditing to focus the next field so that wasnt viable, hacking secureTextEntry was the only thing that worked. Thank you!! – b.stevens.photo Jun 18 '21 at 16:47
3

I had the same issue, adding textContentType="oneTimeCode" to all TextInput on the screen helped solved the issue.

Anita
  • 2,741
  • 27
  • 28
2

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

parse
  • 1,706
  • 17
  • 27
2

You should use the textContentType prop

textContentType="none" If you want to disable all the autofill feature.

Quote from RN 0.64 docs

Give the keyboard and the system information about the expected semantic meaning for the content that users enter.

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

For iOS 12+ newPassword can be used to indicate a new password input the user may want to save in the keychain, and oneTimeCode can be used to indicate that a field can be autofilled by a code arriving in an SMS.

To disable autofill, set textContentType to none.

You should use the prop properly or else it will cause improper behaviours on users device.

https://reactnative.dev/docs/textinput#textcontenttype

Rajendran Nadar
  • 4,962
  • 3
  • 30
  • 51
0

Despite all the hacks and fixes I've seen this is the only one the fully fixed the problem. https://github.com/facebook/react-native/issues/21911#issuecomment-833144889

<TextInput secureTextEntry={true}/> // input1
<TextInput style={{height: 0.1}}/> // a dummy that jammed in between two secure texts
<TextInput secureTextEntry={true}/> // input2
b.stevens.photo
  • 876
  • 2
  • 9
  • 18
-1

just add

autoCorrect={false}

solved for me

rodgomesc
  • 1