React-native: 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.

https://github.com/facebook/react-native/pull/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. https://github.com/facebook/react-native/pull/22611

[sabbyt54]

+1

[luisfuertes]

oneTimeCode is not working on iOS with firebase phone auth sms on iOS 12

rn version 0.58.3

[levibuzolic]

@luisfuertes fixed in #22611

[luisfuertes]

@levibuzolic Thanks for answer. In what rn version is fixed?

[levibuzolic]

@luisfuertes hasn't been merged to master yet -- so not in any current release.

[makozlo-airship]

@levibuzolic Is this available in the current release yet? I'm on RN 0.59.1 and I still can't seem to get textContentType to work correctly.

[levibuzolic]

@makozlo-airship - @levibuzolic Is this available in the current release yet? I'm on RN 0.59.1 and I still can't seem to get textContentType to work correctly.

Yeah it is, I'm reasonably sure its working in our project. Worth noting that most (maybe all) of the types don't work correctly in the simulator and will only work on a real device. What issues are you having?

[makozlo-airship]

@levibuzolic Apologies for the late response. I upgraded to RN 0.59.2 a couple of days ago, hoping this would clear up the issue. Unfortunately I'm still having problems getting it to work (using a real device). I'm going to dive into it a little more. The only thing that might be causing an issue is that I'm using the <TextInput />s inside of a Formik form. Do you know if this would cause any issues?

[levibuzolic]

@makozlo-airship hmm, I'm not familiar with Formik, quick glance at the code looks like it should just be passing textContentType correctly. If you can create a reproducible example on Expo Snack I'd be happy to take a look.

[t2]

@makozlo-airship @levibuzolic Hey guys, seeing the same thing where the textContentType does not auto suggest on a real device. Here is the Snack I am testing with https://snack.expo.io/SkVvVhq94.

[levibuzolic]

@makozlo-airship @levibuzolic Hey guys, seeing the same thing where the textContentType does not auto suggest on a real device. Here is the Snack I am testing with https://snack.expo.io/SkVvVhq94.

Oh sorry @t2, looks like latest Expo (v32) is only on React Native 0.57, my PR went out in 0.58.6.

I've built your snack locally on the latest version of React Native 0.59.5 and can confirm it's working correctly:

If you need to use Expo, you can work around this issue temporarily by using the iOS literal strings from the right column of the table I posted in my PR description, these will be passed through directly and should work for now (until Expo moves to React Native 0.58.6 or higher). You can see this working in this Expo Snack.

Make sure you leave a note for yourself to switch to the proper strings later!

[tsdmrfth]

@levibuzolic Hi thanks for your PR. On my project oneTimeCode still is not working. I am on react native 0.59.10 and iOS version 12.3.1

                <TextInput
                    value={''}
                    autoFocus={true}
                    ref={this.inputRef}
                    keyboardType={'numeric'}
                    textContentType={'oneTimeCode'}
                    onKeyPress={this.handleKeyPress}
                    style={[inputStyle, newInputStyle]}
                    onChangeText={this.handleTextChange}
                    underlineColorAndroid={'transparent'} />

[levibuzolic]

@tsdmrfth by "not working" do you mean you're not getting the keyboard accessory item? oneTimeCode has been working perfectly for us in a production app with tens of thousands of users.

I'd take a look at the format of your SMS as Apple has some specific requirements for oneTimeCode to work. I believe some of the requirements for the SMS are:

• must contain the words code, passcode or verification number
• the number should appear after the above words
• code must be numeric and between 3 and 8 digits without spaces
• must not be using a custom keyboard

Here's a screenshot I took this morning of it in action on iOS 12.3.1 and React Native 0.59.10

[tsdmrfth]

• must contain the words code, passcode or verification number
• the number should appear after the above words
• code must be numeric and between 3 and 8 digits without spaces
• must not be using a custom keyboard

@levibuzolic I did not know requirements above. Thanks

[vasilestefirta]

@levibuzolic thanks for listing out all those requirements. For some reason even following them, the code autofill doesn't show up. I'm using react-native: 0.60.4 and iOS 12.4 on a real device. Here's the basic example I have:

<Fragment>
    <StatusBar barStyle="light-content" />
    <View style={styles.container}>
        <TextInput
            placeholder="123123"
            keyboardType="numeric"
            textContentType="oneTimeCode"
            autoFocus
            onChangeText={text => this.setState({ verificationCode: text })}
            value={verificationCode}
        />

        <TouchableOpacity style={styles.button} onPress={this.handleSubmit}>
            <Text style={styles.buttonText}>Verify</Text>
        </TouchableOpacity>
    </View>
</Fragment>

The text message says Your verification code is: 123456. I actually tried so many variations and nothing worked. I also tried to tap on the code within the text message and the Copy Code popup shows up. That's proof that iOS detected the code.

The only thing that comes in mind is maybe if the text message comes from a number format like [phone] the AutoFill doesn't work. Maybe only shows the autofill for text messages received from short numbers like 229-7 for example. Just a silly assumption.

Also, if I set the textContentType prop to telephoneNumber, then the AutoFill suggests the phone number as expected.

Any suggestions of what else could it be? 🙂

Thanks!

[vasilestefirta]

Never mind, I just tried the same app on another iPhone device and it worked there. Maybe there's a setting somewhere on my iPhone which prevents the AutoFill or something like that 🤔

[levibuzolic]

Hmm not sure. I’ve not seen any issues like that in our app using a few different number formats. Sorry I’m not of much help here. 😕

[vasilestefirta]

No worries. The fact that it works on other devices except for mine, is already a good sign 🙂

[anhkieet]

I just tried newPassword value and it does not work

[Dror-Bar]

@levibuzolic Where can I read about the SMS requirements?

[levibuzolic]

@Dror-Bar I'm having a hard time digging up where I got the original list of requirements that I posted earlier in this thread, however here's a few resources I could dig up:

• WWDC 2018 - Automatic Strong Passwords and Security Code AutoFill
• Stack Overflow - Automatic OTP Verification in iOS