<Text render={...}> content disappears when an ancestor has lineHeight set
Title: <Text render={...}> content disappears when an ancestor has lineHeight set
Description
When a <Text> uses the dynamic render prop, its content silently fails to appear in the output PDF if any ancestor (including the <Page> itself) has a lineHeight style set. This reproduces even when render returns a plain constant string (not depending on pageNumber/totalPages), and regardless of whether fixed or position: absolute is used.
This breaks the common "page X of Y" footer pattern (render={({ pageNumber, totalPages }) => ...} combined with fixed), which is a very common use case — we ran into this while adding page-number footers to a multi-page document that sets lineHeight on the page for readability.
Reproduction
import { Document, Page, Text, StyleSheet, renderToBuffer } from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: { padding: 34, lineHeight: 1.5 }, // <- remove this line and the bug disappears
footer: { textAlign: 'center' },
});
const doc = (
<Document>
<Page size="A4" style={styles.page}>
<Text>hello</Text>
<Text style={styles.footer} render={() => 'DYNAMIC'} />
</Page>
</Document>
);
const bytes = await renderToBuffer(doc);
// Extracting text from the resulting PDF only contains "hello".
// "DYNAMIC" never appears anywhere in the output bytes.Expected behavior
The PDF should contain both "hello" and "DYNAMIC".
Actual behavior
Only "hello" appears. The render-prop <Text> renders as empty — no error, no warning.
Additional notes
- Removing
lineHeightfrom the<Page>style fixes it. - Setting
lineHeighton an intermediate<View>ancestor (instead of<Page>) reproduces the same bug. - Setting
lineHeight: 1explicitly on the<Text>itself does not fix it — it's the ancestor's lineHeight that triggers the bug, regardless of what the Text's own resolved lineHeight ends up being. - Confirmed reproducible on both
v4.5.1and the latestv4.9.0(in the process,@react-pdf/layoutwent from4.6.1to5.2.0— the bug persists across that layout version bump too). - Also reproduces with
fixedset (both with and withoutposition: absolute), and with the value returned fromrenderdepending onpageNumber/totalPages— i.e. the real-world "page X of Y" footer case.
Environment
@react-pdf/renderer: 4.5.1 and 4.9.0 (both affected)@react-pdf/layout: 4.6.1 and 5.2.0 (both affected)- React: 19.2.8
- Node: v22.17.0
- OS: Windows (win32 x64)
Source: diegomura/react-pdf