lineHeight on Page silently breaks render prop on Text elements

[andelkocvjetkovic]

Description

Setting lineHeight on a <Page> element causes the render prop on descendant <Text> elements to produce no visible output. There is no error or warning — the render callback is simply ignored silently.

This makes the bug extremely difficult to diagnose, as the render prop works correctly when lineHeight is not set on the Page.

Reproduction

Minimal working example (render prop works):

import { Document, Page, Text, pdf } from '@react-pdf/renderer';

const WorkingDoc = () => (
  <Document>
    <Page size="A4" style={{ padding: 30, fontFamily: 'Helvetica', fontSize: 9 }}>
      <Text style={{ fontSize: 14 }}>Static content</Text>
      <Text
        style={{ position: 'absolute', bottom: 14, left: 36, right: 36, minHeight: 20, fontSize: 8 }}
        render={({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`}
        fixed
      />
    </Page>
  </Document>
);

// ✅ Footer shows "Page 1 of 1"
const blob = await pdf(<WorkingDoc />).toBlob();

Broken example (only change: added lineHeight: 1.4 to Page):

import { Document, Page, Text, pdf } from '@react-pdf/renderer';

const BrokenDoc = () => (
  <Document>
    <Page size="A4" style={{ padding: 30, fontFamily: 'Helvetica', fontSize: 9, lineHeight: 1.4 }}>
      <Text style={{ fontSize: 14 }}>Static content</Text>
      <Text
        style={{ position: 'absolute', bottom: 14, left: 36, right: 36, minHeight: 20, fontSize: 8 }}
        render={({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`}
        fixed
      />
    </Page>
  </Document>
);

// ❌ Footer is empty — render prop produces no output
const blob = await pdf(<BrokenDoc />).toBlob();

Expected behavior

lineHeight on Page should not affect the render prop on Text elements. The render callback should still produce visible text.

Actual behavior

When lineHeight is set on the Page style, any Text element using the render prop produces no visible output. Static Text children (e.g. <Text>Hello</Text>) still work correctly.

Workaround

Remove lineHeight from the Page style and apply it directly to individual Text elements that need it (e.g. fieldValue, paragraph styles).

Environment

• @react-pdf/renderer: 4.5.1
• Node.js: v22
• Browser: Chrome (using pdf().toBlob())
• OS: macOS

[paulintrognon]

Had same issue today, had to add lineHeight: 0 to my <Text render={/*...*/} /> element. Took a long time to diagnose indeed 😆