Map animation and rendering

[ScreamZ]

Hello,

I'm currently working on a project where at some point I need to display an SVG map representing rooms inside a building.

At the time I'm writing those lines, this is expected to be an SVG with multiple layers, but maybe I'm doing it wrong.

Example

RPReplay_Final1677248695.mov

I've made a quick video to explain what I want. Somewhere in my app, I'll display the SVG and I want to be able to discord (unhide) colored parts, so the people discord new rooms on specific events.

Using React Native SVG i expected to use https://react-svgr.com/playground/?native=true&typescript=true to transform the SVG to something I can exploit with react native using react native svg.

But now that skia exists, i could prefer doing it with it, any ideas?

Requirements

• I can pan the map using my finger, guess I'll use gesture handlers if needed.
• Zoom of it ?
• I can click on it
• I can animate it

[wcandillon]

this demo is super exciting.
For mapping SVG to Skia code, this can be done quite easily (the concepts are pretty straightforward).

Now for advanced pan/zoom, we support it: https://www.youtube.com/watch?v=yBuhnVDXekQ
And if everything goes to plan, our next release will offer UI-thread-level Reanimated integrations so you will be able to use the gesture handler completely on the UI thread.

Let us know if you have any question and keep up the good work.