Fix backgroundColor top level prop of TextInput

mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Summary:
Changelog: [Android] [FIXED] - Fix backgroundColor top level prop of TextInput

This diff fixes two issues with the `backgroundColor` top level property of TextInput on Android:
 * Now it is possible to set a **string** value for the top-level `backgroundColor` property of TextInput (crashed the app previously):
```
<TextInput backgroundColor="#ffccbb">Hello, React Native</TextInput>
```
* Now it's possible to set an **integer** value for the top-level `backgroundColor` property of TextInput (had no effect previously):
```
<TextInput backgroundColor={0xffccbbff}>Hello, React Native</TextInput>
```

A `customType = "Color"` annotation parameter must be provided for `ReactBaseTextShadowNode.setBackgroundColor(...)` since the color value must be previously processed in JS before sending it over the bridge to the native code. The JS code will parse the color value and return the proper ARGB color integer to the native platforms (https://fburl.com/uqup52tn).

Without providing the custom type for the background color, if a string value is set for the top-level `backgroundColor` property in the JS code, the Android code will crash since it expects an integer value for the color in `ReactBaseTextShadowNode.setBackgroundColor(...)`, but a string will be passed from JS without any conversion and there will be a `ClassCastException` thrown. If an integer value without the alpha component (like `0xffccbb`) is set, the Android native view would get an integer color value with its alpha component set to `0x00`, which means a transparent color.

On a side note: the alpha component of a color must always be set when using an integer value for `backgroundColor` since the JS code, while processing the color type, shifts the rightmost 8 bytes (alpha component) to the leftmost position. If those 8 bytes are not the alpha component, you will get the wrong color in the end. It doesn't seem to be a problem for string values of `backgroundColor` though.

Reviewed By: mdvacca

Differential Revision: D15453980

fbshipit-source-id: f3f5d9c9877cdbce79a67f2ed93ad4589576d166

This commit is contained in:

Oleksandr Melnykov

2019-05-24 02:53:42 -07:00

committed by

Facebook Github Bot

parent 01abcf0e83

commit fb6cf2552a

1 changed files with 2 additions and 2 deletions

									
										ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java
									
		+2
		-2
	
												View File
												
				@@ -459,8 +459,8 @@ public abstract class ReactBaseTextShadowNode extends LayoutShadowNode {

				    markUpdated();

				  }

				  @ReactProp(name = ViewProps.BACKGROUND_COLOR)

				  public void setBackgroundColor(Integer color) {

				  @ReactProp(name = ViewProps.BACKGROUND_COLOR, customType = "Color")

				  public void setBackgroundColor(@Nullable Integer color) {

				    // Background color needs to be handled here for virtual nodes so it can be incorporated into

				    // the span. However, it doesn't need to be applied to non-virtual nodes because non-virtual

				    // nodes get mapped to native views and native views get their background colors get set via