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 = ([ + + + ); },