Skip to content

Commit 080d455

Browse files
cbrevikLukeDurrant
authored andcommitted
Add iOS 10 textContentType for TextInput
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain: ![image](https://user-images.githubusercontent.com/4932625/37848513-b2170490-2ed4-11e8-85bf-895823d4f98a.png) Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
1 parent 93dafb0 commit 080d455

File tree

3 files changed

+45
-0
lines changed

3 files changed

+45
-0
lines changed

Libraries/Components/TextInput/TextInput.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -605,6 +605,39 @@ const TextInput = createReactClass({
605605
* @platform ios
606606
*/
607607
inputAccessoryViewID: PropTypes.string,
608+
/**
609+
* Give the keyboard and the system information about the
610+
* expected semantic meaning for the content that users enter.
611+
* @platform ios
612+
*/
613+
textContentType: PropTypes.oneOf([
614+
'none',
615+
'URL',
616+
'addressCity',
617+
'addressCityAndState',
618+
'addressState',
619+
'countryName',
620+
'creditCardNumber',
621+
'emailAddress',
622+
'familyName',
623+
'fullStreetAddress',
624+
'givenName',
625+
'jobTitle',
626+
'location',
627+
'middleName',
628+
'name',
629+
'namePrefix',
630+
'nameSuffix',
631+
'nickname',
632+
'organizationName',
633+
'postalCode',
634+
'streetAddressLine1',
635+
'streetAddressLine2',
636+
'sublocality',
637+
'telephoneNumber',
638+
'username',
639+
'password',
640+
]),
608641
},
609642
getDefaultProps(): Object {
610643
return {

Libraries/Text/TextInput/RCTBaseTextInputView.m

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,17 @@ - (void)setSelection:(RCTTextSelection *)selection
167167
}
168168
}
169169

170+
- (void)setTextContentType:(NSString *)type
171+
{
172+
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_10_0
173+
if (@available(iOS 10.0, *)) {
174+
// Setting textContentType to an empty string will disable any
175+
// default behaviour, like the autofill bar for password inputs
176+
self.backedTextInputView.textContentType = [type isEqualToString:@"none"] ? @"" : type;
177+
}
178+
#endif
179+
}
180+
170181
#pragma mark - RCTBackedTextInputDelegate
171182

172183
- (BOOL)textInputShouldBeginEditing

Libraries/Text/TextInput/RCTBaseTextInputViewManager.m

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ @implementation RCTBaseTextInputViewManager
5555
RCT_EXPORT_VIEW_PROPERTY(selectTextOnFocus, BOOL)
5656
RCT_EXPORT_VIEW_PROPERTY(selection, RCTTextSelection)
5757
RCT_EXPORT_VIEW_PROPERTY(inputAccessoryViewID, NSString)
58+
RCT_EXPORT_VIEW_PROPERTY(textContentType, NSString)
5859

5960
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
6061
RCT_EXPORT_VIEW_PROPERTY(onSelectionChange, RCTDirectEventBlock)

0 commit comments

Comments
 (0)