React-native: [Style][iOS]The style lineHeight behaves not exactly same as CSS

[cxfeng1-zz]

I write a Text component whose style is：

text: {
    height: 60,
    fontSize: 12,
    width:50,
    padding:5,
    color: 'rgb(238, 238, 238)',
    fontFamily: 'Helvetica Neue',
    lineHeight: 50,
    backgroundColor: 'rgb(190, 173, 146)'
  },

It appears like this in iOS device :

But in Web, it is supposed to be like :

The text should be vertically centered.

Is there any way to fix this ? Some FE is used to use lineHeight=height to make the text vertically centered.

[cxfeng1-zz]

In addition, the text height measured in RCTMeasure is also not exactly same as H5， about 1.5px smaller than H5's text height

[ide]

What is "H5"? Do you mean an h5 element?

[cxfeng1-zz]

@ide H5 = HTML5 = Web, I used same CSS style in Web, but it behaves differently.

[ide]

OK. The centering behavior should probably be the same but I'm not sure about the text height. There are some things that iOS and Android and browsers all do differently and font rendering is one of them.

[timzaak]

I wrote a demo in https://rnplay.org/apps/mJMANg.
and the lineHeight has no effect on Android.
maybe. I should use marginTop/marginBottom instead of lineHeight.

[iplus26]

Does this issue have a good solution?
I have the same problem and it cause a lot problems when typesetting.

[john916zhang]

Same problem here. I set lineHeight to 40, but the real line height is 40.975.

[xueduany]

Sure, I found this problem when I use line-height attribute ,hope that the text is is vertical align in the box,
but it is not.