diff --git a/src/Confetti.tsx b/src/Confetti.tsx index 81343bf..ad60ff1 100644 --- a/src/Confetti.tsx +++ b/src/Confetti.tsx @@ -86,9 +86,15 @@ export const Confetti = forwardRef( useWindowDimensions(); const containerWidth = _width || DEFAULT_SCREEN_WIDTH; const containerHeight = _height || DEFAULT_SCREEN_HEIGHT; - const columnsNum = Math.floor(containerWidth / flakeSize.width); - const rowsNum = Math.ceil(count / columnsNum); + // if the count * flakeSize.width is less than to fill the first row, we need to add horizontal spacing + const horizontalSpacing = Math.max( + 0, + containerWidth / count - flakeSize.width + ); + const columnWidth = flakeSize.width + horizontalSpacing; const rowHeight = flakeSize.height + verticalSpacing; + const columnsNum = Math.floor(containerWidth / columnWidth); + const rowsNum = Math.ceil(count / columnsNum); const verticalOffset = -rowsNum * rowHeight * (hasCannons ? 0.2 : 1) + verticalSpacing - @@ -239,7 +245,7 @@ export const Confetti = forwardRef( const getPosition = (index: number) => { 'worklet'; - const x = (index % columnsNum) * flakeSize.width; + const x = (index % columnsNum) * columnWidth; const y = Math.floor(index / columnsNum) * rowHeight; return { x, y };