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

user_152711 0
Viewed 4774

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?

react-native autosuggest autofill autocomplete ios
2 Answers

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:

And Apple documentation:

user_7282870

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)}
       />
user_9967870
Related