React Native processing ellipse when multiple text components per line

Question

I'm trying to create a comment section in React Native, but I have problems with text overflow and ellipsis.

The structure is simple and looks as follows:

Ideally, when the username is long enough, it should be truncated, and the action name should be pressed all the way until it reaches the timestamp:

The closest I got using this code:

const styles = StyleSheet.create({ commentRow: { padding: 10 }, commentTopRow: { flexDirection: 'row', alignItems: 'center' }, commentTitle: { flex: 1 }, author: { fontWeight: '500' }, commentBody: { paddingTop: 5, paddingBottom: 5 } }); <View style={styles.commentRow}> <View style={styles.commentTopRow}> <Text style={styles.commentTitle} numberOfLines={1}> <Text style={styles.author}>User Name</Text> <Text style={styles.action}> commented</Text> </Text> <Text style={styles.timestamp}>8h</Text> </View> <Text style={styles.commentBody}>comment body</Text> </View> 

which gives the following results:

Any help is appreciated in defining a unique structure and a set of styles that will handle both cases.

Thanks!

Answer 1

According to the Facebook guide ,

React Native flex does not work as it does in CSS. flex is a number, not a string, and it works according to the css-layout library at https://github.com/facebook/css-layout .

When flex is -1, a component usually has a width and height dimension. However, if there is not enough space, the component will be reduced to its minWidth and minHeight.

So basically you need to set the correct flex values ​​for your components. I suppose you do not want commented and 8h shortened. Then you need to set the flex values ​​to 0 so that these components make them inflexible for compression. And set 0 to long long user name to make it flexible, to shrink when space is not enough.

Answer 2

It will be work

  <View style={styles.commentRow}> <View style={styles.commentTopRow}> <View style={styles.commentTitle}> <Text numberOfLines={1}> <Text style={styles.author}>User Name</Text> <Text style={styles.action}> commented</Text> </Text> </View> <View> <Text style={styles.timestamp}>8h</Text> </View> </View> <Text style={styles.commentBody}>comment body</Text> </View> 

In short, you should use View for layout, not Text