We recently migrated from Reanimated v2 to v3 due to upgrading Expo SDK to 50. However, this has introduced some issues with our animations.
The animation is a N, surrounded by trailing circles, which moves with gyroscope movement. The N is in the layer behind the circles.

The changes we made were the following: we had to change useAnimatedStyle to useAnimatedProps for our Animated Component, Ellipsis and for our custom SVG IkonN.
The circles and the gyroscope movement works fine after migrating to AnimatedProps, however the animated N (IkonN), is having some issues.

With Reanimated V3, I tried two approaches,

First I tried doing the same as for the circles, useAnimatedStyle -> useAnimatedProps. The animation works, however it’s severly misplaced, as you can see in the second image. The N still moves as it should, however it stops at what should be its starting place, and starts outside the frame. Almost like the circles are offsetting the N. I tried adding margins to the result of the transform, and managed to move the N, but the result was really unstable: the N’s starting position changed every render.

Second, I tried using an Animated.View instead of AnimatedComponent, now the N is correctly placed, and moves right, however now it’s in front of the circles instead of behind them. I tried messing with Z-index in the Animated Style, and changing the component order.

Normally SVG renders in the order they are in the HTML, I guess the N doesn’t count as an SVG in the second attempt.

Here is a gist containing the code, and package.json:
https://gist.github.com/uskipp/911c6b8617f5455908f932f63fad1d3f

I’ve tried a lot of different approaches, so I’m very grateful if anyone could provide some insight into this problem.