Page break controlled

[jochercoles]

Dear, I need to make a page break, according to a certain condition, that is, when a point on the page arrives. On the other hand, how do I define a header / footer, which is repeated if or if on each page?

   <Document title="Reporte Liquidacion" >
      {
          liquidacionProveedorChoferes.map((choferes, keyChofer) => 

            <Page id={keyChofer} size="A4" orientation="landscape" style={tableStyles.page} wrap >
                <View style={tableStyles.header} >
                    <View style={tableStyles.leftColumn}>
                        <Image src={logo} style={{border: 1}} />
                    </View>
                    <View style={tableStyles.rightColumn}>
                        <View>
                          <View style={tableStyles.tableRow}>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Código proveedor:</Text></View>
                            <View style={{borderBottomColor: '#000', borderWidth: 1, borderLeftWidth: 0, borderTopWidth: 0, width:"40%", textAlign: "center"}}><Text style={tableStyles.tableCell}>{this.props.proveedor}</Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Fecha desde:</Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>{this.props.fechaDesde.toLocaleDateString("es-US")}</Text></View>
                          </View>
                          <View style={tableStyles.tableRow}>
                            <View style={{borderBottomColor: '#000', borderWidth: 1, borderLeftWidth: 0, borderTopWidth: 0, width:"60%", textAlign: "center"}}><Text style={tableStyles.tableCell}></Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Fecha hasta:</Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>{this.props.fechaHasta.toLocaleDateString("es-US")}</Text></View>
                          </View>
                          <View style={tableStyles.tableRow}>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Chofer:</Text></View>
                            <View style={{borderBottomColor: '#000', borderWidth: 1, borderLeftWidth: 0, borderTopWidth: 0, width:"40%", textAlign: "center"}}><Text style={tableStyles.tableCell}>{choferes.nombreChofer}</Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Página: </Text></View>
                            <View style={tableStyles.tableColHeader}>
                              <Text style={tableStyles.tableCell} 
                                render={({ pageNumber, totalPages }) => (`${pageNumber} / ${totalPages}` )} fixed>
                              </Text>
                            </View>
                          </View>
                        </View>
                    </View>
                </View>
                <View style={tableStyles.table} >
                    <View style={tableStyles.tableRow} > 
                        <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Fecha</Text></View>
                        <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Suma Base</Text></View>
                        <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>KMs</Text></View>
                        <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>$ KMs</Text></View>
                        <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Total</Text></View>
                    </View>
                    {
                        choferes.liquidacionChoferes.map((registro, key) => 
                        <>
                          <View style={tableStyles.tableRow} key={key} >
                            <View style={tableStyles.tableRow} >
                              <View style={tableStyles.tableColHeader} > 
                                <Text style={tableStyles.tableCell}>{registro.fecha.substring(0,10)}</Text>
                              </View>
                              <View style={tableStyles.tableColHeader} >
                                <Text style={tableStyles.tableCell}>{registro.sumaBase.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</Text>
                              </View>
                              <View style={tableStyles.tableColHeader} >
                                <Text style={tableStyles.tableCell}>{registro.kilometros}</Text>
                              </View>
                              <View style={tableStyles.tableColHeader} >
                                <Text style={tableStyles.tableCell}>{registro.importeKilometros.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</Text>
                              </View>
                              <View style={tableStyles.tableColHeader} > 
                                <Text style={tableStyles.tableCell}>{registro.total.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</Text>
                              </View>
                            </View>
                          </View>
                          {
                            registro.adicionalesLiquidacion.length > 0 ?
                            <View style={{width: '100%', margin: "auto", flexDirection: "row", marginLeft: "20%"}} key={key+"1"} >
                              <AdicionalesLiquidacion adicionalesLiquidacion={registro.adicionalesLiquidacion} />
                            </View> : <></>
                          }
                        </>
                      )
                    }
                    {
                      choferes.liquidacionChoferes.reduce(totalGeneral, 0) > 0 ?
                        <View style={tableStyles.tableRow}> 
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>TOTAL</Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>{choferes.liquidacionChoferes.reduce(totalBase, 0).toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>{choferes.liquidacionChoferes.reduce(totalKMs, 0).toLocaleString('es-AR')}</Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>{choferes.liquidacionChoferes.reduce(totalImporteKMs, 0).toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</Text></View>
                            <View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>{choferes.liquidacionChoferes.reduce(totalGeneral, 0).toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</Text></View>
                        </View> : <></>
                    }
                </View>
            </Page>
          )
      }
    </Document>

[nabn]

You can make a component fixed so that it appears on every page. See this section on the docs.

[rahulbhanushali]

I am rendering dynamic count with the pdf, I can't be sure how long the content is going to be. Is there a way to identify that content is reaching the end of the page and add a page break conditionally?

[fuelkoy]

See #465