React Native - secureTextEntry 禁用 IOS 13+ 强密码行为

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

尝试以下道具：

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 , eg 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

我遇到了同样的问题，将textContentType="oneTimeCode"添加到屏幕上的所有 TextInput 帮助解决了这个问题。

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

just add

autoCorrect={false}

solved for me