Nested break does not cause page to wrap

[alew140]

Describe the bug

    <Page wrap size="A4" style={styles.body}>
           <Text break>other page</Text>
     </Page> 

i have only a page ( Not break and generate other page is one page )

To Reproduce

import { Page, Font, Image, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
  body:{
    paddingTop: 100,
    paddingBottomm: 100,
    paddingLeft: 30,
    paddingRight: 30,
    fontSize: 10,
    fontFamily: 'Open Sans'
  },
    <Page wrap size="A4" style={styles.body}>
           <Text break>other page</Text>
     </Page> 

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [Windows]
• Browser [chrome]
  "@react-pdf/renderer": "^1.6.11",

[volkar1]

I had the same problem, seems like padding style on tag breaks page wrapping. Try nesting in and put in then remove all the styles from page and put in on ... Think of tag like a div tag.

Your code would look something like this:
<Page wrap size="A4"> <View style={styles.body}> <Text break>other page</Text> </View> </Page>

[alew140]

  <Document>
  <Page wrap size="A4"> 
  <View>
  <Text>page 1</Text> 
  <Text break>other page</Text> 
  </View> 
  </Page>
  </Document>

[alew140]

nothing

[alew140]

Downgrade to 1.6.10 and try...

[alew140]

IN VERION 1.6.10 NOT WORK show all my document

  <Document>
    <Page wrap size="A4" style={styles.body}>
      <Image fixed
        style={styles.pageBackground}
        src={watermark}
      />
    <View style={styles.container} >
    <Text style={styles.bol}>TECHNICIAN:</Text>
    <Text>{currentInvoice.TECHNICIAN}  </Text>  
    <Text style={styles.bol}>TIME & DATE:</Text>
    <Text>{moment(new Date(currentInvoice.orderDate)).format('dddd MMMM Do (h:mm a)')}  </Text>
    <Text style={styles.bol}>LANGUAGE:</Text>
    <Text>{currentInvoice.LANGUAGE}  </Text>
    </View>
    <View style={styles.container} >
    <Text style={styles.bol}>HOMEOWNER NAME:</Text>
    <Text>{currentInvoice.HOMEOWNER}  </Text>  
    </View>
    <View style={styles.container} >
    <Text style={styles.bol}>ADDRESS:</Text>
    <Text>{currentInvoice.ADDRESS}  </Text>  
    </View>
    <View style={styles.container} >
    <Text style={styles.bol}>PHONE NUMBER:</Text>
    <Text>{currentInvoice.PHONE}     </Text>  
    <Text style={styles.bol}>EMAIL:</Text>
    <Text>{currentInvoice.EMAIL}</Text>  
    </View>
    {
      // Divisor in line
    }
    <View style={styles.divisor}></View>
    <View style={styles.container} >
    <Text style={styles.bol}>SERVICE OR REPAIR REQUESTED:</Text>
    <Text>{currentInvoice.SERVICE}     </Text>  
    </View>
    <View style={styles.container} >
    <Text style={styles.bol}>ROOF SIZE:</Text>
    <Text>{currentInvoice.ROOFSIZE}     </Text>  
    <Text style={styles.bol}>ROOF TYPE:</Text>
    <Text>{currentInvoice.ROOFTYPE}     </Text>  
    <Text style={styles.bol}>PROPERTY TYPE:</Text>
    <Text>{currentInvoice.PROPERTYTYPE}     </Text>  
    </View>
    {
    //margen 
    }
    <View style={{marginBottom:7}}></View>
    
    <View style={[styles.container , styles.borded]}>
    <Text style={[styles.bol ,  styles.box]}>  PROPOSAL: </Text>
    <Text > {currentInvoice.PROPOSALTITLE}     </Text>  
    </View>
    <View style={styles.borded}>
    <Text style={{padding: 4}} > {currentInvoice.PROPOSALCONTENT}   Lorem Ipsum n is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </Text>  
    </View>
    <View style={[styles.container , styles.borded]}>
    <Text style={ [styles.bol , styles.box2 ] }>  COMPLETION TIME: </Text>
    <Text> {currentInvoice.COMPLETION}     </Text>  
    </View>
    {
      // Page Break an concract 
    }
      <Text break style={styles.bol} >
      other page</Text>
    </Page>
</Document>

const styles = StyleSheet.create({
  bol:{
    fontWeight: 600,
    fontSize:10,
  },
  container:{
    flexDirection: 'row',
  },
  borded:{
    borderColor: 'green',
    borderWidth: 1,
    marginTop: -2
  },
  box:{
    paddingLeft: 2,
    borderColor: 'green',
    borderRight: 1,
    width:65,
    marginRight: 3
  },
  box2:{
    paddingLeft: 2,
    borderColor: 'green',
    borderRight: 1,
    width:105,
    marginRight: 3
  },
  body:{
    paddingTop: 100,
    paddingBottomm: 100,
    paddingLeft: 30,
    paddingRight: 30,
    fontSize: 10,
    fontFamily: 'Open Sans'
  },
  divisor: {
    marginTop: '7px',
    marginBottom: '7px',
    backgroundColor: 'green',
    width: '90%',
    height: '2px'
  }
})

[alew140]

NOT WORK

[alew140]

please @diegomura help what happened here ?

[dmytro-shchurov]

For me page breaking also does not work even with no break attribute. I use pdf(document).toBlob() and lot of paddings/margins (because it not possible to create a rich view without them)

UPD. After some experiments I've found out that style.padding: '20px 50px' appears working visually, but causes the problem with a page break. Changing this to paddingTop: 50, ... solves the problem for me.

[rnacken]

@dmytro-shchurov I think that is because 'px' is not a valid unit for measurement in PDF. When you use paddingTop: 50 it actually falls back to 'pt' (not pixels), which is why it works. I imagine style.padding: '20pt 50pt would actually work - can you verify?

Btw, this goes for @alew140 too, there are 'px' values in the divisor

[diegomura]

px is not a valid unit indeed.

Copying what I addressed in #1163:

break does not have to be strictly in a parent view, but the parent view should be a component that wraps between at least 2 pages to work. The example you provided does not work on either v1 or v2. Page wrapping is a recursive process, and how it works for this case it first goes to the first (parent) view which does not break and fits in the page. So it stops there.

Also, 2.0 version probably fixes the snippets you shared above. Please try it and let me know!

[duyank]

@diegomura
in the first release of v2. This issue has been fixed.
But when I tried it recently, it happened again

Example: https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e619da74e5400a86146c00c9230580231500f4e3250e1d401a920c01ddd46ad3b74c0046009c30f00d6d80379473083005f039c02407b113a6cac004ccaaa6c1c86cada7aee9411c6eecabc02eaca740cccacec0400dc64640062e0500074967c48d018e678761c00663c8c480036009e005c3000e400f210ba3c4d00269d00341c10e6c01d9d00165050000e106d4a4ab58510457cd03c5048c045a08c4a104a207d03834a006ef200cc4a009a00faa200d29a006c20001c00ea206ba9800aa833ba319e000d00270f0008270a2bcd6a9d320b9b2b9001295980502e0d0f2251620d2a782a22150e82c1298818a00000

[mario-jerkovic]

@diegomura can confirm that on version @react-pdf/renderer@2.1.1 nested break is not working

[OliverLeighC]

Any update on nested page breaks? I am on version 3.1 and still having this problem, here is a minimal example

const NestedPageBreaks = () => (
  <Document>
    <Page wrap>
      <Text>Hi</Text>
      <Text break>This will break properly</Text>
      <View>
      	<Text>Hello again on page 2</Text>
        <Text break>This will not break properly</Text>
      </View>
      <View>
      	<Text break>neither will this</Text>
      </View>
    </Page>
  </Document>
);

ReactPDF.render(<NestedPageBreaks />);

and a repl link https://react-pdf.org/repl?code=3187b0760ce02e00407205368202600502181cc102101382180d610c02f0c00500941407cd405030c00f002223002b80b608c147a2d5bb4c38600777c1800388b162d801504003d8400900966c03d1acd8a97b23b0011a112f45400b1d64a4e80362e615a2c461cfc20e423e0b802781b989929b001a8e8214845880242a86b6821b880c36060e980c380fb6020c0013186a42647987b5b12d8393abbb980825ad4f9f805068618568a47e8c5c657b10fc7f524a668d57bd220e941da074934c22e3b97184eb0198c24184820981972f0090888d0037131300129130141a070018801d21180a20551b22321d04502178c8fa7a35c800

[SimeonDominiq]

Thank you @OliverLeighC .
This saved the day for me. The nesting of the Tags does have effect on the page break.
A in another would not break to the next page. e.g.
<View break style={styles.body}> Page 1 <View break>This will not break - Page 2</View> </View>

I had to make the View independent like this, according to your comment and it worked.
<Document> <Page wrap size={{ width: 1300 }}> <View break style={styles.body}> Page 1 got here </View> <View break>Page 2 got here</View> </Page> </Document>

Thank you.