Skip to content

Most TextInput textContentTypes don't work due to mismatched string constants #22578

@levibuzolic

Description

@levibuzolic

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
      Memory: 36.17 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.3 - /var/folders/5f/6g410wwx743d7_wx8lphvzfc0000gn/T/yarn--1544413987073-0.5166565719343945/node
      Yarn: 1.12.1 - /var/folders/5f/6g410wwx743d7_wx8lphvzfc0000gn/T/yarn--1544413987073-0.5166565719343945/yarn
      npm: 5.6.0 - ~/.n/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3
        API Levels: 23, 25, 26
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      @storybook/react-native: ^4.0.2 => 4.0.6
      react: 16.6.1 => 16.6.1
      react-native: 0.57.7 => 0.57.7

Description

The strings used for textContentType are passed directly though to iOS, however they don't match up with the underlying string constants used in iOS.

I ran the following code in a playground to source the underlying values of the TextContentType constants:

import UIKit
print(UITextContentType.URL.rawValue)
print(UITextContentType.addressCity.rawValue)
// etc...

Here are the values that I got.

React Native iOS
URL url
addressCity address-level2
addressCityAndState address-level1+2
addressState address-level1
countryName country-name
creditCardNumber cc-number
emailAddress email
familyName family-name
fullStreetAddress street-address
givenName given-name
jobTitle organization-title
location location
middleName additional-name
name name
namePrefix honorifix-prefix
nameSuffix honorifix-suffix
nickname nickname
organizationName organization
postalCode postal-code
streetAddressLine1 address-line1
streetAddressLine2 address-line2
sublocality address-level3
telephoneNumber tel
username username
password password
newPassword new-password
oneTimeCode one-time-code

According to this table the only textContentTypes that will work currently in React Native are: username, password, location, name and nickname.

Possible Solutions

The simplest solution would be to update textContentType to use the iOS strings instead of current keys.

Alternatively a mapping in the native code could allow us to keep the existing strings and just silently translate them.

My preferred solution is to map each string to the named Objective-C constants which I've created a PR for #22579.

Reproducible Demo

I've created a demo snack which allows you to try each textContentType with both the React Native and iOS strings: https://snack.expo.io/@levibuzolic/textcontenttype

Note: In my testing, most (if not all) textContentType values don't work on the simulator, instead they need to be tested on a real device.

Example Screenshots

addressState address-level1
img_1579 img_1578
newPassword new-password
img_1582 img_1581

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions