Add support to URI keyboard type in Android (#31781)

Summary: Android react-native `TextInput` component does nothing if prop `keyboardType` is `url` value. This PR solves that problem. ## Changelog [Android] [Added] - Add support to URI keyboard type in Android Pull Request resolved: #31781 Test Plan: Before change: {F630980679} After Change: {F630986399} Reviewed By: lunaleaps Differential Revision: D29517822 Pulled By: sshic fbshipit-source-id: 1bda29584a3799570f34e772b5589b59ac80c524
facebook · Jul 16, 2021 · 1465c8f · 1465c8f
1 parent 2970de9
commit 1465c8f
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js
@@ -37,10 +37,10 @@ export type KeyboardType =
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
+  | 'url'
   // iOS-only
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
@@ -244,6 +244,7 @@ export type NativeProps = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *Android Only*
    *

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -146,10 +146,10 @@ export type KeyboardType =
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
+  | 'url'
   // iOS-only
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
@@ -501,14 +501,14 @@ export type Props = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *iOS Only*
    *
    * The following values work on iOS only:
    *
    * - `ascii-capable`
    * - `numbers-and-punctuation`
-   * - `url`
    * - `name-phone-pad`
    * - `twitter`
    * - `web-search`

diff --git a/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js b/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js
@@ -136,14 +136,14 @@ module.exports = {
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *iOS Only*
    *
    * The following values work on iOS only:
    *
    * - `ascii-capable`
    * - `numbers-and-punctuation`
-   * - `url`
    * - `name-phone-pad`
    * - `twitter`
    * - `web-search`
@@ -162,10 +162,10 @@ module.exports = {
     'numeric',
     'phone-pad',
     'number-pad',
+    'url',
     // iOS-only
     'ascii-capable',
     'numbers-and-punctuation',
-    'url',
     'name-phone-pad',
     'decimal-pad',
     'twitter',

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
@@ -108,6 +108,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
   private static final String KEYBOARD_TYPE_NUMBER_PAD = "number-pad";
   private static final String KEYBOARD_TYPE_PHONE_PAD = "phone-pad";
   private static final String KEYBOARD_TYPE_VISIBLE_PASSWORD = "visible-password";
+  private static final String KEYBOARD_TYPE_URI = "url";
   private static final InputFilter[] EMPTY_FILTERS = new InputFilter[0];
   private static final int UNSET = -1;
 
@@ -774,6 +775,8 @@ public void setKeyboardType(ReactEditText view, @Nullable String keyboardType) {
       // This will supercede secureTextEntry={false}. If it doesn't, due to the way
       //  the flags work out, the underlying field will end up a URI-type field.
       flagsToSet = InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD;
+    } else if (KEYBOARD_TYPE_URI.equalsIgnoreCase(keyboardType)) {
+      flagsToSet = InputType.TYPE_TEXT_VARIATION_URI;
     }
 
     updateStagedInputTypeFlag(view, InputType.TYPE_MASK_CLASS, flagsToSet);

diff --git a/...tAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.java b/...tAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.java
@@ -221,6 +221,7 @@ public void testNumLines() {
   public void testKeyboardType() {
     ReactEditText view = mManager.createViewInstance(mThemedContext);
     int numberPadTypeFlags = InputType.TYPE_CLASS_NUMBER;
+    int urlTypeFlags = InputType.TYPE_TEXT_VARIATION_URI;
     int decimalPadTypeFlags = InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL;
     int numericTypeFlags =
         InputType.TYPE_CLASS_NUMBER
@@ -246,6 +247,9 @@ public void testKeyboardType() {
     mManager.updateProperties(view, buildStyles("keyboardType", "number-pad"));
     assertThat(view.getInputType() & generalKeyboardTypeFlags).isEqualTo(numberPadTypeFlags);
 
+    mManager.updateProperties(view, buildStyles("keyboardType", "url"));
+    assertThat(view.getInputType() & generalKeyboardTypeFlags).isEqualTo(urlTypeFlags);
+
     mManager.updateProperties(view, buildStyles("keyboardType", "decimal-pad"));
     assertThat(view.getInputType() & generalKeyboardTypeFlags).isEqualTo(decimalPadTypeFlags);
 

diff --git a/ReactCommon/react/renderer/components/textinput/iostextinput/conversions.h b/ReactCommon/react/renderer/components/textinput/iostextinput/conversions.h
@@ -163,6 +163,10 @@ inline void fromRawValue(const RawValue &value, KeyboardType &result) {
     result = KeyboardType::NumberPad;
     return;
   }
+  if (string == "url") {
+    result = KeyboardType::URL;
+    return;
+  }
   if (string == "decimal-pad") {
     result = KeyboardType::DecimalPad;
     return;
@@ -177,10 +181,6 @@ inline void fromRawValue(const RawValue &value, KeyboardType &result) {
     result = KeyboardType::NumbersAndPunctuation;
     return;
   }
-  if (string == "url") {
-    result = KeyboardType::URL;
-    return;
-  }
   if (string == "name-phone-pad") {
     result = KeyboardType::NamePhonePad;
     return;