React native text going off my screen, refusing to wrap. What to do? React native text going off my screen, refusing to wrap. What to do? reactjs reactjs

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>

Output

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.

enter image description here


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,    }});