I have the title of a song and its duration showing in one line. The song title needs to show an ellipsis but the duration should never wrap or show ellipsis. I've tried several combinations but fail to make this work right for long titles. The duration either goes off screen when the name shows ellipsis or the duration wraps. I can't hardcode a fixed width on the duration as it can change size.
<View style={{flexDirection: 'row'}}> <Text numberOfLines={2} style={{fontSize: 16, textAlign: 'left'}}>{title}</Text> <Text style={{flex: 1, fontSize: 13, textAlign: 'right', marginTop: 2}}>{duration}</Text> </View>
To wrap React Native text on the screen, we can set flexWrap to 'wrap' .
just put text in a tag view and text will adapt to property of View. Not really, if you put a text of 22100 chars the whole component goes blank.
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
In React Native we can set the default Ellipsis using numberOfLines = { 1 } prop of Text component. This prop would allow us to implement the Ellipsis Clipped effect on Text.
The solution ended up being fairly simple. Not entirely intuitive but here's how to solve this. It appears that the text that needs ellipsis requires flex: 1
.
<View style={{ flexDirection: "row" }}> <Text numberOfLines={1} style={{ flex: 1, textAlign: "left" }}> {title} </Text> <Text style={{ textAlign: "right" }}>{duration}</Text> </View>;
Possibly below solution should satify your creteria
return ( <View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-around', marginTop: 50}}> <Text numberOfLines={2} style={{fontSize: 16, flex: 1}}>{title}</Text> <Text style={{fontSize: 13, marginTop: 2}}>{duration}</Text> </View> );
Please check and let me know if does not work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With