React native text going off my screen, refusing to wrap. What to do?
This is a known bug. flexWrap: 'wrap'
didn't work for me but this solution seems to work for most people
Code
<View style={styles.container}>
<Text>Some text</Text>
</View>
Styles
export default StyleSheet.create({
container: {
width: 0,
flexGrow: 1,
flex: 1,
}
});
The solution to that issue is flexShrink: 1
.
<View
style={{ flexDirection: 'row' }}
>
<Text style={{ flexShrink: 1 }}>
Really really long text...
</Text>
</View>
Depending on your set up, you may also also need to add flexShrink: 1
to the <View>
's parent as well, to get this to work, so play with that and you'll make it.
The solution was discovered by Adam Pietrasiak in this thread.
I found solution from below link.
[Text] Text doesn't wrap #1438
<View style={{flexDirection:'row'}}>
<Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd
You miss fdd
</Text>
</View>
Below is the Github profile user link if you want to thank him.
Ally Rippley
Edit: Tue Apr 09 2019
As @sudoPlz mentioned in comments it works with flexShrink: 1
updating this answer.