From 52aee50a704bbeab91f5fa05fe3220dee304422f Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 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 **
CLICK TO OPEN TESTS RESULTS - API 21**

Does not show underline by default (`transparent`) ```javascript ``` ```javascript ``` ```javascript ``` ```javascript ``` ```javascript ``` ```javascript ```

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 17ef123d0d20de..360de688d54849 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 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); } 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 99ae31e7d501c7..9f64b841f114cc 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 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); + } } } 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 c6fdb1f6ee023f..a464382e3c5f63 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 @@ 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; 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 c89b4e3ad0c8e9..19bf56f381baf8 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 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); }