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

Open
  • Is something wrong?
#3,252 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start by reproducing the supplied RowLabelValue and HeaderCliente components with wrapped Text elements and column flexDirection. Then trace the flex layout and gap handling for wrapped Text children; done means vertically stacked rows retain consistent spacing without collapsing or overlapping.

Written by the indexing model from the issue text.

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 (
    <View
      style={{
        flexDirection: "row",
        width: "100%",
        minHeight: 12,
        alignItems: "flex-start",
        marginBottom,
      }}
    >
      <Text
        style={[
          fontSizes.bold,
          fontSizes.normal,
          { width: labelWidth, flexShrink: 0, textAlign: "left" },
        ]}
      >
        {label}
      </Text>
      <Text
        style={[
          fontSizes.value,
          fontSizes.normal,
          { flex: 1, textAlign: "left", flexWrap: "wrap" },
        ]}
      >
        {value}
      </Text>
    </View>
  );
};

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

export const HeaderCliente = ({ cliente }: { cliente: Cliente }) => (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', gap: 8 }}>
        <View style={{ flexDirection: 'column', justifyContent: 'flex-start', width: '60%', gap: 10 }}>
            <RowLabelValue label="Señores: " value={cliente.razonSocial} />
            <RowLabelValue label="Dirección: " value={cliente.direccion} />
            <RowLabelValue label="CUIT: " value={cliente.cuit} />
        </View>

        <View style={{ flexDirection: 'column', justifyContent: 'flex-start', width: '40%', gap: 10 }}>
            <RowLabelValue label="Tel: " value={cliente.telefono} />
            <RowLabelValue label="Localidad: " value={cliente.localidad} />
            <RowLabelValue label="I.V.A: " value={cliente.iva} />
        </View>
    </View>
);

export default HeaderCliente;
Image
Dominant language
TypeScript
Stars
16.9k
Forks
1.3k
Avg merge
11m
Merged PRs (30d)
2

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from diegomura/react-pdf

All issues in diegomura/react-pdf

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.