View go off my screen with flexDirection "row"

Question

I try to display a comment space with comment bubbles that have variable widths depending on the size of the text or the quote.

If the message is long, my text wrap as it should. However, when it's my quote that is long, I wish it could only be one line and activate the ellipsisMode="tail", but it doesn't, the quote goes out of the screen and doesn't cut when it has reached the maximum size of the parent of the bubble.

My problem is that I can't just create a text with "nested" text because sometimes, instead of the "username", there is a "badge" which is a native React view containing text. (Since it is not possible to apply paddings, border radius on nested texts).

Also, when I put a flexWrap: "wrap" on my UserInfosContainer, the quote goes to the next line, but unfortunately, that's not the behavior I'm looking for.

Here is my current code.

//Component

<View style={styles.messageBubble}>
  <View style={styles.userInfosContainer}>
    <View style={styles.pseudoContainer}>
      {isMyComment ? (
          <CommentSpecialBadge me={isMyComment} />
      ) : (
          <Text style={styles.pseudo}>username</Text>
      )}
    </View>
    {quotation ? (
      <View style={styles.quoteContainer}>
        <Text style={styles.quoteText} numberOfLines={1}>
          {"  "}"my quotation"
        </Text>
      </View>
    ) : null}
  </View>
  <Text style={styles.message}>
      message
  </Text>
</View>

//style

const styles = StyleSheet.create({
    messageBubble: {
        marginLeft: 7,
        backgroundColor: "#F0F2F5",
        borderRadius: 20,
        paddingHorizontal: 12,
        paddingVertical: 7,
        alignSelf: 'flex-start',
    },
    userInfosContainer: {
        marginBottom: 3,
        flexDirection: 'row',
        alignItems: 'center',
    },
    pseudoContainer: {
        alignItems: 'center',
    },
    quoteContainer: {
        alignItems: 'center'
    },
    pseudo: {
        color: '#050505',
        ...FONTS.semibold,
        fontSize: setResponsiveSize(2.4, 14)
    },
    quoteText: {
        color: "#404852",
        fontSize: setResponsiveSize(2.4, 13),
    },
    message: {
        fontSize: setResponsiveSize(2.4, 16),
        ...FONTS.regular,
        color: "#050505",
    },
})

Hoping that you can tell me the way to achieve what I want, I feel like I can't get the right logic to approach the problem!