4

React Native is having trouble calculating the correct height of the Text component based on its content.

Only three lines are visible on the left-side screenshot even though there is a fourth line with some text (if your look closely you can see the top pixels of some of the tall letters). In the screenshot on the right the height is calculated correctly, even though I've only added the last word, "amet", to the text.

enter image description here

This might be related to a previous issue I've had with custom fonts: React Native: Custom font renders differently on Android and iOS. However, the same bug happens on Android too where the fourth line is missing:

enter image description here

Community
  • 1
  • 1
henkimon
  • 1,433
  • 2
  • 15
  • 27
  • I'm currently seeing the same problem, last line of text is cut off for some reason. How did you manage to solve it? – Georg Kitz Jun 09 '20 at 13:33

1 Answers1

2

I encountered the same problem when using a custom font (Lato-Regular in my case) on RN 0.59. Based on this SO answer, I thought that there may be something funky with the TTF file I was using for the custom font. I originally downloaded my TTF file from Google Fonts. I found the "official" font source (Lato docs for me) and used their TTF file. I popped it into my project and the Text component was now able to calculate its height correctly.

user2312371
  • 63
  • 6