[Android] Style with alignText property "right" error

[mrKlar]

When using a style property of textAlign: "right", I get the following error on Android. It is working in iOS.

[ide]

cc @mkonicek I can repro this with center alignment too.

[kmagiera]

This is for TextInput right? According to the docs textAlign is android only http://facebook.github.io/react-native/docs/textinput.html#content (there is a typo in platform annotation)
Allowed values are: 'start', 'center', 'end'
So the error you're getting is not a good description of the actual problem but you essentially are providing invalid value for that property (flow should be able to catch this earlier as prop type is annotated)

[ide]

@kmagiera I encountered this error in a Text component where textAlign works on iOS. The problem is that when you write <Text style={{textAlign: 'center'}}>, "center" is not converted to an enum before sending it to Java.

[kmagiera]

there is discrepancy in the way we handle this for Text and InputText. For Text we just use strings on android so there is no need for the value to be converted. For InputText we use enum and we send number over the bridge. Redbox here is caused by native code trying to read number while string is provided. Are you also getting a redbox because of that with Text component, if so can you send a stacktrace?

[ide]

@kmagiera oh you're right. this was a TextInput component (textAlign: center does work on iOS though).

[sowdri]

Is there any workaround for this?

[kmagiera]

Just use allowed values: 'center', 'start' or 'end'
see http://facebook.github.io/react-native/docs/textinput.html#content

[mrKlar]

Hi still get an error, here are my dependencies

"dependencies": {
"react-native": "^0.11.4",
"react-native-custom-actsheet": "0.0.4",
"react-native-popover": "^0.2.0",
"react-native-responsive-image": "^1.0.0",
"numeral": "^1.5.3",
"react-native-i18n-complete":"^0.1.2"
}

[mrKlar]

I got it to work... BUT, my error is that I was trying to use the property in the CSS. It does not work there, you must use it as an attribute of TextInput directly. Home it is going to work in CSS someday.

[theoriginalgri]

Interestingly this also affects iOS somehow.

My code is:

  render() {
    var textAlign = Platform.OS == 'ios' ? 'right' : 'end';
    return (
        <TextInput textAlign={textAlign} ref='input' />
    );
  }

This works well (but feels wrong) on both platforms but iOS presents a warning:

2015-12-09 12:52:27.062 [warn][tid:com.facebook.React.JavaScript] 'Warning: Failed propType: Invalid prop `textAlign` of value `right` supplied to `TextInput`, expected one of ["start","center","end"]. Check the render method of `TestComponent`.'

If the value is changed to 'end' for iOS, too, RN 0.16.0 throws an exception:

Invalid NSTextAlignment 'end'. should be one of: (auto, center, justify, left, right)

[kmagiera]

@theoriginalgri this issue should be solved by #4481

On iOS at the moment you should st textAlign as a pat of style property

[kmagiera]

And the end goal is to unify that for android too, so after #4481 is merged we should only use textAlign as a part of style map as opposed to passing it as a component property directly