React-native: [Text] Add support for vertical-align style property

[fatuhoku]

I've marked the line rectangle with faint red:

The text is sitting on the bottom of that rectangle. i.e. it's anchored to the bottom.

I was expecting the line spacing to be below the text, i.e. text should be anchored to the top of the line rectangle.

When will support of this come?

[MossP]

Not a perfect solution and I'm not sure if it's going to be implemented but could you not offset the <Text/> element inside a view and negative margin that to compensate for the difference? You would need to add overflow:'hidden' to the outer element too if you cannot have any invisible overlapping elements.

e.g. https://rnplay.org/apps/MKdiOw

[fatuhoku]

@MossP Hmmm!! That's good thinking. It's a possible solution for sure, and seems watertight. I'll give that a try soon...

[MossP]

Hope it goes well :)

I'll get this closed for now and if you're still having problems give me a shout and we'll look at re-opening it.

One to close for now @brentvatne, thanks.

[brentvatne]

This seems like a reasonable request - support for vertical-align, or at least some subset of it, would be a valuable addition to the core. cc @vjeux

[coyer]

I have this problem too. on IOS, text is bottom align and on Android, text at the top position of rect. how do I ?

[guyca]

Aligning text is pretty annoying right now and requires way too much work. Is the only way to align text today is to wrap the element inside some container and align the whole View inside the wrapping container ?

[cpjolicoeur]

Doesn't flexbox already handle this via flexDirection and alignItems combo?

[aboutqx]

@cpjolicoeur it seems not working.

[fatuhoku]

@cpjolicoeur flexDirection and alignItems might be a good hack for single line Text elements, but vertical-align is necessary when you're working with multiline Text elements.

[aboutqx]

@fatuhoku That's is right,when you want 2 or more lines to be in vectical center,you need to add a container to wrapp them.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/text-add-support-for-vertical-align-style-property

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[ghost]

this feature is now available or not ?

[AdriaRios]

Any updates?

[Athaphian]

No it is not available. Even in late 2017 creating a simple superscript in React Native seems an impossible task.