diegomura / diegomura/react-pdf
gap property not working correctly with flexDirection: "column" in Text elements with flexWrap
- 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;
```
Contributor guide
Assessment
This issue has not been assessed yet.