Spaces at the beginning of strings are not rendering for <Text /> components

[TomSenapatiInfluence]

Describe the bug Spaces at the beginning of strings inside Text components are not being reproduced into the rendered pdf. Instead, the text node begins with the first character of the string. If a string starts with multiple spaces, only a single space is rendered in the pdf. Similarly, if a string starts with any number of spaces, followed by a number/special character the spaces are completely ignored. The only case that seems to render accurately is if the string starts with a single space, followed by an a-z character.

https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e659a004f003619b006f61622003a0046200099080beed3a72a005430a36bbf4c00ee48a000b186040c08001c7b02460f9500f486d874d3af5b189e266696008cb60ec018ee9e1a9ad431717181a6163021000ce18e1810d17eb13e090084c9c169599179fa05d46ebc02b1ee740cccacec0400dc64640062e050b2004e187c48d0188378121c00663c8c482242005c3000e400f210c63c224a6b00341c1083c0ab6be650507610cb6e6e33fd727cd03c5048c0b2a08c6e106e20db5d928dc00371080198dc004d003eb6800d20035001b080001c007510083e400552538318308006801387800410a6c8ae3335991549d6ea8120b0690e47030003294144182e798301801b01866f0c14c388a152ada69a0712894ce3e368407655b8200ac47794f115ca8010ba0a020462ad91daef0c0154a9700024408324000bdfabb0d65b28aa1d4c1de50312caad8f561725d185580098002c3eca261f41491120f86073a45581343907fa3d79a2c56eb2d8ecf6f4af4fa78080b23b039a60d4143cef0da423b1df5f913c9d4fadd39841967348c1e20d46602355d4dab28fa47ddee3821e47e80cc0e59c3ac369b21346b707c3e72ac422deceb1730b25b9c8b40d2cc16771bf0d7383b91fef0fb5febaff731ab7c6a01d94f9c005608340480cc423f6ab8e67999eeb3684833010000b40012a9a3c180578de301c1fc1362ba508fb388884cef300ee9a49e83e4388e0e93aaeab064464d38709860a7a84cf7a506b986cfb6e547386389a668c0119319a37ebf9766b0f699ab6a0088d5bac7c30c604ce3e83802000724c3c8ec72e569d80099848380e70f0f20402008895860e06716fb71cdab68a38e42782a2670620cc502acee6504e9f0970f9adb89499fedd8b0bdad9301c90a5ac4a4602a731472325d190484608e1405c0d03d10c2c128131e054220a83a0581b8c4132400000

MacOS, Chrome

[dongparta]

I was able to solve it by splitting the string based on newline characters, counting the number of lines that include spaces, and dynamically adjusting the marginLeft option accordingly.

Here is an example.

<View style={pdfStyle.introContents}>
            {selfIntroductions.length > 0 &&
              selfIntroductions[0].split('\n').map((line, index) => {
                if (line.length === 0) {
                  return (
                    <Text
                      style={createSelfIntroductionPDFStyles(0).selfIntroduction}
                      key={index}
                    >
                      {'\n'}
                    </Text>
                  );
                }
                const spaceCount = line.match(/^\s*/)[0].length;
                return (
                  <Text
                    style={createSelfIntroductionPDFStyles(spaceCount).selfIntroduction}
                    key={index}
                  >
                    {line}
                  </Text>
                );
              })}
          </View>

const createSelfIntroductionPDFStyles = (spaceCount: number) =>
  StyleSheet.create({
    selfIntroduction: {
      fontFamily: 'Pretendard',
      fontSize: '11px',
      lineHeight: '1.6',
      whiteSpace: 'pre',
      color: `${portColor.gray100}`,
      marginLeft: `${2 * spaceCount}px`,
    },
  });