Rendered Text component content disappears when using inline styles with lineHeight

[mbunge]

trafficstars

Describe the bug I create a Text element and add a render function to display page and total page. Then I add custom styling like fontSize, FontFamily and so on. When I add lineHeight with any numeric value, the text disappears.

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

1. Go to code snippet (react pdf REPL)
2. text under A: is displayed, the text under B: is not displayed

Code snippet:

const styles = StyleSheet.create({
  page: { padding: 60 },
  box: { width: '100%', marginBottom: 30, borderRadius: 5 },
  pageNumbers: {
    position: 'absolute',
    bottom: 20,
    left: 0,
    right: 0,
    textAlign: 'center'
  },
});

const doc = (
  <Document>
    <Page style={styles.page} size="A4" wrap>
      <Text>A: Text with lineHeight and without rendering function:</Text>
      <Text style={{lineHeight:1}}>1 / 1</Text>
      <Text>B: Text with lineHeight and with rendering function</Text>
      <Text style={{lineHeight:1}} render={({ pageNumber, totalPages }) => (
        `${pageNumber} / ${totalPages}`
      )} />
    </Page>
  </Document>
);

ReactPDF.render(doc);

Expected behavior The text with render function under B: appear.

Desktop (please complete the following information):

• OS: MacOS 15.2
• Browser chrome
• @react-pdf/render v4.1.6
• @react-pdf/layout v4.2.0

[leorbs]

Thank you for identifying the issue! We struggled to find the element that caused this.

[tom2strobl]

I have a breadcrumb: We just upgraded from @react-pdf/[email protected] to @react-pdf/[email protected] and now suffer from the bug which didn't exist in 4.0.0 so it likely must be a regression from a change in between. Maybe that helps 🤞🏻