diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index ec337de164ef8a..ef374f3c3fe256 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -354,6 +354,9 @@ type IOSProps = $ReadOnly<{|
/**
* Give the keyboard and the system information about the
* expected semantic meaning for the content that users enter.
+ * `autoComplete` property accomplishes same behavior and is recommended as its supported by both platforms.
+ * Avoid using both `autoComplete` and `textContentType`, you can use `Platform.select` for differing platform behaviors.
+ * For backwards compatibility, when both set, `textContentType` takes precedence on iOS.
* @platform ios
*/
textContentType?: ?TextContentType,
@@ -1655,16 +1658,20 @@ const ExportedForwardRef: React.AbstractComponent<
}
autoComplete={
Platform.OS === 'android'
- ? // $FlowFixMe
+ ? // $FlowFixMe[invalid-computed-prop]
+ // $FlowFixMe[prop-missing]
autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
autoComplete
: undefined
}
textContentType={
- Platform.OS === 'ios' &&
- autoComplete &&
- autoComplete in autoCompleteWebToTextContentTypeMap
- ? // $FlowFixMe
+ textContentType != null
+ ? textContentType
+ : Platform.OS === 'ios' &&
+ autoComplete &&
+ autoComplete in autoCompleteWebToTextContentTypeMap
+ ? // $FlowFixMe[invalid-computed-prop]
+ // $FlowFixMe[prop-missing]
autoCompleteWebToTextContentTypeMap[autoComplete]
: textContentType
}
diff --git a/Libraries/Components/TextInput/__tests__/TextInput-test.js b/Libraries/Components/TextInput/__tests__/TextInput-test.js
index a7900d00835b69..6e9fbc1fd64299 100644
--- a/Libraries/Components/TextInput/__tests__/TextInput-test.js
+++ b/Libraries/Components/TextInput/__tests__/TextInput-test.js
@@ -169,6 +169,42 @@ describe('TextInput tests', () => {
expect(TextInput.State.currentlyFocusedInput()).toBe(textInputRe2.current);
});
+ it('should give precedence to `textContentType` when set', () => {
+ const instance = ReactTestRenderer.create(
+ ,
+ );
+
+ expect(instance.toJSON()).toMatchInlineSnapshot(`
+
+ `);
+ });
+
it('should render as expected', () => {
expectRendersMatchingSnapshot(
'TextInput',
diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
index 94967c07849207..b0563e0d2f384d 100644
--- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
+++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
@@ -822,6 +822,13 @@ exports.examples = ([
+
+
+
);
},