underlineColor transparent not working on API 21 (#30897)

Summary:
This issue fixes #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 #18938 #18988 #29412 (comment)

More Information at fabOnReact/react-native-notes#4 (comment)

## Changelog

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

Pull Request resolved: #30897

Test Plan:
This changes fix the Java API which can not be tested as explained in commit 709a441
The java TextInputTest was excluded from the test suite in commit 709a441 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 void setBorderColor(int position, float color, float alpha) {
  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 void setUnderlineColor(ReactEditText view, @Nullable Integer underlineCol
  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 @@ private boolean isBorderColorDefined(int position) {
  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 void setBorderColor(int position, float color, float alpha) {
  getOrCreateReactViewBackground().setBorderColor(position, color, alpha);
  }
 
+ public int getBorderColor(int position) {
+ return getOrCreateReactViewBackground().getBorderColor(position);
+ }
+
  public void setBorderRadius(float borderRadius) {
  getOrCreateReactViewBackground().setRadius(borderRadius);
  }