React-pdf: Page wrap ( NOT WORKING )

[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 ?