From 52aee50a704bbeab91f5fa05fe3220dee304422f Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Thu, 10 Mar 2022 11:23:33 -0800
Subject: [PATCH] underlineColor transparent not working on API 21 (#30897)

Summary:
This issue fixes https://github.com/facebook/react-native/issues/29379 `underlineColorAndroid'='transparent'` does not work on Android API 21.
Setting `style: { bottomBorderColor: 'transparent'}` fixes the issue.

The following steps fix underlineColorAndroid on Android API 21:
- Store the bottomBorderColor in a local variable
- Then set the bottomBorderColor to the same color of underlineColorAndroid
- Set underlineColorAndroid
- Then Set the bottomBorderColor to the previous color previously stored in the local variable

This change requires `ReactViewBackgroundDrawable` method `getBorderColor` to be public and accessible from `ReactTextInputManager` to retrieve the border color.

https://github.com/facebook/react-native/blob/6061b7928320c64a94716ce3d6646667ebf3f6b5/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java#L1231-L1236

Related Discussions https://github.com/facebook/react-native/issues/18938 https://github.com/facebook/react-native/pull/18988 https://github.com/facebook/react-native/issues/29412#issuecomment-773412466

More Information at https://github.com/fabriziobertoglio1987/react-native-notes/issues/4#issuecomment-1029780852

## Changelog

[Android] [Fixed] - Fix underlineColorAndroid transparent not working on API 21

Pull Request resolved: https://github.com/facebook/react-native/pull/30897

Test Plan:
This changes fix the Java API which can not be tested as explained in commit https://github.com/facebook/react-native/commit/709a441ecf54cd9465f5946af0454ee7d10d5cbe
The java TextInputTest was excluded from the test suite in commit https://github.com/facebook/react-native/commit/709a441ecf54cd9465f5946af0454ee7d10d5cbe as they need the Yoga libraries to run

**<details><summary>CLICK TO OPEN TESTS RESULTS - API 21</summary>**
<p>

Does not show underline by default (`transparent`)

```javascript
<TextInput />
```

<image src="https://user-images.githubusercontent.com/24992535/107060953-dee34d00-67d7-11eb-8f01-360dbb1420b8.png" width="150" />

```javascript
<TextInput underlineColorAndroid="red" />
```

<image src="https://user-images.githubusercontent.com/24992535/107061134-194cea00-67d8-11eb-9da1-9780b1aa8294.png" width="150" />

```javascript
<TextInput
  underlineColorAndroid="green"
  style={
     {
        borderBottomColor: 'red',
        borderBottomWidth: 2,
        borderTopColor: 'black',
        borderTopWidth: 4
     }
   }
/>
```

<image src="https://user-images.githubusercontent.com/24992535/107062411-9167df80-67d9-11eb-810c-749992d8d2d3.png" width="150" />

```javascript
<TextInput
  style={
     {
        borderBottomColor: 'red',
        borderBottomWidth: 2,
        borderTopColor: 'black',
        borderTopWidth: 4
     }
   }
/>
```

<image src="https://user-images.githubusercontent.com/24992535/107062735-e6a3f100-67d9-11eb-93c3-02cd768f8421.png" width="150" />

```javascript
<TextInput
  underlineColorAndroid="blue"
  style={
    {
      borderBottomColor: 'red',
      borderBottomWidth: 2,
      borderTopColor: 'black',
      borderTopWidth: 4,
      borderLeftColor: 'pink',
      borderLeftWidth: 7,
      borderRightColor: 'yellow',
      borderRightWidth: 7,
    }
  }
/>
```

<image src="https://user-images.githubusercontent.com/24992535/107063263-75b10900-67da-11eb-97ab-316736d525a2.png" width="150" />

```javascript
<TextInput
  underlineColorAndroid="transparent"
  style={
    {
      borderBottomColor: 'red',
      borderBottomWidth: 2,
      borderTopColor: 'black',
      borderTopWidth: 4,
      borderLeftColor: 'pink',
      borderLeftWidth: 7,
      borderRightColor: 'yellow',
      borderRightWidth: 7,
    }
  }
/>
```

<image src="https://user-images.githubusercontent.com/24992535/107063332-8792ac00-67da-11eb-82fc-99793bf4d49d.png" width="150" />

</p>
</details>

Reviewed By: cortinico

Differential Revision: D33906415

Pulled By: lunaleaps

fbshipit-source-id: bd7efe4aac40ad701aec83f051ac40dcd4a99cda
---
 .../facebook/react/views/textinput/ReactEditText.java |  4 ++++
 .../react/views/textinput/ReactTextInputManager.java  | 11 ++++++++++-
 .../react/views/view/ReactViewBackgroundDrawable.java |  2 +-
 .../react/views/view/ReactViewBackgroundManager.java  |  4 ++++
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
index 17ef123d0d2..360de688d54 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
@@ -914,6 +914,10 @@ public class ReactEditText extends AppCompatEditText
     mReactBackgroundManager.setBorderColor(position, color, alpha);
   }
 
+  public int getBorderColor(int position) {
+    return mReactBackgroundManager.getBorderColor(position);
+  }
+
   public void setBorderRadius(float borderRadius) {
     mReactBackgroundManager.setBorderRadius(borderRadius);
   }
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 99ae31e7d50..9f64b841f11 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
@@ -637,7 +637,16 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
     if (underlineColor == null) {
       drawableToMutate.clearColorFilter();
     } else {
-      drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
+      // fixes underlineColor transparent not working on API 21
+      // re-sets the TextInput underlineColor https://bit.ly/3M4alr6
+      if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
+        int bottomBorderColor = view.getBorderColor(Spacing.BOTTOM);
+        setBorderColor(view, Spacing.START, underlineColor);
+        drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
+        setBorderColor(view, Spacing.START, bottomBorderColor);
+      } else {
+        drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
+      }
     }
   }
 
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
index c6fdb1f6ee0..a464382e3c5 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
@@ -1259,7 +1259,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
     return !YogaConstants.isUndefined(rgb) && !YogaConstants.isUndefined(alpha);
   }
 
-  private int getBorderColor(int position) {
+  public int getBorderColor(int position) {
     float rgb = mBorderRGB != null ? mBorderRGB.get(position) : DEFAULT_BORDER_RGB;
     float alpha = mBorderAlpha != null ? mBorderAlpha.get(position) : DEFAULT_BORDER_ALPHA;
 
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundManager.java
index c89b4e3ad0c..19bf56f381b 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundManager.java
@@ -58,6 +58,10 @@ public class ReactViewBackgroundManager {
     getOrCreateReactViewBackground().setBorderColor(position, color, alpha);
   }
 
+  public int getBorderColor(int position) {
+    return getOrCreateReactViewBackground().getBorderColor(position);
+  }
+
   public void setBorderRadius(float borderRadius) {
     getOrCreateReactViewBackground().setRadius(borderRadius);
   }