I'm trying to recreate an app screen I saw in a series (see the image below) in React Native. Now I'm a bit stuck with creating curved Views (arcs) that hold curved text inside of them. Those arcs should be able to animate from the top in along their paths, wrapping around the circle in the top left corner. CSS seems out of the question, because curving divs is inherently difficult. SVGs might be an option, but I have no idea how to set those up as to dynamically set the length of the arc or their height if the text is longer/shorter.

If there is a way to do this please let me know. Any idea I could try already helps.

This also doesn't have to be perfect. It's just something I'm coding in my freetime as practice, so any approximation is more than enough.

CodePudding user response：

As Atmas said in the comments, SVGs are the way to go.

I found some code to generate SVG Arcs programatically in