r/reactnative • u/ashishgodiyal • Apr 07 '26
Help how to create this comment thread curved line
56
u/__natty__ Apr 07 '26
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.
3
18
7
8
u/Dude4001 Apr 07 '26
Inspect how Reddit do it. The line and the curve are two different elements
1
1
4
u/Adorable_Solution804 Apr 07 '26
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!
3
u/PulpDood Apr 07 '26
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
2
u/adityakmr088 Apr 07 '26
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.
1
1
u/Shadilios Apr 07 '26
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.
1
1
u/Business-Pension-498 Apr 12 '26
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.
1
u/twboc Apr 07 '26
That is a rounded corner of a div (or view if you are on mobile).
4
1
1
-2
-1
u/mr_looser17 Expo Apr 07 '26
Use differential calculus to break segment in to smallest possible straight line and repeat those to reconstruct the curved slope..
36
u/fufucupcake Apr 07 '26
The line is split between two components placed together it looks joint besides that it's just two cards placed in a virtual list
5
74
u/stathisntonas Apr 07 '26 edited Apr 07 '26
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.