Skip to content
Permalink
Browse files

Fix StyleSheet 'textAlign' for AndroidTextInput. Closes #2702

Summary:
change `setTextAlign` and `setTextAlignVertical` to receive argument of type `String` (the same as in `StyleSheet`), so that native props and stylesheet props are calling the same ReactMethod

- add demo (may not be necessary)
Closes #4481

Reviewed By: svcscm

Differential Revision: D2823456

Pulled By: mkonicek

fb-gh-sync-id: 349d17549f419b5bdc001d70b583423ade06bfe8
  • Loading branch information...
Huang Yu facebook-github-bot-7
Huang Yu authored and facebook-github-bot-7 committed Jan 21, 2016
1 parent dc96935 commit f453e14c8f91d00a8205e6bb06094c85281b38be
@@ -348,25 +348,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>
@@ -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}
@@ -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
*/
@@ -70,6 +70,7 @@
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";
@@ -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;
@@ -202,14 +204,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)
@@ -474,16 +496,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",

0 comments on commit f453e14

Please sign in to comment.
You can’t perform that action at this time.