underlineColor transparent not working on API 21 #30897

fabOnReact · 2021-02-05T10:24:24Z

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.

react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java

Lines 1231 to 1236 in 6061b79

    
           private int getBorderColor(int position) { 
        
             float rgb = mBorderRGB != null ? mBorderRGB.get(position) : DEFAULT_BORDER_RGB; 
        
             float alpha = mBorderAlpha != null ? mBorderAlpha.get(position) : DEFAULT_BORDER_ALPHA; 
        
             return ReactViewBackgroundDrawable.colorFromAlphaAndRGBComponents(alpha, rgb); 
        
           }

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

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

CLICK TO OPEN TESTS RESULTS - API 21

Does not show underline by default (transparent)

<TextInput />

<TextInput underlineColorAndroid="red" />

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

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

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

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

facebook#29379

analysis-bot

Code analysis results:

google-java-format found some issues. See https://github.com/google/google-java-format

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

analysis-bot · 2021-02-05T10:44:35Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 189c2c8
Branch: main

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

on API 21 we change the logic as follows to fix underlineColorAndroid: - we store the bottomBorderColor in a local variable - we set the bottomBorderColor to the same color of underlineColorAndroid - we set the underlineColorAndroid - we re-set the bottomBorderColor to the previous color As by Facebook design it defaults to transparent facebook#18938 facebook#18988 but it is important to notice how this default is now not anymore used as JAVA sets a new default of transparent for all colors (null is not passed to this setter) facebook#29412 (comment)

analysis-bot

Code analysis results:

google-java-format found some issues. See https://github.com/google/google-java-format

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

Fixes the following Scenario. ```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" />

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

-      drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
+      if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
+        int bottomBorderColor = view.getBorderColor(Spacing.BOTTOM);
+        setBorderColor(view, Spacing.START, underlineColor);


analysis-bot · 2021-02-11T17:37:05Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,203,284	-917
android	hermes	armeabi-v7a	7,810,344	-724
android	hermes	x86	8,575,453	-291
android	hermes	x86_64	8,526,060	-482
android	jsc	arm64-v8a	9,872,024	-920
android	jsc	armeabi-v7a	8,863,616	-744
android	jsc	x86	9,840,280	-290
android	jsc	x86_64	10,435,005	-492

Base commit: 189c2c8
Branch: main

facebook-github-bot · 2022-02-01T00:25:51Z

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

cortinico

Thanks for the PR @fabriziobertoglio1987

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

Can I ask you why this is needed? Like what's the underlying issue that is causing this?

cortinico · 2022-02-02T12:05:55Z

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

@@ -545,7 +545,14 @@ public void setUnderlineColor(ReactEditText view, @Nullable Integer underlineCol
    if (underlineColor == null) {
      drawableToMutate.clearColorFilter();
    } else {
-      drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
+      if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {


Please add a comment here on why this is needed otherwise would be really hard to understand afterwards.

@cortinico thanks a lot. I added the comment with commit 6ebac50 and updated the summary of the pull request #30897 (comment) to include a link to fabOnReact/react-native-notes#4 (comment). I remain available.

facebook#30897 (review)

facebook-github-bot · 2022-03-10T00:48:23Z

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

react-native-bot · 2022-03-10T19:30:04Z

This pull request was successfully merged by @fabriziobertoglio1987 in 52aee50.

^{When will my fix make it into a release? | Upcoming Releases}

Summary: This issue fixes facebook#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 facebook#18938 facebook#18988 facebook#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: facebook#30897 Test Plan: This changes fix the Java API which can not be tested as explained in commit facebook@709a441 The java TextInputTest was excluded from the test suite in commit facebook@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

fabOnReact added 2 commits February 5, 2021 11:15

fix underlineColor transparent not working on API 21

eee5d7b

facebook#29379

Adding underlineColor transparent to TextInputSharedExamples

973c91d

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 5, 2021

analysis-bot suggested changes Feb 5, 2021

View reviewed changes

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java Outdated Show resolved Hide resolved

fabOnReact commented Feb 5, 2021

View reviewed changes

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java Show resolved Hide resolved

fabOnReact added 2 commits February 5, 2021 17:14

change getBorderColor() from private to public

849e0d5

analysis-bot suggested changes Feb 5, 2021

View reviewed changes

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java Outdated Show resolved Hide resolved

fabOnReact added 2 commits February 5, 2021 17:41

Example - remove underlineColorAndroid not required to be transparent

c7a6988

fabOnReact commented Feb 5, 2021

View reviewed changes

Remove changes from TextInputSharedExamples

4a973bd

fabOnReact marked this pull request as ready for review February 5, 2021 17:06

fabOnReact mentioned this pull request Feb 5, 2021

[0.63.1][Android 5] underlineColorAndroid not transparent #29379

Closed

fabOnReact added 2 commits February 8, 2021 09:12

Merge branch 'master' into fix/underline-color-api-21

3db5667

Merge branch 'master' into fix/underline-color-api-21

e707521

Merge branch 'master' into fix/underline-color-api-21

3755668

react-native-bot added Bug Platform: Android Android applications. labels Oct 1, 2021

cortinico reviewed Feb 2, 2022

View reviewed changes

fabOnReact added 2 commits February 3, 2022 13:56

Merge branch 'main' into fix/underline-color-api-21

48b8123

Merge branch 'main' into fix/underline-color-api-21

573ac33

fabOnReact mentioned this pull request Feb 4, 2022

underlineColor transparent not working on API 21 fabOnReact/react-native-notes#4

Closed

fabOnReact added 2 commits February 26, 2022 16:03

Merge branch 'main' into fix/underline-color-api-21

1017155

adding comment and information to pull request

6ebac50

facebook#30897 (review)

facebook-github-bot closed this in 52aee50 Mar 10, 2022

react-native-bot added the Merged This PR has been merged. label Mar 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

underlineColor transparent not working on API 21 #30897

underlineColor transparent not working on API 21 #30897

fabOnReact commented Feb 5, 2021 •

edited

Loading

analysis-bot left a comment

analysis-bot commented Feb 5, 2021 •

edited

Loading

analysis-bot left a comment

This comment was marked as off-topic.

analysis-bot commented Feb 11, 2021 •

edited

Loading

facebook-github-bot commented Feb 1, 2022

cortinico left a comment

cortinico Feb 2, 2022

fabOnReact Feb 26, 2022

facebook-github-bot commented Mar 10, 2022

react-native-bot commented Mar 10, 2022

	private int getBorderColor(int position) {
	float rgb = mBorderRGB != null ? mBorderRGB.get(position) : DEFAULT_BORDER_RGB;
	float alpha = mBorderAlpha != null ? mBorderAlpha.get(position) : DEFAULT_BORDER_ALPHA;

	return ReactViewBackgroundDrawable.colorFromAlphaAndRGBComponents(alpha, rgb);
	}

underlineColor transparent not working on API 21 #30897

underlineColor transparent not working on API 21 #30897

Conversation

fabOnReact commented Feb 5, 2021 • edited Loading

Summary

Changelog

Test Plan

analysis-bot left a comment

Choose a reason for hiding this comment

analysis-bot commented Feb 5, 2021 • edited Loading

analysis-bot left a comment

Choose a reason for hiding this comment

This comment was marked as off-topic.

analysis-bot commented Feb 11, 2021 • edited Loading

facebook-github-bot commented Feb 1, 2022

cortinico left a comment

Choose a reason for hiding this comment

cortinico Feb 2, 2022

Choose a reason for hiding this comment

fabOnReact Feb 26, 2022

Choose a reason for hiding this comment

facebook-github-bot commented Mar 10, 2022

react-native-bot commented Mar 10, 2022

fabOnReact commented Feb 5, 2021 •

edited

Loading

analysis-bot commented Feb 5, 2021 •

edited

Loading

analysis-bot commented Feb 11, 2021 •

edited

Loading