From 1465c8f3874cdee8c325ab4a4916fda0b3e43bdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Cuesta?= <acuesta@olyseum.com>
Date: Fri, 16 Jul 2021 05:11:39 -0700
Subject: [PATCH] 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: https://github.com/facebook/react-native/pull/31781

Test Plan:
Before change:

{F630980679}

After Change:

{F630986399}

Reviewed By: lunaleaps

Differential Revision: D29517822

Pulled By: sshic

fbshipit-source-id: 1bda29584a3799570f34e772b5589b59ac80c524
---
 .../TextInput/AndroidTextInputNativeComponent.js          | 3 ++-
 Libraries/Components/TextInput/TextInput.js               | 4 ++--
 .../DeprecatedPropTypes/DeprecatedTextInputPropTypes.js   | 4 ++--
 .../react/views/textinput/ReactTextInputManager.java      | 3 +++
 .../react/views/textinput/ReactTextInputPropertyTest.java | 4 ++++
 .../components/textinput/iostextinput/conversions.h       | 8 ++++----
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js
index b8d559a2954..0059f35cd63 100644
--- 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
index 74f0113cac7..b0227ca0eb5 100644
--- 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,6 +501,7 @@ export type Props = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *iOS Only*
    *
@@ -508,7 +509,6 @@ export type Props = $ReadOnly<{|
    *
    * - `ascii-capable`
    * - `numbers-and-punctuation`
-   * - `url`
    * - `name-phone-pad`
    * - `twitter`
    * - `web-search`
diff --git a/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js b/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js
index 8adbf0c988d..0f371f7af2e 100644
--- a/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js
+++ b/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js
@@ -136,6 +136,7 @@ module.exports = {
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *iOS Only*
    *
@@ -143,7 +144,6 @@ module.exports = {
    *
    * - `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
index 322bdc17353..90a3b22a675 100644
--- 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 class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
       // 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/ReactAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.java b/ReactAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.java
index f993878840a..b908654deb6 100644
--- a/ReactAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.java
+++ b/ReactAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.java
@@ -221,6 +221,7 @@ public class ReactTextInputPropertyTest {
   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 class ReactTextInputPropertyTest {
     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
index 85d2fe926e7..cc935fadecf 100644
--- 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;