Add support for selectionColor on Android TextInput

Summary:
public
This adds support to set the highlight color on TextInput on Android.  See https://github.com/facebook/react-native/pull/5678 for the iOS implementation.

Note : We will merge these two properties with one name 'selectionColor' in a follow on diff, and may move it to a style.

Reviewed By: nicklockwood

Differential Revision: D2895253

fb-gh-sync-id: 6f2c08c812ff0028973185356a8af285f7dd7969

Examples/UIExplorer/TextInputExample.android.js

@@ -322,6 +322,11 @@ exports.examples = [
               Darker backgroundColor
             </Text>
           </TextInput>
+          <TextInput
+            defaultValue="Highlight Color is red"
+            selectionColor={'red'}
+            style={styles.singleLine}>
+          </TextInput>
         </View>
       );
     }

Examples/UIExplorer/TextInputExample.ios.js

@@ -543,12 +543,12 @@ exports.examples = [
         <View>
           <TextInput
             style={styles.default}
-            tintColor={"green"}
+            selectionColor={"green"}
             defaultValue="Highlight me"
           />
           <TextInput
             style={styles.default}
-            tintColor={"rgba(86, 76, 205, 1)"}
+            selectionColor={"rgba(86, 76, 205, 1)"}
             defaultValue="Highlight me"
           />
         </View>

Libraries/Components/TextInput/TextInput.js

@@ -226,16 +226,15 @@ var TextInput = React.createClass({
      * The text color of the placeholder string
      */
     placeholderTextColor: PropTypes.string,
-    /**
-    * The highlight and cursor color of the text input
-    * @platform ios
-    */
-    tintColor: PropTypes.string,
     /**
      * If true, the text input obscures the text entered so that sensitive text
      * like passwords stay secure. The default value is false.
      */
     secureTextEntry: PropTypes.bool,
+    /**
+    * The highlight (and cursor on ios) color of the text input
+    */
+    selectionColor: PropTypes.string,
     /**
      * See DocumentSelectionState.js, some state that is responsible for
      * maintaining selection information for a document
@@ -511,6 +510,7 @@ var TextInput = React.createClass({
         password={this.props.password || this.props.secureTextEntry}
         placeholder={this.props.placeholder}
         placeholderTextColor={this.props.placeholderTextColor}
+        selectionColor={this.props.selectionColor}
         text={this._getText()}
         underlineColorAndroid={this.props.underlineColorAndroid}
         children={children}

Libraries/Text/RCTTextFieldManager.m

@@ -78,7 +78,6 @@ RCT_EXPORT_VIEW_PROPERTY(autoCorrect, BOOL)
 RCT_REMAP_VIEW_PROPERTY(editable, enabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
 RCT_EXPORT_VIEW_PROPERTY(placeholderTextColor, UIColor)
-RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(text, NSString)
 RCT_EXPORT_VIEW_PROPERTY(maxLength, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(clearButtonMode, UITextFieldViewMode)
@@ -95,6 +94,7 @@ RCT_REMAP_VIEW_PROPERTY(password, secureTextEntry, BOOL) // backwards compatibil
 RCT_REMAP_VIEW_PROPERTY(color, textColor, UIColor)
 RCT_REMAP_VIEW_PROPERTY(autoCapitalize, autocapitalizationType, UITextAutocapitalizationType)
 RCT_REMAP_VIEW_PROPERTY(textAlign, textAlignment, NSTextAlignment)
+RCT_REMAP_VIEW_PROPERTY(selectionColor, tintColor, UIColor)
 RCT_CUSTOM_VIEW_PROPERTY(fontSize, CGFloat, RCTTextField)
 {
   view.font = [RCTConvert UIFont:view.font withSize:json ?: @(defaultView.font.pointSize)];

Libraries/Text/RCTTextViewManager.m

@@ -28,7 +28,6 @@ RCT_EXPORT_VIEW_PROPERTY(autoCorrect, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(blurOnSubmit, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(clearTextOnFocus, BOOL)
 RCT_REMAP_VIEW_PROPERTY(color, textView.textColor, UIColor)
-RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_REMAP_VIEW_PROPERTY(editable, textView.editable, BOOL)
 RCT_REMAP_VIEW_PROPERTY(enablesReturnKeyAutomatically, textView.enablesReturnKeyAutomatically, BOOL)
 RCT_REMAP_VIEW_PROPERTY(keyboardType, textView.keyboardType, UIKeyboardType)
@@ -39,6 +38,7 @@ RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
 RCT_EXPORT_VIEW_PROPERTY(placeholderTextColor, UIColor)
 RCT_REMAP_VIEW_PROPERTY(returnKeyType, textView.returnKeyType, UIReturnKeyType)
 RCT_REMAP_VIEW_PROPERTY(secureTextEntry, textView.secureTextEntry, BOOL)
+RCT_REMAP_VIEW_PROPERTY(selectionColor, tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(selectTextOnFocus, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(text, NSString)
 RCT_CUSTOM_VIEW_PROPERTY(fontSize, CGFloat, RCTTextView)

ReactAndroid/src/main/java/com/facebook/react/views/text/DefaultStyleValuesUtil.java

@@ -30,17 +30,7 @@ public final class DefaultStyleValuesUtil {
    * @return The ColorStateList for the hint text as defined in the style
    */
   public static ColorStateList getDefaultTextColorHint(Context context) {
-    Resources.Theme theme = context.getTheme();
+    return getDefaultTextAttribute(context, android.R.attr.textColorHint);
-    TypedArray textAppearances = null;
-    try {
-      textAppearances = theme.obtainStyledAttributes(new int[]{android.R.attr.textColorHint});
-      ColorStateList textColorHint = textAppearances.getColorStateList(0);
-      return textColorHint;
-    } finally {
-      if (textAppearances != null) {
-        textAppearances.recycle();
-      }
-    }
   }
 
   /**
@@ -50,10 +40,24 @@ public final class DefaultStyleValuesUtil {
    * @return The ColorStateList for the text as defined in the style
    */
   public static ColorStateList getDefaultTextColor(Context context) {
+    return getDefaultTextAttribute(context, android.R.attr.textColor);
+  }
+
+  /**
+   * Utility method that returns the default text highlight color as define by the theme
+   *
+   * @param context The Context
+   * @return The int for the highlight color as defined in the style
+   */
+  public static int getDefaultTextColorHighlight(Context context) {
+    return getDefaultTextAttribute(context, android.R.attr.textColorHighlight).getDefaultColor();
+  }
+
+  private static ColorStateList getDefaultTextAttribute(Context context, int attribute) {
     Resources.Theme theme = context.getTheme();
     TypedArray textAppearances = null;
     try {
-      textAppearances = theme.obtainStyledAttributes(new int[]{android.R.attr.textColor});
+      textAppearances = theme.obtainStyledAttributes(new int[]{attribute});
       ColorStateList textColor = textAppearances.getColorStateList(0);
       return textColor;
     } finally {

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

@@ -196,6 +196,15 @@ public class ReactTextInputManager extends
     }
   }
 
+  @ReactProp(name = "selectionColor", customType = "Color")
+  public void setSelectionColor(ReactEditText view, @Nullable Integer color) {
+    if (color == null) {
+      view.setHighlightColor(DefaultStyleValuesUtil.getDefaultTextColorHighlight(view.getContext()));
+    } else {
+      view.setHighlightColor(color);
+    }
+  }
+
   @ReactProp(name = "underlineColorAndroid", customType = "Color")
   public void setUnderlineColor(ReactEditText view, @Nullable Integer underlineColor) {
     if (underlineColor == null) {