Add support for drawableLeft and drawablePadding props

Summary: Add support inlining images into text inputs. For now this is only available on Android.

Reviewed By: andreicoman11

Differential Revision: D3470805

fbshipit-source-id: 14db05ec4d5af549bf314b903654314f39bf73ea

Author: Martín Bigio

Examples/UIExplorer/TextInputExample.android.js

@@ -412,19 +412,19 @@ exports.examples = [
     render: function() {
       return (
         <View>
-          <TextInput 
+          <TextInput
             style={[styles.singleLine, {fontFamily: 'sans-serif'}]}
             placeholder="Custom fonts like Sans-Serif are supported"
           />
-          <TextInput 
+          <TextInput
             style={[styles.singleLine, {fontFamily: 'sans-serif', fontWeight: 'bold'}]}
             placeholder="Sans-Serif bold"
           />
-          <TextInput 
+          <TextInput
             style={[styles.singleLine, {fontFamily: 'sans-serif', fontStyle: 'italic'}]}
             placeholder="Sans-Serif italic"
           />
-          <TextInput 
+          <TextInput
             style={[styles.singleLine, {fontFamily: 'serif'}]}
             placeholder="Serif"
           />
@@ -570,4 +570,28 @@ exports.examples = [
       return <View>{examples}{types}</View>;
     }
   },
+  {
+    title: 'Inline Images',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            inlineImageLeft="ic_menu_black_24dp"
+            placeholder="This has drawableLeft set"
+            style={styles.singleLine}
+          />
+          <TextInput
+            inlineImageLeft="ic_menu_black_24dp"
+            inlineImagePadding={30}
+            placeholder="This has drawableLeft and drawablePadding set"
+            style={styles.singleLine}
+          />
+          <TextInput
+            placeholder="This does not have drawable props set"
+            style={styles.singleLine}
+          />
+        </View>
+      );
+    }
+  },
 ];

Libraries/Components/TextInput/TextInput.js

@@ -419,6 +419,18 @@ const TextInput = React.createClass({
      * @platform android
      */
     underlineColorAndroid: ColorPropType,
+
+    /**
+     * If defined, the provided image resource will be rendered on the left.
+     * @platform android
+     */
+    inlineImageLeft: PropTypes.string,
+
+    /**
+     * Padding between the inline image, if any, and the text input itself.
+     * @platform android
+     */
+    inlineImagePadding: PropTypes.number,
   },
 
   /**
@@ -638,6 +650,8 @@ const TextInput = React.createClass({
         selectionColor={this.props.selectionColor}
         text={this._getText()}
         underlineColorAndroid={this.props.underlineColorAndroid}
+        inlineImageLeft={this.props.inlineImageLeft}
+        inlineImagePadding={this.props.inlineImagePadding}
         children={children}
         editable={this.props.editable}
         selectTextOnFocus={this.props.selectTextOnFocus}

ReactAndroid/src/main/java/com/facebook/react/views/textinput/BUCK

@@ -12,6 +12,7 @@ android_library(
     react_native_target('java/com/facebook/react/modules/core:core'),
     react_native_target('java/com/facebook/react/uimanager/annotations:annotations'),
     react_native_target('java/com/facebook/react/uimanager:uimanager'),
+    react_native_target('java/com/facebook/react/views/imagehelper:imagehelper'),
     react_native_target('java/com/facebook/react/views/text:text'),
     react_native_target('java/com/facebook/react/views/view:view'),
   ],

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

@@ -43,6 +43,7 @@
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;
 import com.facebook.react.views.text.DefaultStyleValuesUtil;
 import com.facebook.react.views.text.ReactTextUpdate;
 import com.facebook.react.views.text.TextInlineImageSpan;
@@ -323,6 +324,17 @@ public void setTextAlignVertical(ReactEditText view, @Nullable String textAlignV
     }
   }
 
+  @ReactProp(name = "inlineImageLeft")
+  public void setInlineImageLeft(ReactEditText view, @Nullable String resource) {
+    int id = ResourceDrawableIdHelper.getInstance().getResourceDrawableId(view.getContext(), resource);
+    view.setCompoundDrawablesWithIntrinsicBounds(id, 0, 0, 0);
+  }
+
+  @ReactProp(name = "inlineImagePadding")
+  public void setInlineImagePadding(ReactEditText view, int padding) {
+    view.setCompoundDrawablePadding(padding);
+  }
+
   @ReactProp(name = "editable", defaultBoolean = true)
   public void setEditable(ReactEditText view, boolean editable) {
     view.setEnabled(editable);