Chat bubble (react or react-native) component styling

Question

while I was looking for ux sites I found some interesting ui for chat bubbles. Which is,
Chat Bubble UI ref

After brainstorming several days, I couldn't figure out how to develop that. But I have found some approaches to that problem which I want your suggestions:

1. I should calculate message line width (absolutely), however the problem in here is each language has different character sets and how should I know each letter width and do correct calculation.

2. On the edges which bubbles intercepting there shouldn't be rounded corners and my approach for that problem is dividing each line to separate component, hold above line width & below line width compare and give dynamic styling to that component like:

   { borderTopRightRadius : 5, borderBottomRightRadius:0 } etc. The problem in that solution is I will have tons of components for each line and so many refs. I am kinda discouraged on that when I consider performance issues.

I am inviting you to do some brainstorming (not coding) and find an efficient way to solve my problem. Many thanks, who spends time to read that.

Answer 1

This is really interesting problem. Having more experience with web and react (rather than react native), I'll describe the way I would solve it in the browser.

1. Render line, but keep it invisible ( opacity: 0 or visibility: none )
2. Get it's size and determine if it is wider than the previous sibling
3. Based on that apply a CSS class. Specific CSS classes would have border radius and pseudo element ( ::before ) which would be the nice "transition" part (SVG for sure).
4. Show the line. I would even render it beneath the already rendered ones and in this step animate the group to top.

I think you have to create element for each line (again I'm talking about the web). Border radius shouldn't create performance issues.

Let me know what you think, I may cook a small example for you when I catch time.

Answer 2

You can try:

bubbleChat: {
    borderRadius: 15,
    borderTopLeftRadius: 0, 
    display: 'flex',
    paddingLeft: 15,
    minWidth: 50
},
bubbleWrapper: {
    flexDirection: 'row'
}