text in flatlist going off screen react native

Question

I tried basically every answer from this question and nothing seems to work: React native text going off my screen, refusing to wrap. What to do?

I am facing the same issue where my text goes off-screen and seems to be operating at a width of about 130% or so.

Here is the screen I render the list:

<View style={styles.container}>
      <FlatList 
        data={messagePreviewData}
        renderItem={({ item }) => 
          <ChatPreview 
            readMessage={item.readMessage} 
            imgUri={item.imgUri} 
            username={item.username} 
            time={item.time} 
            message={item.message} 
          />
        }
        keyExtractor={(item, index) => item.username + index}
      />
    </View>

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.neutralOne,
    flex: 1,
  }
});

And here is the ChatPreview component, where the message text goes off-screen:

const ChatPreview = (props: ChatPreviewProps) => {
    const { readMessage, imgUri, username, time, message } = props;
    return (
        <View style={styles.container}>
            <View style={styles.leftContainer}>
                <View style={styles.badgeAvatarContainer}>
                    <Avatar
                        rounded
                        source={{ uri: imgUri }}               
                        size={scaledSize(50)}
                    />
                </View>
                <View style={styles.usernameMessageContainer}>
                    <Text style={styles.username}>{username}</Text>
                    <Text style={styles.messagePreview} numberOfLines={2} ellipsizeMode='tail'>
                         {message} // this is what's going off screen
                    </Text>
                </View>
            </View>
            <Text style={styles.time}>{time}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 10,
    },
    leftContainer: {
        flexDirection: 'row'
    },
    badgeAvatarContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 10
    },
    usernameMessageContainer: {
      // I have tried putting many things here and nothing seems to work
    },
    username: {
        color: colors.neutralEight,
        fontFamily: fonts.bodyTwoBold.fontFamily,
        fontSize: fonts.bodyTwoBold.fontSize,
        lineHeight: fonts.bodyTwoBold.lineHeight,
    },
    messagePreview: {
        color: colors.neutralFour,
        fontFamily: fonts.captionOne.fontFamily,
        fontSize: fonts.captionOne.fontSize,
        lineHeight: fonts.captionOne.lineHeight,
    },
    time: {
        color: colors.neutralFour,
        fontFamily: fonts.captionTwo.fontFamily,
        fontSize: fonts.captionTwo.fontSize,
        lineHeight: fonts.captionTwo.lineHeight
    }
});

score 4 · Accepted Answer · answered Jan 14 '22 at 08:07

4

It might be worth setting flex:1 from parent down to the child where the content is going off screen. I've had issues where I've forgotten to do it and it's been messed up.

Essentially you could add flex:1 to every style in ChatPreview to try it out, It won't look super nice probably but you should see if the issue is fixed I believe and tweak it from there.

answered Jan 14 '22 at 08:07

Christer Loob

151
6

For whatever reason, this worked! Thank you – goolius_boozler Jan 14 '22 at 17:51

score 0 · Answer 2 · answered Jan 14 '22 at 03:32

0

coincidently i was doing a similar thing yesterday. So as you are using flex-direction row , thus , the text (which tries to get all the width given to it, by default 100%) goes out of screen as now 100% is what you said 130%. Now to restrict it, we just need to restrict its width. So set width on the text, maybe only 60% or 70% and it will work fine.

answered Jan 14 '22 at 03:32

Irfan wani

4,084
2
19
34

This makes the time text very buggy, unfortunately. Seems more of a hack than a solution, I must be doing something wrong with flexbox no? – goolius_boozler Jan 14 '22 at 03:35

text in flatlist going off screen react native

2 Answers2