I noticed there is incosistency in the wrapping behaviour of the React Native when a single long word exceeds the parent's width. To illustrate this, below is my code:
<View style={{ backgroundColor: 'white', flexDirection: 'column', width: '95%', alignSelf: 'center', marginTop: 120 }}>
<Text style={{ padding: 10, color: 'black', fontSize: 17, fontWeight: '400', borderWidth: 1 }}>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz,abcdefghijklmnopqrstuvwxyz
</Text>
<Text style={{ padding: 10, color: 'black', fontSize: 17, fontWeight: '400', borderWidth: 1 }}>
abcdefghijklmnopqrstuvwxyz,abcdefghijklmnopqrstuvwxyz,abcdefghijklmnopqrstuvwxyz abc
</Text>
</View>
The single long words in the first and second row are the same. In the second row, however, I added a space, followed by a shorter string "abc". The behaviour of the text wrapping now changes as shown below:
inconsistent text wrapping (unwanted result)
Is there a way to achieve the same behaviour in text wrapping even if there is a space after the long word, like below?