Easiest way to trace a shape with touch in react native?

Question

I am trying to do a confirmation screen on my react native app and I need the user to trace an ellipse in order to confirm their action - kinda like what hotel tonight does with their logo. Is there a library I can use to have the user trace over an svg?

Here is an example of what the user would be doing:

Answer 1

I found someone else trying to do this, I don't think that is the most creative approach, there was a way to do this in flash many years ago.

I know that SVG is being used for line art animation there are many tutorials out there:

https://medium.com/@sterling.meghan/svg-line-animation-for-beginners-51857c88357f

Also, there is a library for SVG called react-native-svg, the thing is SVG objects can be dragged in javascript

http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

So my idea to solve this would be this: You have two layers one on top of each other.

The top one fills the entire screen and has a cut, that is the shape to be traced (the line art)

To get to the SVG object that is behind you can only do it through this cut. You can show a small circle on the starting point that is part of a big SVG colored shape that is under the cut, this shape is the second layer.

The user would start tracing but what he really is doing is dragging that SVG big object from one point to the next, he needs to follow the path like tracing because only if he does this he can drag the object through the hole. (He can only reach the object in the second layer through the hole)

The SVG object being drag has a different color from the top layer so when the user drags it gives the appearance of the path filling up.

I hope this helps you or at least gives you some ideas. Also, you could animate another SVG when the user completes the trace, with CSS line art animation. I would probably try this when I have the time.