A framework for building native applications using React
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 F
fabriziobertoglio1987 committed
52aee50a704bbeab91f5fa05fe3220dee304422f
Parent: 1804951
Committed by Facebook GitHub Bot <[email protected]>
on 3/10/2022, 7:23:33 PM