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.

6061b79283/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 709a441ecf
The java TextInputTest was excluded from the test suite in commit 709a441ecf 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

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);
   }

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);
+      }
     }
   }
 

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;
 

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);
   }