diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 8277898df9e6a0..5e1384a77c57ee 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -207,6 +207,15 @@ export type TextContentType = | 'newPassword' | 'oneTimeCode'; +export type enterKeyHintType = + | 'enter' + | 'done' + | 'go' + | 'next' + | 'previous' + | 'search' + | 'send'; + type PasswordRules = string; type IOSProps = $ReadOnly<{| @@ -543,6 +552,21 @@ export type Props = $ReadOnly<{| React.ElementRef> & ImperativeMethods, >, + /** + * `enterKeyHint` defines what action label (or icon) to present for the enter key on virtual keyboards. + * + * The following values is supported: + * + * - `enter` + * - `done` + * - `go` + * - `next` + * - `previous` + * - `search` + * - `send` + */ + enterKeyHint?: ?enterKeyHintType, + /** * Determines which keyboard to open, e.g.`numeric`. * @@ -1388,6 +1412,16 @@ function InternalTextInput(props: Props): React.Node { ); } +const enterKeyHintToReturnTypeMap = { + enter: 'default', + done: 'done', + go: 'go', + next: 'next', + previous: 'previous', + search: 'search', + send: 'send', +}; + const ExportedForwardRef: React.AbstractComponent< React.ElementConfig, React.ElementRef> & ImperativeMethods, @@ -1398,6 +1432,8 @@ const ExportedForwardRef: React.AbstractComponent< underlineColorAndroid = 'transparent', readOnly, editable, + enterKeyHint, + returnKeyType, ...restProps }, forwardedRef: ReactRefSetter< @@ -1410,6 +1446,9 @@ const ExportedForwardRef: React.AbstractComponent< rejectResponderTermination={rejectResponderTermination} underlineColorAndroid={underlineColorAndroid} editable={readOnly !== undefined ? !readOnly : editable} + returnKeyType={ + enterKeyHint ? enterKeyHintToReturnTypeMap[enterKeyHint] : returnKeyType + } {...restProps} forwardedRef={forwardedRef} /> diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js index 155cc316b4cdf3..e88978486cb292 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js @@ -727,6 +727,29 @@ module.exports = ([ return ; }, }, + { + title: 'enterKeyHint modes', + name: 'enterKeyHintTypes', + render: function (): React.Node { + const enterKeyHintTypesHints = [ + 'enter', + 'done', + 'go', + 'next', + 'previous', + 'search', + 'send', + ]; + const examples = enterKeyHintTypesHints.map(hint => { + return ( + + + + ); + }); + return {examples}; + }, + }, { title: 'Submit behavior', render: function (): React.Element {