I am experiencing an issue with a PDF rendering where very long words are not wrapping onto a new line, instead overflowing the container and disappearing off the page.
Below is the setup causing this problem. The styles are listed 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,
},
})
Here is the configuration of the section on the page:
<View style={styles.section}>
<StyledText style={styles.sectionTitle}>Description</StyledText>
<StyledText style={{ width: '80%', fontWeight: 400 }}>
{data.description}
</StyledText>
</View>
The data.description consists of extremely long strings that should be broken when reaching the end of the container but they do not respond to any styling attempts.
I have tried using properties such as wordWrap, wordBreak, flex, flexWrap, flexGrow/Shrink, and overflowWrap without success.