Explicitly vertically center iOS text if IOSLineHeight is set

[tuckerconnelly]

This is another go at #7603

Made the lineHeight centering explicit by adding a new prop, IOSLineHeight, similar to a vendor prefix. Not thrilled about the name, but something like verticallyCenteredLineHeight felt off :P

Test plan:

Added another entry in the Text section of UIExplorer, and updated the screenshots.

[ghost]

By analyzing the blame information on this pull request, we identified @grabbou and @rigdern to be potential reviewers.

[satya164]

cc @javache

[satya164]

Why IOSLineHeight? Why not have something like verticalAlign: 'baseline' | 'middle'. Then center it if lineHeight is specified and verticalAlign is middle. (#1774)

Adding it as a variant of line height is confusing IMO. And it's not obvious what it does.

Not sure about making it default. Though I think this should be default, this is different than what's there on web, which can be confusing. Also as @bestander said, it breaks a lot of apps #7603 (comment)

To add, Android renders text at top by default I think, we need to fix that also.

cc @bestander @dmmiller

[dmmiller]

Agree with @satya164. LineHeight and alignment are two different things. Conflating them is wrong.

[tuckerconnelly]

Yeah I agree, and vertical-align is a good idea. Trying to get platform parity with web and android so I can share more code between the three.

Problem is vertical-align: baseline isn't the same as vertical-align: middle:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=baseline

Might stop pounding this and just maintain my own fork :P

[satya164]

@tuckerconnelly

Problem is vertical-align: baseline isn't the same as vertical-align: middle:

The default is bottom on iOS. middle is what you wanna add support for, if I understand correctly.

I think it's useful to have verticalAlign in the core. And we get closer to the web in terms of supported properties.

[tuckerconnelly]

@satya164 Gotcha 😄 still playing around with vertical-align to learn it's nuances, sorry if it's obvious 😃

Seems like vertical-align only applies to children within a parent.

What web seems to do is vertically center text of the parent when a large line-height is set, regardless of what vertical-align is set. iOS aligns it to the bottom, even when it's the parent.

https://jsfiddle.net/7ymp3j8b/

^ If that were run in iOS, the first three examples would be aligned to the bottom. Implementing vertical-align, as it is on web, wouldn't fix this issue. Hence, why I chose vendor prefix (or breaking change) 😛

[satya164]

@tuckerconnelly

If we're breaking lots of apps by changing the current RN behaviour, may be we just introduce the feature, and keep the current behaviour as default for now.

So, may be just add the values possible right now (how about 'top' | 'bottom' | 'middle' ?), and keep the default value as bottom? baseline is a little different from middle as it aligns the lowest hanging parts of the letters.

On the web we can apply this to any inline, inline-block or table-cells, but RN doesn't have these, and everything is flexbox. So we only have text to which we can apply this.

We shouldn't add an IOS prefix to this, coz we eventually want it on Android too. If we can't get the exact behaviour as on the web since we break lots of apps, I think we should compromise, and keep the current behaviour.

[devKrishnan]

I was able to set the text vertically middle aligned by setting the the below values to the style of the container view.

 flex: 1,
    flexDirection: 'row',
    alignItems:'center'

[tuckerconnelly]

Pretty sure that only works with a single line :)

[satya164]

There's a textAlignVertical prop supported on Android - http://facebook.github.io/react-native/docs/text.html