How to size react-native text components based on the text inside them? - react-native

Question

I have two text components next to each other.
The first is supposed to expand as far as the text inside requires, and switch to ellipses when it would compress the second beyond a single line.
e.g.
Short text - 1 Alert |
Really really really long text is s... - 1 Alert |
Where the bar is the end of the available space.
What currently happens is that, regardless of the text in the alertProfile component, it always takes the same percentage of the screen, so I get a massive white space with short text. Meanwhile, the long text is truncated too early, so I end up with unused whitespace after the alert.
e.g.
Short text - 1 Alert |
Really really really... - 1 Alert |
My question is how do I get the long text to use as much space as possible, and the short text to use up as little as possible.
Code sample is below.
export function Heading(props) {
const { title, number } = props;
let alertCountText = " - 1 Alert";
if (number !== 1) {
alertCountText = ` - ${number} Alerts`;
}
return (
<View style={expandedStyle.header}>
<Text numberOfLines={1} style={[expandedStyle.alertTitle]}>
{title}
</Text>
<Text style={[expandedStyle.alertCount]}>
{alertCountText}
</Text>
</View>
);
}
const expandedStyle = StyleSheet.create({
header: {
flex: 1,
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center"
},
alertTitle: {
flex: 1,
fontFamily: "Lato-Bold",
fontSize: 16,
fontWeight: "bold",
fontStyle: "normal",
lineHeight: 18
},
alertCount: {
flex: 1,
fontFamily: "Lato-Regular",
fontSize: 14,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 14
}
});

Answer 1

Check this one. I am not so sure about the react-native. But this one works perfectly with the flexbox as per your requirement and so I am guessing it will be a valuable answer.
.wrapper {
display: inline-flex;
width: 70%;
border: 1px solid #ddd;
margin-bottom: 10px;
}
.text {
display: inline-block;
white-space: nowrap;
max-width: calc(100% - 100px);
overflow: hidden;
text-overflow: ellipsis;
}
.alert {
margin-left: 5px;
}
<div class='wrapper'>
<span class='text'>Text</span>
<span class='alert'>Alert</span>
</div>
<div class='wrapper'>
<span class='text'>Long Text</span>
<span class='alert'>Alert</span>
</div>
<div class='wrapper'>
<span class='text'>Really Really Really Really Long Text</span>
<span class='alert'>Alert</span>
</div>