React-pdf: Page break does not create a new page

[maxaggedon]

Describe the bug
When setting break={true} on a primitive component, if the total height of the component and what comes after it fits into the current page, no page is created and therefore the break is not applied...

To Reproduce
REPL

Expected behavior
Page breaks should be able to create new pages if necessary.

[diegomura]

Thanks! I'll try to take a look soon to this

[Reg011]

Ideally you should create a new Page tag instead of using a break inside a Page.

[diegomura]

Both should be fine and work though 😄

[davidvazinwnwd]

This still not working!!

[djedd]

It does not work for me either :(.

I have realised that it works only when there is a lot of text, but when there is little text it does not work.
Error example

[JCQuintas]

@diegomura do you know if this is already fixed in v2 beta? I've tried to install the v2 but it doesn't seem to be a drop-in replacement, so I wanted to know if it worth adjusting it to work with my setup so I have this feature.

[LucasMatuszewski]

Hi @diegomura
I have the same issue. I've tried on many elements (text, view) in many parts of different pages, and neither "break" property or normal "wrap" works for me... Only manually adding <Page> works. I have tried the "debug" mode and the height of the elements is bigger than the page size.

I use:

    "@react-pdf/renderer": "^1.6.9",
    "react": "^16.12.0",

I also use saveBlob function, maybe this is a problem?

const saveBlob = (blob: any, filename: string) => {
  return new Promise((resolve, reject) => {
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style.display = 'none';
    let url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
    resolve('PDF saved');
  });
};

export const savePdf = async (document: any, filename: string) => {
  return saveBlob(await pdf(document).toBlob(), filename);
};

Part of my code:

{entries.map((entry: EntryType, index: number) => (
        <Page size="A4" style={styles.page} key={`entry-${entry.id}`} wrap>
          <PdfHeader hipName={hipName} hipKey={hipKey} />
          <PdfEntry entry={entry} index={index + 1} />
          <View break style={{height: 1000}}> // JUST FOR TEST IF BREAK WORKS
            {entry.strategies
              ? entry.strategies.map((strategy: StrategyType) => {
                  if (strategy && strategy.plans && strategy.plans.length) {
                    return strategy.plans.map((plan: PlanType) => {
                      planIndex++;
                      return (
                        <PdfPlan
                          plan={plan}
                          planIndex={planIndex}
                          entryIndex={index + 1}
                          key={`plan-${plan.id}`}
                        />
                      );
                    });
                  } else {
                    return null;
                  }
                })
              : null}
          </View>
          <PdfFooter />
        </Page>
      ))}

Screen:

[morningcocoa]

Is this fixed in v2 @diegomura or fixed in the current v1? Would really love if this feature was fixed.

Also note, thanks for building such an extensive tool. Thank you so much.