[Text] textalign should implement 'justify' css property

[sanketr]

"justify" property seems to be crucial in order to implement nice text alignment we know so well from newspapers and magazines (and latex). Right now, it doesn't seem to be implemented. If it is a simple implementation, I could try to take a stab at it, if someone shows me how it is implemented for other values.

[wesleycho]

Couldn't you use the flexbox styling?

[sanketr]

Nope, it seems only supported styling as documented in the api here can be used:
https://facebook.github.io/react-native/docs/style.html#content

Please correct me with a working example if I am wrong. Ability to apply flexbox styling will be big relief! I know it can be applied to reactjs vanilla library. Native ios version seems to be different beast.

[wesleycho]

http://facebook.github.io/react-native/docs/flexbox.html#content

[sanketr]

Oh, it is the same one I am trying. The hitch is that "justify" property is not available for textAlign - so, I can't get newspaper like layout. A sample code below:

var styleTest = StyleSheet.create({

 title: {
   fontSize : 20,
   color : 'rgb(0,0,255)',
   textAlign: "justify"
  }
});

Here is an example of how it looks like in css: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-align_all

[sanketr]

I did some more research about justified text alignment. It seems that on the web, text alignment isn't done as well as desktop publishing tools like latex because of lack of hypenations. So, something like hypenator.js might be of interest. CSS3 now includes hypens property.

[brentvatne]

@vjeux - any particular reason for not including justify? If not, we can tag this as a good first task

[vjeux]

We had justify and then realized Android doesn't support justify so we removed it.

Probably worth adding it back and figure out something on android side, pretty crazy that it is not supported

[ide]

+1 to shipping it on iOS. Seems ok for Android to fall back to left or center alignment since the app is still usable, sort of like how older browsers just drop rules they don't understand on the web until one day the property is supported.

[vjeux]

Agreed. Pull request welcome

[jim-lake]

textAlign: 'justify', brings up the "Error while updating property 'textAlign' of a view managed by: RCTText. on Android. Would be nice if it just did left or center or anything but crashing.

[satya164]

@jim-lake Can you open a new issue for this?

[L3V147H4N]

👍

[L3V147H4N]

new issue for this #5408

[NishantDesai1306]

Do we have any alternative for text-align-last CSS property ? to align the contents of last line in a Text component ?
Here's an example of this property

1. Without text-align-last property
   
2. With text-align-last property set to 'center'
   

[ammichael]

Guys, why is not implemented in Android anyway? I just hit that issue, and makes no sense for me

[vjeux]

@ammichael it is because Android itself doesn't support it, which is pretty crazy if you ask me. If we are really motivated we could probably hack around android itself to make it support it but this hasn't been high in the priority list. Hopefully they'll implement it at some point in the future and we can just use it in react native

[ammichael]

@vjeux 'Android itself doesn't support it'. Not sure if I should laugh or curse about it. For curiosity sake.. why not?

What's the alternative to get the same 'effect'?

[vjeux]

@ammichael your guess is as good as mine: http://stackoverflow.com/a/1293541

People are using webviews to achieve that but this is insane and likely not performant at all. I'm not sure of any good workaround I'm afraid :(

[vjeux]

Actually, there's now a 3rd party library for it: https://github.com/bluejamesbond/TextJustify-Android would be great to do bindings for it so it can be used inside of React Native :)

[ammichael]

Yeah, I found the same alternative, and I'll use the same word as you did to describe it: insane.
Makes no sense at all to me.

That lib seems to do the work, and seems more reasonable than to create a web view, and I would love to know how to create the bindings, but I don't :(

[vjeux]

https://facebook.github.io/react-native/docs/native-components-android.html

[ammichael]

Feels almost like a joke all that is needed just because 'text align justify'.

I'll give it a try later, then

[vjeux]

cc @lacker

[afilp]

@vjeux @lacker Any plans to incorporate "TextJustify-Android" native library to React Native? Or at least have a "react-native" related package, so that we can use it directly? Thanks for any feedback!

[alpfilho]

I need 'justify' option too

[jkomyno]

It seems that textView.setJustify(true); will be ready in Android O.
https://developer.android.com/reference/android/widget/TextView.html#setJustify(boolean)