Text not fully rendered on iOS

[soutua]

Description

We noticed an issue on our app that is using a lot of text (news articles), where in some specific cases the text is not fully rendered on iOS, after we moved into using the new architecture in our last release. I'm not sure what are all the factors that are needed for the issue to occur, but I was able to make a reproducer with some experimenting.

Steps to reproduce

Reproducer Snack can be found on: https://snack.expo.dev/@pekka.soutua/text-cut-off-on-ios
Note that it's important to use the iPhone 16 Pro emulator, since the issue seems to be dependant on e.g. screen dimensions. I also tested that the issue reproduces on the issue reproducer template with the latest React Native version: https://github.com/soutua/react-native-new-architecture-text-rendering-issue

Scroll down the text until you see a paragraph with text "Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit. This sentence is cut off.".

The sentence in the end "This sentence is cut off.", is not being fully rendered, the rest of it should be rendered on the next line but it isn't.

React Native Version

0.81.0

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

Reproducible e.g. on the snack.expo.dev environment or on the issue reproducer template.

Stacktrace or Logs

-

MANDATORY Reproducer

https://snack.expo.dev/@pekka.soutua/text-cut-off-on-ios

Screenshots and Videos

[emirdeliz]

Same here! But I noticed this occurs after opening the app for the second time.

[johankasperi]

We are seeing the same issue in our app (also when showing news articles)

[johankasperi]

Can it be an issue with using lineHeight? Because when setting it to undefined in your repro https://github.com/soutua/react-native-new-architecture-text-rendering-issue/blob/b57f531407db0cc7380287294bdda626d81180b7/ReproducerApp/App.tsx#L319 I'm not seeing the bug. But when setting it to something else, texts is not fully rendered in one or several of the paragraphs.

[soutua]

Can it be an issue with using lineHeight?

Yes I think it is a factor in this, I was not able to reproduce the issue either if I did not set the lineHeight.

Also other interesting observation during my reproduction experiments was that it's not about any single text paragraph in itself, but all the content in the screen can affect the reproduction of the issue. For example if you remove some of the text in my reproducer, the issue might go away.

[johankasperi]

I think the issue is caused by these lines somehow. By removing paragraphystyles.minimumLineHeight all text is rendered. But they have the wrong lineheight.

[johankasperi]

Doing something like this also seems to solve it in your repro and it produces the correct lineheight

    paragraphStyle.minimumLineHeight = lineHeight - 0.01;
    paragraphStyle.maximumLineHeight = lineHeight + 0.01;

but not sure if it solves it in all cases, for example is the 0.01 value arbitrary

[johankasperi]

This code also fixes it

    paragraphStyle.lineHeightMultiple = round((lineHeight / font.lineHeight) * 10000.0) / 10000.0;

But this also feels unsafe. It doesn't work when I'm not rounding it

[johankasperi]

Ended up doing this hack in my app. Probably just a workaround and not a real solution to the problem

    paragraphStyle.maximumLineHeight = lineHeight * 1.01;
    paragraphStyle.minimumLineHeight = lineHeight * 0.99;
    paragraphStyle.lineHeightMultiple = lineHeight / font.lineHeight;

[pierroo]

I am also facing the issue, not sure if it's exactly the same, but just in case:
#53666

it's on android though.
It happened only after updating to 0.81.x

do you guys face this issue on 0.80.x?