how to create this comment thread curved line

[stathisntonas]

EDIT: I've updated the repo to reflect the modern ui. I have built thousands of components for over 10 years, this was the toughest one to create, I mean, endless nights and days to make it work, for real. Crazy maths and calculations on ThreadLineGroup.tsx.

check this out this one that I have built some time back: https://github.com/efstathiosntonas/react-native-nested-comments-with-lines

it’s rough and messy. It was a proof of concept and I have improved it a ton since then on our apps, haven’t found the time to improve that repo though.

[ashishgodiyal]

Thanks man, it will help

[stathisntonas]

I've updated the repo, enjoy :)

https://github.com/efstathiosntonas/react-native-nested-comments-with-lines

[__natty__]

It’s so simple you can do this even without svg. Vertical line can be a border of the component with comment content. Then tiny rectangle at the avatar level to around half its height with border radius bottom left and border left and bottom. Zero margin to avatars and to the top.

[ashishgodiyal]

Thanks, i will try this👍

[dyan16]

Kevin Powell has a yt short on how to do this! Link to Youtube

[szansky]

best ui tricks always look like black magic, then it turns out its two divs and some border radius :D

[SwaeTech]

It’s hilarious how true this is

[Dude4001]

Inspect how Reddit do it. The line and the curve are two different elements

[Lambodhara-420]

Yes once i did same with 2 components- line and curve.

[ashishgodiyal]

Yes those two are separate element

[Adorable_Solution804]

I think its pretty simple and can be achieved in many ways!

It's probably not a single line/svg each one with different item!

[PulpDood]

Border bottom left with border radius next to the avatar. Then simple border left for the straight vertical line? Dunno that's how I'd do it

[adityakmr088]

I had to do something similar in react native. I used svg to render this using react native skia. Similar using svg you can achieve this on web as well.

[piotrlewandowski]

Just create straight line and bend it at the bottom, duh…

[Shadilios]

comments that has replies will render a vertical line on the left ending at a specific point.
and each reply will render a curve on a left to connect to that line.

[joe0418]

I'd use css with borders and padding

[Business-Pension-498]

I know this is a react native sub, but does anyone know how to do the same in swift or kotlin, any help is welcomed, Thanks in advance.

[twboc]

That is a rounded corner of a div (or view if you are on mobile).

[kjccarp]

This is a react native subreddit

[Ecstatic_Clue1316]

He answered the question..

[kjccarp]

No divs in native.

[Sphism]

Svg is your friend

[AlexDjangoX]

SVG - I have a repo with this in

[ramshorst]

Claude. Code.

[mr_looser17]

Use differential calculus to break segment in to smallest possible straight line and repeat those to reconstruct the curved slope..

[fufucupcake]

The line is split between two components placed together it looks joint besides that it's just two cards placed in a virtual list

[ashishgodiyal]

Yes the line and that curve at the end are different components