How can I force no wrap after a heading <Text> component?

[Skarema]

Hi everyone!
I'm dynamically rendering larger text files from a markdown source.
How can I force no wrap after a heading component?

[fstandhartinger]

If "no wrap after a heading" means never leave a heading alone at the bottom of a page, react-pdf has a prop built for that: minPresenceAhead. Put it on the heading <Text>. If less than that many points of the following content would still fit on the current page, the heading moves to the next page together with that content:

const styles = StyleSheet.create({
  // put the spacing ABOVE blocks, not below them (explained further down)
  heading:   { fontSize: 16, fontWeight: 'bold', marginTop: 18 },
  paragraph: { marginTop: 6, lineHeight: 1.4 },
});

// in your markdown -> react-pdf mapper
case 'heading':
  return <Text style={styles.heading} minPresenceAhead={60}>{node.text}</Text>;
case 'paragraph':
  return <Text style={styles.paragraph}>{node.text}</Text>;

Choose the value so that it covers about two lines of your body text. The heading and the content after it should be siblings, i.e. children of the same parent, which a flat markdown-to-elements mapping gives you anyway.

One trap I ran into while testing this. With the spacing written as marginBottom (heading: { marginBottom: 6 }, paragraph: { marginBottom: 6 }), a heading was still left alone at the bottom of a page in 1 of my 40 layouts. The reason is in shouldBreak.ts: every element counts its own marginBottom as space that has to fit on the page. In that one layout the paragraph after the heading fit, but its 6pt bottom margin ended 0.9pt past the page bottom. The heading had already passed its check and stayed where it was, while the paragraph was moved to the next page. With the same spacing written as marginTop, it happened 0 out of 40 times.

The other common suggestion, and why I would not use it for markdown. You can wrap the heading and the first block in <View wrap={false}>, which also gave 0/40 orphans in my test. However, when that block is taller than a page (a long paragraph, a big table or a code block), react-pdf only logs Node of type VIEW can't wrap between pages and it's bigger than available page height and cuts the content off. With a paragraph three pages long, 25 of 120 sentences ended up in the PDF, and the other 95 were silently lost. With minPresenceAhead the same paragraph broke across pages normally, and all 120 sentences were there. Only use wrap={false} if you know the block after the heading is short.

How I tested it: a markdown-like document with 12 sections (a heading, then three paragraphs of different lengths), with 0–39 lead-in lines before it so that the headings fall at every possible position on the page. That gives 40 layouts per variant. I counted pages whose last line was a heading using pdftotext, and I also looked at the rendered pages.

variant	orphaned headings
nothing	33 / 40 layouts
minPresenceAhead={60}, spacing via marginBottom	1 / 40
minPresenceAhead={60}, spacing via marginTop	0 / 40
<View wrap={false}> around heading + first block	0 / 40, but clips anything taller than a page

---

Environment: @react-pdf/renderer 4.9.0 (@react-pdf/layout 5.2.0), React 19.3, Node 26, checked with poppler's pdftotext/pdftoppm. Disclosure: I work on a hosted HTML-to-PDF API. Nothing above uses it or needs it, and I have linked nothing of mine. Drafted with AI assistance; every number here comes from runs on my machine.