Requesting a simple way to vertically align text in a container

Right now I can’t figure out how to do this without manually setting dy. I’m using textAnchor="middle" to center the text horizontally, but I have to set y={HEIGHT / 2}, which vertically centers the top of the Text element. So then I have to manually figure out the height and set a dy value to textHeight / -2, so that the Text is vertically centered.

It would be nice if I could change the “origin” of the text to be in the center of the Text element. Or if there could just be a “vertical alignment” option. Or if I could just force a “line height” for the Text, so that I can be confident in the dy setting. Because right now I have to set two different dy values for iOS and Android, because they seem to render differently.

Thanks!

[ndbroadbent]

I’ve just figured out how to vertically center text, in a way that works on both iOS and Android. Apparently the magic number is: 0.25 * fontSize.

const fontSize = 64;
const width = 200;
const height = 200;

<Text
  fill="white"
  fontFamily="Helvetica"
  fontWeight="bold"
  fontSize={fontSize}
  textAnchor="middle"
  x={width / 2}
  y={(height / 2) - (fontSize / 2)}
  height={fontSize}
  dy={fontSize * -0.25}
>
  hello
</Text>

Here it is with a red fill + blue rect to show fontSize:

Android:

iOS:

I have to use both dy and y. If I just do y={(height / 2) - (fontSize / 1.75)}, then it works fine on Android, but looks like this on iOS:

Anyway, was just wondering if there is a nicer way to do this.

[sunilkumarc]

textAlignVertical: 'center' did the trick for me!