ReactNative textcontenttype iOS 13 Issue

Question

We are not able to get Email, Name, phone number suggestions (autocomplete) to work on our React Native. Can someone help on troubleshooting to see what we may be doing wrong here?

https://facebook.github.io/react-native/docs/textinput#textcontenttype

<Input
               placeholder="First Name"
               textContentType="givenName"
               onChangeText={firstname => (onChange('first_name', firstname))}
               value={state.form.first_name}
               autoCapitalize="words"
               placeholderTextColor={'#262626'}
               style={styles.textInput}
             />

Screens

Are you testing your input on your phone? – Fundamentalism

Yes I am testing on both iOS 12 and iOS 13. Works on iOS 12 but not on 13. – Screens

It seems to be a general issue with iOS13. It's not in any way related to ReactNative. – Marmoset

@JoachimDeelen, I’ve seen this issue in applications I develop, but I’ve had trouble with proving others are experiencing this issue as well other than with the beta. Do you have more evidence about what’s going on? – Fingering

Yes, @Screens this is the problem related to iOS 13 or +.Not specific to any react-native version.Try the same code in device with iOS 12 or lower it will work fine.Moreover, apple has specified in its docs that this iOS update is related to privacy and security concerns. Many developers are creating issues to apple forums.It will be fixed soon in their next update. Even it has stopped working in snapchat auto fil while signup.Till than wait as there seems no workaround. – Myrmeco

Answer 1

It does work in iOS 13. Just use the settings described here, and translate them from Swift to React Native:

After updating to iOS 13 suggestion(email, phone number, first name...) for UITextField don't appear above keyboard

For phone number:

autoCorrect={true}
textContentType="telephoneNumber"
keyboardType="numbers-and-punctuation"

For email:

autoCorrect={true}
textContentType="emailAddress"
keyboardType="email-address"

You'll need to use a different keyboard type for Android, so probably something like:

keyboardType={(Platform.OS === 'ios') ? "numbers-and-punctuation" : 'phone-pad"}

Legislator

I tried different combinations of textContentType and keyboardType to make everything works. for example textContentType="streetAddressLine1" needs keyboardType="name-phone-pad" to work. – Quicklime

Answer 2

• In Android we can use autoCompleteType prop and the supported types with it are:

So if I talk about telephone number suggestion in android we can use

<TextInput
    autoCorrect={true}
    keyboardType={'phone-pad'}
    autoCompleteType={"tel"}
/>

• In iOS we can use textContentType prop and the supported types with it are:

and telephone number suggestion in iOS we can use

<TextInput
    autoCorrect={true}
    keyboardType={'phone-pad'}
    textContentType={"telephoneNumber"}
/>

No need to create two different TextInput , just use below example to support suggestions to telephone field in react native.

<TextInput
    autoCorrect={true}
    keyboardType={'phone-pad'}
    autoCompleteType={"tel"}
    textContentType={"telephoneNumber"}
/>

Pukka

Answer 3

in react native you can accomplish this like this

 <TextInput
  ...
  textContentType='emailAddress'
  keyboardType='email-address' // a bit of extra love for your users
  autoCapitalize='none' // React Native default is to capitalise
/>

Shaquana