feat: added enterKeyHint prop to textInput (#34482)

Summary:
This adds the `enterKeyHint` prop to the TextInput component as requested on #34424, mapping web [enterKeyHint types](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) to equivalent [returnKeyType](https://reactnative.dev/docs/textinput#returnkeytype) values. This PR also updates RNTester TextInputExample in order to facilitate the manual QA.

## Open questions
 - What should be the `returnType` in the case of `previous` in iOS?

 - what should happen if `enterKeyHint` and `returnKeyType` props are passed together?

## Changelog
[General] [Added] - Add enterKeyHint prop to TextInput component

Pull Request resolved: #34482

Test Plan:
- Open the RNTester app and navigate to the TextInput page
 - Test the TextInput component through the `enterKeyHint modes section`

 <image src="https://user-images.githubusercontent.com/22423684/186191205-9c04732e-568c-4cce-9564-50a84d70dca3.png" height="600px" width="300px" />

Reviewed By: GijsWeterings

Differential Revision: D38957275

Pulled By: necolas

fbshipit-source-id: d75f2c2000df5d9606a005083b20bf3a23b48831

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<HostComponent<mixed>> & 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<typeof InternalTextInput>,
   React.ElementRef<HostComponent<mixed>> & 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}
     />

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

@@ -727,6 +727,29 @@ module.exports = ([
       return <BlurOnSubmitExample />;
     },
   },
+  {
+    title: 'enterKeyHint modes',
+    name: 'enterKeyHintTypes',
+    render: function (): React.Node {
+      const enterKeyHintTypesHints = [
+        'enter',
+        'done',
+        'go',
+        'next',
+        'previous',
+        'search',
+        'send',
+      ];
+      const examples = enterKeyHintTypesHints.map(hint => {
+        return (
+          <WithLabel key={hint} label={hint}>
+            <TextInput enterKeyHint={hint} style={styles.default} />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    },
+  },
   {
     title: 'Submit behavior',
     render: function (): React.Element<any> {