使用 React Native TextInput 在 iOS 上自动填充电子邮件

Question

I want to have suggestions of emails when filling out my login and sign up fields on iOS.

This is my TextInput for an email field:

<TextInput
        style={styles.text}
        placeholder={placeholder}
        textContentType={'emailAdress'}
        placeholderTextColor={PLACEHOLDER_GRAY}
        onChangeText={onTextChange}
        keyboardType={'email-address'}
        autoCorrect={true}
        autoCapitalize={'none'}
/>

This works just fine IF I don't have another InputText with the secureTextEntry property set. But I do need to use secureTextEntry property for password fields. However, these properties are having some sorte of conflict. If I remove the TextInputs related to passwords (or even just the secureTextEntry property from those inputs) I get the email suggestions.

Why is there a conflict between these properties and how can I fix it?

React Native version: 0.63.4

Answer 1

I end up maintaining a state for secureTextEntry and making true onFocus and false onBlur .

const [thisSecureTextEntry, setThisSecureTextEntry] = useState(false);

const updateThisSecureTextEntry = (value: boolean) => {
  if(securedTextEntry) {
    setThisSecureTextEntry(value);
  }
}

<TextInput
  onFocus={() => updateThisSecureTextEntry(true)}
  onBlur={() => updateThisSecureTextEntry(false)}
  style={styles.text}
  placeholder={placeholder}
  placeholderTextColor={PLACEHOLDER_GRAY}
  onChangeText={onTextChange}
  keyboardType={keyboardType}
  autoCapitalize={isAutoCapitalizeDisabled}
  secureTextEntry={thisSecureTextEntry}
  textContentType={textContentType}
/>

Suggestion by AbdulAzeem. You can also find the same suggestion here: https://github.com/facebook/react-native/issues/27586#issuecomment-580739397