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

[SebastianRamirez2]

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;