React Native Flex-Wrap either won't wrap or squishes text to side of screen

Question

I use a FlatList to display a bunch of views from top to bottom where each row has an image, with some text beside it. This is what the view looks like, notice how the longer titles are cut off at the end and do not wrap to the next line.

Here is my code for the rows.

const styles = StyleSheet.create({
    movieCell:{
        flexDirection: 'row',
        width: '100%'
    },
    cellText:{
//        flex:1,
        flexWrap: 'wrap'
    },
    textWrapper:{
        flexDirection:'row'
    },
    movieImage:{
        width: 50,
        height: 50
    }
})

const MovieCell = (props) => {
    return(
        <TouchableOpacity 
        style={styles.movieCell}
        onPress={someFunction()}
        >
            <Image source={{uri: props.source}} style={styles.movieImage}/>
            <View>
                <View style={styles.textWrapper} >
                    <Text style={styles.cellText}>{props.title}</Text>
                </View>
                <Text>{props.year}</Text>
            </View>
        </TouchableOpacity>
    )
}

There is only one solution that I've seen (Ashok's solution) that seems to affect the way the text wraps. Unfortunately it looks like this solution pushes the text way to the left, so that the text doesn't fill the screen. I've tried lot's of adjustments with width: 100% but nothing seems to help.

score 1 · Accepted Answer · answered Dec 28 '19 at 02:49

I think because you're specifying a width for the image, it's messing up the flex on textWrapper. One solution is to get the screen width and subtract the image width, then use this as the width of textWrapper:

import { Dimensions } from 'react-native';

const imageWidth = 50;

const styles = StyleSheet.create({
  movieCell: {
    flexDirection: 'row',
    width: '100%'
  },
  cellText: {
    // flexWrap: 'wrap' // you can remove this
  },
  textWrapper: {
    // flexDirection: 'row', // and this
    width: Dimensions.get('screen').width - imageWidth // <-- add this
  },
  movieImage: {
    width: imageWidth,
    height: imageWidth
  }
});

You don't need flexWrap on text. It will wrap by default :)

React Native Flex-Wrap either won't wrap or squishes text to side of screen

1 Answers1