text in flatlist going off screen react native - 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
}
});

Answer 1

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.

Answer 2

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.