feat: Add inputMode prop to TextInput component

facebook · Aug 30, 2022 · 484fe22 · 484fe22
1 parent 8c882b4
commit 484fe22
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 0 deletions.
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -155,6 +155,15 @@ export type KeyboardType =
   // Android-only
   | 'visible-password';
 
+export type InputMode =
+  | 'text'
+  | 'decimal'
+  | 'numeric'
+  | 'tel'
+  | 'search'
+  | 'email'
+  | 'url';
+
 export type ReturnKeyType =
   // Cross Platform
   | 'done'
@@ -567,6 +576,22 @@ export type Props = $ReadOnly<{|
    */
   enterKeyHint?: ?enterKeyHintType,
 
+  /**
+   * `inputMode` works like the `inputmode` attribute in HTML, it determines which
+   * keyboard to open, e.g.`numeric` and has precedence over keyboardType
+   *
+   * Support the following values:
+   *
+   * - `text`
+   * - `decimal`
+   * - `numeric`
+   * - `tel`
+   * - `search`
+   * - `email`
+   * - `url`
+   */
+  inputMode?: ?InputMode,
+
   /**
    * Determines which keyboard to open, e.g.`numeric`.
    *
@@ -1422,6 +1447,16 @@ const enterKeyHintToReturnTypeMap = {
   send: 'send',
 };
 
+const inputModeToKeyboardTypeMap = {
+  text: 'default',
+  decimal: 'decimal-pad',
+  numeric: 'number-pad',
+  tel: 'phone-pad',
+  search: Platform.OS === 'ios' ? 'web-search' : 'default',
+  email: 'email-address',
+  url: 'url',
+};
+
 const ExportedForwardRef: React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
   React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
@@ -1434,6 +1469,8 @@ const ExportedForwardRef: React.AbstractComponent<
     editable,
     enterKeyHint,
     returnKeyType,
+    inputMode,
+    keyboardType,
     ...restProps
   },
   forwardedRef: ReactRefSetter<
@@ -1449,6 +1486,9 @@ const ExportedForwardRef: React.AbstractComponent<
       returnKeyType={
         enterKeyHint ? enterKeyHintToReturnTypeMap[enterKeyHint] : returnKeyType
       }
+      keyboardType={
+        inputMode ? inputModeToKeyboardTypeMap[inputMode] : keyboardType
+      }
       {...restProps}
       forwardedRef={forwardedRef}
     />

diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js
@@ -721,6 +721,29 @@ module.exports = ([
       return <View>{examples}</View>;
     },
   },
+  {
+    title: 'Input modes',
+    name: 'inputModes',
+    render: function (): React.Node {
+      const inputMode = [
+        'text',
+        'decimal',
+        'numeric',
+        'tel',
+        'search',
+        'email',
+        'url',
+      ];
+      const examples = inputMode.map(mode => {
+        return (
+          <WithLabel key={mode} label={mode}>
+            <TextInput inputMode={mode} style={styles.default} />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    },
+  },
   {
     title: 'Blur on submit',
     render: function (): React.Element<any> {