I have a ponent which will show a list of items with two Text next to each other. one for the title and one for the content. here is my render implementation:

let items = [
    {title: 'Test Test:', value: 'Long Test Long Test Long Test Long Test Long Test Long Test Long Test'},
    {title: 'Test:', value: 'Short Test Test Test'},
];
return (<FlatList
        style={{flex: 1, width: Dimensions.get('window').width}}
        data={items}
        renderItem={({item}) =>
            <View style={{flexDirection: 'row', width: Dimensions.get('window').width}}>
                <Text style={{color: colors.accentColor}}>{item.title}</Text>
                <Text>{item.value}</Text>
            </View>
        }/>);

the problem is text is not wrapped and it's getting of the screen when it's a long text. How can I fix it?

I have a ponent which will show a list of items with two Text next to each other. one for the title and one for the content. here is my render implementation:

let items = [
    {title: 'Test Test:', value: 'Long Test Long Test Long Test Long Test Long Test Long Test Long Test'},
    {title: 'Test:', value: 'Short Test Test Test'},
];
return (<FlatList
        style={{flex: 1, width: Dimensions.get('window').width}}
        data={items}
        renderItem={({item}) =>
            <View style={{flexDirection: 'row', width: Dimensions.get('window').width}}>
                <Text style={{color: colors.accentColor}}>{item.title}</Text>
                <Text>{item.value}</Text>
            </View>
        }/>);

the problem is text is not wrapped and it's getting of the screen when it's a long text. How can I fix it?

• javascript
• reactjs
• react-native
• jsx

2 Answers 2

I reproduced your case and I manage to do the correct wrapping by putting a flex: 1 property on your Long text :

<View style={{flexDirection: 'row', width: Dimensions.get('window').width}}>
    <Text style={{color: "red"}}>{item.title}</Text>
    <Text style={{flex: 1}}>{item.value}</Text>
</View>

Tell me if it works for you !

You can wrap your content in a ponent that a screen size width.

Compute the width using the Dimensions package.

let fullWidth = Dimensions.get('window').width

Then assign this width to a style object {width: fullWidth}

Hope this solves :)