'Inconsistency in React Native <Text> wrapping behaviour with single long word when exceeding parent's width

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?

desired result



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source