Question/Feature Request: Force (wrapped) Elements near fixed footer / end of the page to render on new page

[natterstefan]

Is your feature request related to a problem? Please describe.

Problem: We render sections with dynamic content (such as HTML converted into React components) with a static title (<Text /> component) near a fixed footer. These sections look similar to this

<View style={styles.spaceBottomXl} wrap={false}>
    <Text
      style={[
        styles.fontBold,
        { textDecoration: 'underline', textTransform: 'uppercase' },
      ]}
    >
      {title}
    </Text>
    <View>{children}</View>
</View>

This results in a situation where the content is squashed at the end of the page instead of breaking onto the next page. This is related to wrap=false. We currently use wrap=false but that squashes the content and we get errors like:

“Node of type VIEW can’t wrap between pages and it’s bigger than available page height.”

The Problem: How can we keep the content together while at the same time do not leave the title alone on page 1 while the rest of the content breaks/wraps onto page 2 when the content is too long?

This issue makes the rendered document visually inconsistent and difficult to follow.

Describe the solution you’d like

A mechanism to ensure that elements near a fixed footer are forced to render on a new page, keeping them together even with wrap=false or a way to force elements to break to a new page if they are near the footer or a certain threshold of the page.

The expected behavior would be:

• If an element is positioned close to the fixed footer and doesn’t fit, it should automatically move to the next page.
• define that if an element is near the bottom of a page (threshold) it can be forced to render on the next page (independent of wrap value)
• Ensure that both static headers and dynamic content remain visually cohesive.
• Prevent errors related to wrapping constraints.

Describe alternatives you’ve considered 1. Manually adjusting margins and padding – This is inefficient, as the content is dynamic and unpredictable. 2. Using wrap=false – This leads to situations where content is forcefully squashed into one page, triggering errors. 3. Custom logic to detect height overflow – This would require extra development effort and might not be foolproof.

Additional context

• The dynamic content comes from external sources, meaning we do not have direct control over its structure or length.
• The issue occurs primarily when rendering paginated views with fixed headers/footers (I guess).

Maybe related content

• https://github.com/diegomura/react-pdf/issues/979
• https://github.com/diegomura/react-pdf/issues/1360

[EvHaus]

Spent some time on investigating this problem today as I'm also running into it. It seems as if the logic for "when content should break to a new page" completely disregards any fixed elements on the page. Here's a minimal REPL to illustrate the problem.

You can see that by default there is only 1 paragraph on text on the next page:

As I increase the height of the fixed footer, I would expect more and more text to wrap to the next page, but it's always exactly the same amount of text that gets sent to the next page and instead react-pdf simply squishes the content of the first page instead.

Temporary hacky solution

For now, since my usecase is to have fixed headers and footers on my pages, looks like adding padding to the <Page> component can trick react-pdf into properly handling the page wrapping. This only works if your fixed elements always have a fixed height (which in my case they do).