17

In the picture below I have inspected the same Text-component as rendered on Android on the left and iOS on the right. It seems that iOS renders the font in top of the Text-container.

I'm using the same TTF font-file for both Android and iOS. (I found an online reference to the font I'm using here.)

Any ideas how to make the font render the same for both Android and iOS?

enter image description here

Just to be clear, the difference is not caused by any styling (margin, font size, etc.). It's exactly the same.

henkimon
  • 1,433
  • 2
  • 15
  • 27

2 Answers2

8

I found a fix but it doesn't feel right. I think you should find another font that renders the same on each device.

You can play around with the lineHeight, padding and margin to get the same vertical alignment for your text components :

Ios: 

instructions: {
    fontFamily: 'Metric-Regular',
    fontSize: 50,
    lineHeight: 50,
    paddingTop: 25,
    marginBottom: -35,
    marginTop: 35
  }

enter image description here

AlexB
  • 3,518
  • 4
  • 29
  • 46
  • 1
    Thanks, this really helped me to find a solution!! Because I need to support multiline Texts I can't set height, like you did. However, it seems to work when I add a padding at the top and a negative margin at the bottom of the Text component, both values relative to the font size. – henkimon Jan 12 '17 at 08:57
  • @henkimon Thanks, I'm glad I helped. As you can see, I improved my answer based on your comment. If you could accept it, that would mean the world to me. – AlexB Jan 14 '17 at 19:10
8

Problem is with lineGap and ascender .ttf font file parameters. Fix them using ftxdumperfuser tool. Check https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d

Arkadiusz Konior
  • 1,139
  • 13
  • 12