word wrap error with a specific combination - react-pdf

[johangly]

The error in question is that when I send through props the following string to the component that generates the pdf to be downloaded, an overflow occurs in the pdf document:

kjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjklj

an overflow occurs in the pdf document but it only occurs specifically with these characters, I tried with other completely random characters and it works correctly, the text goes to the next line, but with these characters it seems to fail, I tried with the existing solutions when encountering a text overflow with the react-pdf library, but none works, everything leads me to that the text is the problem, below I will put screenshots of the generated pdf.

you can see the error yourselves if you go to this website: https://react-pdf.org/repl and paste just this inside:

<Text style={styles. text}> kjlkjlkjlkjlkjlkjkljkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjkjkjlkjkjkjkjkjkjkjkjkjkjkjkjkjlkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkjkljkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlk
</Text>

Screenshots

error with specific string: more words ramdom but it works:

code

in this case the code is not very relevant because the error also happens in the repl web, that is to say that it is already something external to the code that I could write when using react-pdf, anyway I will leave a small part of it:

<View style={{
                width: '100%',
                maxWidth: '100%',
              }}>
                <Text style={styles.header}>Remarks</Text>
                <Text style={styles.field}>{data.left_observations}</Text>
</View>

the current version is "@react-pdf/renderer": "^3.1.7"

[fredmanxu]

I found this https://github.com/diegomura/react-pdf/issues/824#issuecomment-787031516 and it solved my text overflow issue.

<Text>{text.split('')}</Text>