Prevent infinite loop while splitting pages

packages/layout/src/steps/resolvePagination.js

@@ -100,13 +100,19 @@ const splitNodes = (height, contentArea, nodes) => {
 
       // All children are moved to the next page, it doesn't make sense to show the parent on the current page
       if (child.children.length > 0 && currentChild.children.length === 0) {
-        const box = Object.assign({}, child.box, {
-          top: child.box.top - height,
-        });
-        const next = Object.assign({}, child, { box });
-
-        currentChildren.push(...futureFixedNodes);
-        nextChildren.push(next, ...futureNodes);
+        // But if the current page is empty then we can just include the parent on the current page
+        if (currentChildren.length === 0) {
+          currentChildren.push(child, ...futureFixedNodes);
+          nextChildren.push(...futureNodes);
+        } else {
+          const box = Object.assign({}, child.box, {
+            top: child.box.top - height,
+          });
+          const next = Object.assign({}, child, { box });
+
+          currentChildren.push(...futureFixedNodes);
+          nextChildren.push(next, ...futureNodes);
+        }
         break;
       }
 

packages/layout/tests/steps/resolvePagination.test.js

@@ -249,4 +249,44 @@ describe('pagination step', () => {
     expect(page2.children.length).toBe(1);
     expect(page2.children[0].box.height).toBe(40);
   });
+
+  test('should not infinitely loop when splitting pages', async () => {
+    const yoga = await loadYoga();
+
+    const root = {
+      type: 'DOCUMENT',
+      yoga,
+      children: [
+        {
+          type: 'PAGE',
+          box: {},
+          style: {
+            height: 400,
+          },
+          children: [
+            {
+              type: 'VIEW',
+              box: {},
+              style: { height: 401 },
+              children: [
+                {
+                  type: 'VIEW',
+                  box: {},
+                  style: {
+                    height: 400,
+                  },
+                  props: { wrap: false, break: true },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    calcLayout(root);
+
+    // If calcLayout returns then we did not hit an infinite loop
+    expect(true).toBe(true);
+  });
 });