React native text going off my screen, refusing to wrap. What to do?
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.
Edit: Tue Apr 09 2019
As @sudoPlz mentioned in comments it works with flexShrink: 1
updating this answer.
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.
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, }});