Control word/text break on React Native <Text> element - react-native

Question

Is there a way to control the word-break behaviour for text within a Text component? With a multiple-line Text component on iOS it automatically breaks the text where there are word breaks (I haven't checked android yet, but I'd need it to work there too). I was hoping to change that behaviour to break on the per-character level, like you can do this CSS rule:
word-break: break-all;

Answer 1

transform <text>str</text> to <View><text>s</text><text>t</text><text>r</text></View> by using split & map!
export default class PageCard extends React.Component {
constructor(props) {
super(props);
this.state = {
tail: false,
longWord: 'longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
longWordTail: ' longWord longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
longWordTail2: ' longWord longWord bbbbbbbbbbbbbbbbbbbbb longWord longWord longWord',
};
}
render() {
return (
<ScrollView style={{flex: 1, paddingTop: 60, paddingHorizontal: 10}}>
<View style={Styles.breakWordWrap}>
<Text numberOfLines={2} ellipsizeMode="tail" style={Styles.breakWord}>
{this.state.longWord}
</Text>
</View>
<View style={Styles.breakWordWrap}>
{
this.breakWord(this.state.longWord)
}
</View>
<View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>
{
this.breakWord(this.state.longWordTail)
}
</View>
<View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>
{
this.breakWord(this.state.longWordTail, true)
}
</View>
{/*<View style={[Styles.breakWordWrap, Styles.breakWordWrapTail]}>*/}
{/* {*/}
{/* this.breakWord(this.state.longWordTail2, true)*/}
{/* }*/}
{/*</View>*/}
</ScrollView>
)
}
breakWord = (str = '', tail = false) => {
let strArr = (tail ? str + ' ' : str).split('');
return strArr.map((item, index) => tail && strArr.length === index + 1 ?
<Text key={item + index} style={[Styles.breakWord, Styles.breakWordTail, !this.state.tail && Styles.breakWordTailHide]}>...</Text> :
(tail && strArr.length === index + 2 ? <Text key={item + index} style={[Styles.breakWord]} onLayout={this.breakWordLast}>{item}</Text>
: <Text key={item + index} style={[Styles.breakWord]}>{item}</Text>)
);
}
breakWordLast = (e) => {
console.log(e.nativeEvent.layout)
if (e.nativeEvent.layout.y > 50) {
this.setState({
tail: true
})
}
}
}
const Styles = {
box: {
marginTop: 10,
},
title: {
fontWeight: 'bold',
color: '#333',
textAlign: 'center'
},
breakWordWrap: {
flexWrap: 'wrap',
flexDirection: 'row',
// not
borderWidth: 1,
marginTop: 30,
},
breakWordWrapTail: {
position: 'relative',
height: 50,
overflow: 'hidden'
},
breakWord: {
lineHeight: 25
},
breakWordTail: {
position: 'absolute',
backgroundColor: '#fff',
right: 0,
bottom: 0,
height: 25
},
breakWordTailHide: {
opacity: 0
}
}

Answer 2

There is an Android-only textbreakstrategy property for Text components that allows some control on how a text should be split. The property values map to Android's native android:breakStrategy values.
This property does not seem to translate to iOS though.
Otherwise, if you have preknowledge about the Text value, you could indicate text split with a Soft Hyphen
<Text>aaaaaaaaaaaaaaaaaa bbbbbbbbbbb­CCCCC.</Text>
This would render as:
aaaaaaaaaaaaaaaaaa bbbbbbbbbbb-
CCCCC.
If neither suffice, I suppose this is beyond the capabilities of a Text component and you may have to revert to another component. Maybe one that renders simple html.

Answer 3

Try add flexWrap: "wrap" to the style of the Text component
Example:
Code
<View style={styles.container}>
<Text style={styles.text}>{text}</Text>
</View>
Style
export default StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
},
text: {
width: 0,
flexGrow: 1,
flex: 1,
}
});

Answer 4

There is the possibility with following code
<Text style={{ flexShrink: 1 }}>