React Native chat bubble flexbox similar to whatsapp - react-native

Question

I'm trying to create a chat view in React Native similar to the Whatsapp UI.
What I can't wrap my head around is - how to do the time. Here is how it looks in Whatsapp:
Notice that the time is not on a completely new line by itself, but half a line.
At the same time in the last comment you can see that if the text is long enough, the time is being pushed to a new line.
I've tried several things:
Make the bubble relative and then use absolute positioning on the time element. Unfortunately if the text is long enough my time overlaps the text.
Make the bubble flexDirection: "row", and then have the text in 1 view and the time in another view. But I can't figure out how to force a wrap when the text is "long enough".
Any ideas how to achieve this?

Answer 1

I managed to kind of get what I want. It's not 100% the same as whatsapp, but good enough.
I had the following code:
<View style={{
margin: 10, marginTop: 10, marginBottom: 0,
padding: 10, borderRadius: 5, paddingBottom: 10,
backgroundColor: cropType ? '#93D14C' : '#F1F0F5'
}}>
{this.renderContent(comment)}
<Text
style={[styles.muted,
{
color: constants.FJMUTEDLIGHT,
backgroundColor: 'transparent',
alignSelf: 'flex-end',
fontSize: 12,
marginBottom: -5,
marginTop: 2
}]}>{moment.utc(comment.created).local().format('HH:mm')}</Text>
</View>
The renderContentHere() function can render Text, but it also can render a complex View containing text. Initially I wanted to figure out how many lines a text has and to figure the width of the lines. This doesn't seem to be possible with React Native since the onLayout property on a Text node can only tell you the width and height of the element, but not if the Text is 2 lines or 3 lines.
So I decided to just measure the View that contains the comment and figure out if it has one or more lines. If it has one line I'm assuming that I can place the time a little higher than normally.
This is what I ended up doing:
<View style={{
margin: 10, marginTop: 10, marginBottom: 0,
padding: 10, borderRadius: 5, paddingBottom: 10,
backgroundColor: cropType ? '#93D14C' : '#F1F0F5'
}}>
<View style={this.state.oneLine ? {
// Since we don't know how long the one line is, just in case add 25px padding on the right
// this way even if we are dealing with a long line of text it won't end up over the time
paddingRight: 25
} : {}}
onLayout={(e) => {
let {height} = e.nativeEvent.layout
// if height is less than 30px, then we are dealing with a single line of content
if (height < 30) {
this.setState({'oneLine': true})
}
}}>
{this.renderContent(comment)}
</View>
<Text
style={[styles.muted,
{
color: constants.FJMUTEDLIGHT,
backgroundColor: 'transparent',
alignSelf: 'flex-end',
fontSize: 12,
marginBottom: -5,
// If one line, move the time up - there is enough space
marginTop: this.state.oneLine ? -10 : 2
}]}>{moment.utc(comment.created).local().format('HH:mm')}</Text>
</View>
If we have a single line it still possible that the text will end up behind the time, so that's why I'm applying a right padding on the Text of 25 px. This breaks long lines and we end up with a view like this: