Add support for selectionColor on Android TextInput

Summary: public This adds support to set the highlight color on TextInput on Android. See #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
facebook · Feb 3, 2016 · 0c91931 · 0c91931 · DurgaManickam · Mar 31, 2016
1 parent 2e8eb65
commit 0c91931
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 21 deletions.
diff --git a/Examples/UIExplorer/TextInputExample.android.js b/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>
       );
     }

diff --git a/Examples/UIExplorer/TextInputExample.ios.js b/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>

diff --git a/Libraries/Components/TextInput/TextInput.js b/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}

diff --git a/Libraries/Text/RCTTextFieldManager.m b/Libraries/Text/RCTTextFieldManager.m
@@ -78,7 +78,6 @@ - (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField
 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 @@ - (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField
 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)];

diff --git a/Libraries/Text/RCTTextViewManager.m b/Libraries/Text/RCTTextViewManager.m
@@ -28,7 +28,6 @@ - (UIView *)view
 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 @@ - (UIView *)view
 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)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/DefaultStyleValuesUtil.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/DefaultStyleValuesUtil.java
@@ -30,17 +30,7 @@ private DefaultStyleValuesUtil() {
    * @return The ColorStateList for the hint text as defined in the style
    */
   public static ColorStateList getDefaultTextColorHint(Context context) {
-    Resources.Theme theme = context.getTheme();
-    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();
-      }
-    }
+    return getDefaultTextAttribute(context, android.R.attr.textColorHint);
   }
 
   /**
@@ -50,10 +40,24 @@ public static ColorStateList getDefaultTextColorHint(Context context) {
    * @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 {

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
@@ -196,6 +196,15 @@ public void setPlaceholderTextColor(ReactEditText view, @Nullable Integer color)
     }
   }
 
+  @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) {