How can I get email autocomplete suggestions for iOS in React Native with textContentType?

Question

RN 0.57.x exposes iOS's textContentType, so I should be able to get our app to suggest the user's email in a TextInput. This makes the initial experience much smoother because the user doesn't have to type their email address to create an account.

However, setting textContentType to "emailAddress" and keyboardType to "email-address" has no effect.

How can I get the user's personal email addresses suggested in the input control?

Marchesa

textContentType suggests email and/or other data from the device keychain. Are you sure the email is listed in the keychain? – Unbent

@Unbent Keychain data just shows usernames and logins - I thought there would be a way to auto-suggest e.g. an email from the user's Contact Card since the user would be typing that over and over. Is that not the case? (This is for a new account so I don't think the keychain will be useful.) – Marchesa

I'm not sure if that is possible, but haven't dug that deep in the fetching of email specifically. – Unbent

Answer 1

For iOS, in addition to adding the textContentType prop to a <TextInput> RN component, you will also need to:

• Add the Associated Domains entitlement on your Xcode project
• Add the Apple App Site Association file on your website (apple-app-site-association)

See this blog post:

• https://brainsandbeards.com/blog/quick-change-that-helps-ios-users-sign-in-quicker/

And Apple documentation:

• https://developer.apple.com/documentation/security/password_autofill/setting_up_an_app_s_associated_domains

Melson

Answer 2

I did it using the following way

• Add autocorrect true in the email field and give the margin for iOS

• Add extra dummy text input between email and password for only the
  iOS platform with the wrapping of parent View pointer none for
  avoiding focus

  <TextInput
           autoCompleteType="email"
           autoCorrect={true}
           clearTextOnFocus={false}
           containerStyle={{marginTop: 5, marginBottom: isIos() ? -20 : 0}}
           keyboard="email-address"
           textContentType="emailAddress"
           value={username}
           onChangeText={(value): void => onInputChange('username', value)}
         />
  
         {isIos() ? (
           <View pointerEvents="none">
             <TextInput
               focusable={false}
               style={{color: '#00000000'}}
               onChangeText={(value): void => onInputChange('username', value)}
             />
           </View>
         ) : null}
  
         <TextInput
           autoCorrect={false}
           clearTextOnFocus={false}
           containerStyle={{marginTop: 5}}
           keyboard={isIos() ? 'ascii-capable' : 'default'}
           secureTextEntry={true}
           value={password}
           onChangeText={(value): void => onInputChange('password', value)}
         />
  

Geary