Can't get phone number to autofill on iOS

Question

The <TextInput> component has a textContentType field which allows you to autofill certain fields, i.e. name, email, phone, etc. I can't seem to get it to autofill the phone number, am I missing anything?

<TextInput
    autoFocus
    blurOnSubmit={false}
    editable={!loading}
    placeholder="Enter phone number"
    textContentType="telephoneNumber"
    dataDetectorTypes="phoneNumber"
    maxLength={100}
    keyboardType="phone-pad"
    value={phone}
/>

RN version is 0.55

Answer 1

If you are running on an emulator on a Mac the keyword won't show up, but how you have it it's ok. Try running it up on a real device!

Check this snack out: @abranhe/stackoverflow-56691969

The source code:

import React, { Component } from 'react';
import { View, StyleSheet, TextInput } from 'react-native';

export default class App extends Component {
  state: {
    phone: '',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          autoFocus
          blurOnSubmit={false}
          placeholder="Enter phone number"
          textContentType="telephoneNumber"
          dataDetectorTypes="phoneNumber"
          maxLength={100}
          keyboardType="phone-pad"
          onChangeText={phone => this.setState({ phone })}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 50,
  },
});