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

• Add callback to text (and possibly other components) to give the coordinates it is being drawn at #979
• Missing layoutData in onRender method of <Document/> #1360