How to do word wrap with react-pdf

Question

I have a pdf that is rendering as expected except for an issue where when a very long word is included in the info for the page, instead of wrapping the word onto a newline the word just continues right out the container, off the page, out the door to who knows where.

This is the set-up for one of the containers that's creating this issue. The styles followed by the actual structure.

       const styles = StyleSheet.create({
         section: {
            paddingBottom: 20,
            position: 'relative',
         },
         sectionTitle: {
            fontSize: 12,
            fontWeight: 700,
            borderBottom: '2 solid #333333',
            display: 'block',
            marginBottom: 10,
            textTransform: 'uppercase',
            lineHeight: 1.2,
          },
        })

Below is the set-up of the section of the page

        <View style={styles.section}>
          <StyledText style={styles.sectionTitle}>Description</StyledText>
          <StyledText style={{ width: '80%', fontWeight: 400 }}>
            {data.description}
          </StyledText>
        </View>

here data.description is text in the form of: "looooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggggggggggggggggggggggg" something like this. The container should break the word but no matter how I try to style it the word doesn't respond. How can I break the word when hits the end of the container?

I've tried using, wordWrap, wordBreak, flex, flexWrap, flexGrow/Shrink and overflowWrap so far. Nothing seems to have any effect

Answer 1

Try style={{ flex: 1 }} in the component you wish to word break.