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

[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

newPassword	new-password

[levibuzolic]

I'm happy to try and implement any of the 3 solutions, just looking for guidance from the RN team around which would be their preferred approach.

[levibuzolic]

I've recreated this PR with the compile fix since the original PR was reverted.

#22611

[timt]

@levibuzolic Any view on when this will make it in? Looks like the pull request is still failing.

[levibuzolic]

@timt not really, I’ve been trying to work out why the tests are failing but have t had much luck they seem unrelated to the PR.

I’ll get it up to date with master again and see if that sorts things out.

[albinhubsch]

Why is this issue closed? I do experience problems with this, especially trying to implement oneTimeCode autofill from text messages.

[levibuzolic]

@albinhubsch because the first PR for it was merged, but then reverted. I can’t re-open the issue.

There’s a new PR up for it, been trying to get it in for a while. #22611

[sabbyt54]

+1