Fix StyleSheet 'textAlign' for AndroidTextInput. Closes #2702

Examples/UIExplorer/TextInputExample.android.js

@@ -347,25 +347,19 @@ exports.examples = [
  placeholder="multiline, aligned top-left"
  placeholderTextColor="red"
  multiline={true}
- textAlign="start"
- textAlignVertical="top"
- style={styles.multiline}
+ style={[styles.multiline, {textAlign: "left", textAlignVertical: "top"}]}
  />
  <TextInput
  autoCorrect={true}
  placeholder="multiline, aligned center"
  placeholderTextColor="green"
  multiline={true}
- textAlign="center"
- textAlignVertical="center"
- style={[styles.multiline]}
+ style={[styles.multiline, {textAlign: "center", textAlignVertical: "center"}]}
  />
  <TextInput
  autoCorrect={true}
  multiline={true}
- textAlign="end"
- textAlignVertical="bottom"
- style={[styles.multiline, {color: 'blue'}]}>
+ style={[styles.multiline, {color: 'blue'}, {textAlign: "right", textAlignVertical: "bottom"}]}>
  <Text style={styles.multiline}>multiline with children, aligned bottom-right</Text>
  </TextInput>
  </View>

Libraries/Components/TextInput/TextInput.js

@@ -101,24 +101,6 @@ var TextInput = React.createClass({
  * The default value is false.
  */
  autoFocus: PropTypes.bool,
- /**
- * Set the position of the cursor from where editing will begin.
- * @platform android
- */
- textAlign: PropTypes.oneOf([
- 'start',
- 'center',
- 'end',
- ]),
- /**
- * Aligns text vertically within the TextInput.
- * @platform android
- */
- textAlignVertical: PropTypes.oneOf([
- 'top',
- 'center',
- 'bottom',
- ]),
  /**
  * If false, text is not editable. The default value is true.
  */
@@ -491,10 +473,6 @@ var TextInput = React.createClass({
 
  var autoCapitalize =
  UIManager.AndroidTextInput.Constants.AutoCapitalizationType[this.props.autoCapitalize];
- var textAlign = UIManager.AndroidTextInput.Constants.TextAlign[this.props.textAlign];
- var textAlignVertical =
- UIManager.AndroidTextInput.Constants.TextAlignVertical[this.props.textAlignVertical];
-
  var children = this.props.children;
  var childCount = 0;
  ReactChildren.forEach(children, () => ++childCount);
@@ -512,8 +490,6 @@ var TextInput = React.createClass({
  style={[this.props.style]}
  autoCapitalize={autoCapitalize}
  autoCorrect={this.props.autoCorrect}
- textAlign={textAlign}
- textAlignVertical={textAlignVertical}
  keyboardType={this.props.keyboardType}
  mostRecentEventCount={0}
  multiline={this.props.multiline}

Libraries/Text/TextStylePropTypes.js

@@ -46,6 +46,12 @@ var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), {
  textAlign: ReactPropTypes.oneOf(
  ['auto' /*default*/, 'left', 'right', 'center', 'justify']
  ),
+ /**
+ * @platform android
+ */
+ textAlignVertical: ReactPropTypes.oneOf(
+ ['auto' /*default*/, 'top', 'bottom', 'center']
+ ),
  /**
  * @platform ios
  */

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -70,6 +70,7 @@ public class ViewProps {
  public static final String ON = "on";
  public static final String RESIZE_MODE = "resizeMode";
  public static final String TEXT_ALIGN = "textAlign";
+ public static final String TEXT_ALIGN_VERTICAL = "textAlignVertical";
 
  public static final String BORDER_WIDTH = "borderWidth";
  public static final String BORDER_LEFT_WIDTH = "borderLeftWidth";

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

@@ -28,6 +28,8 @@
 import android.widget.TextView;
 
 import com.facebook.infer.annotation.Assertions;
+import com.facebook.react.bridge.JSApplicationCausedNativeException;
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.common.MapBuilder;
@@ -201,14 +203,34 @@ public void setUnderlineColor(ReactEditText view, @Nullable Integer underlineCol
  }
  }
 
- @ReactProp(name = "textAlign")
- public void setTextAlign(ReactEditText view, int gravity) {
- view.setGravityHorizontal(gravity);
+ @ReactProp(name = ViewProps.TEXT_ALIGN)
+ public void setTextAlign(ReactEditText view, @Nullable String textAlign) {
+ if (textAlign == null || "auto".equals(textAlign)) {
+ view.setGravityHorizontal(Gravity.NO_GRAVITY);
+ } else if ("left".equals(textAlign)) {
+ view.setGravityHorizontal(Gravity.LEFT);
+ } else if ("right".equals(textAlign)) {
+ view.setGravityHorizontal(Gravity.RIGHT);
+ } else if ("center".equals(textAlign)) {
+ view.setGravityHorizontal(Gravity.CENTER_HORIZONTAL);
+ } else {
+ throw new JSApplicationIllegalArgumentException("Invalid textAlign: " + textAlign);
+ }
  }
 
- @ReactProp(name = "textAlignVertical")
- public void setTextAlignVertical(ReactEditText view, int gravity) {
- view.setGravityVertical(gravity);
+ @ReactProp(name = ViewProps.TEXT_ALIGN_VERTICAL)
+ public void setTextAlignVertical(ReactEditText view, @Nullable String textAlignVertical) {
+ if (textAlignVertical == null || "auto".equals(textAlignVertical)) {
+ view.setGravityVertical(Gravity.NO_GRAVITY);
+ } else if ("top".equals(textAlignVertical)) {
+ view.setGravityVertical(Gravity.TOP);
+ } else if ("bottom".equals(textAlignVertical)) {
+ view.setGravityVertical(Gravity.BOTTOM);
+ } else if ("center".equals(textAlignVertical)) {
+ view.setGravityVertical(Gravity.CENTER_VERTICAL);
+ } else {
+ throw new JSApplicationIllegalArgumentException("Invalid textAlignVertical: " + textAlignVertical);
+ }
  }
 
  @ReactProp(name = "editable", defaultBoolean = true)
@@ -471,16 +493,6 @@ public void onSelectionChanged(int start, int end) {
  @Override
  public @Nullable Map getExportedViewConstants() {
  return MapBuilder.of(
- "TextAlign",
- MapBuilder.of(
- "start", Gravity.START,
- "center", Gravity.CENTER_HORIZONTAL,
- "end", Gravity.END),
- "TextAlignVertical",
- MapBuilder.of(
- "top", Gravity.TOP,
- "center", Gravity.CENTER_VERTICAL,
- "bottom", Gravity.BOTTOM),
  "AutoCapitalizationType",
  MapBuilder.of(
  "none",