diegomura / diegomura/react-pdf

gap property not working correctly with flexDirection: "column" in Text elements with flexWrap

Open
#3,252 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

When using flexbox layout with flexDirection: "column" and gap property to space multiple rows containing wrapped Text elements, the gap is not applied correctly. This causes child elements to collapse and overlap on the same line instead of being properly separated vertically.

The gap property should create consistent vertical spacing between each row, regardless of the Text content length or wrapping.

```
import { Text, View } from "@react-pdf/renderer";
import fontSizes from "../../styles/fontSizes";

interface RowLabelValueProps {
label: string;
value: string | number;
labelWidth?: number;
marginBottom?:number;
}

export const RowLabelValue = ({
label,
value,
labelWidth = 110,
marginBottom = 5,
}: RowLabelValueProps) => {

return (


{label}


{value}


);
};
```

```
import { View } from "@react-pdf/renderer";
import { Cliente } from "../../../models/general";
import { RowLabelValue } from "../../common/RowLabelValue";

export const HeaderCliente = ({ cliente }: { cliente: Cliente }) => (











);

export default HeaderCliente;
```

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.