Animating SVGs that are created by another library

[LukeDowell]

I am using a music notation library called Vexflow that will render high level music notation onto a staff. I have cobbled together a backend for Vexflow that renders using react-native-svg, which you can see here: https://github.com/LukeDowell/flashchords-expo/blob/master/src/lib/vexflow/ReactNativeSVGContext.js

The Vexflow library renders a bunch of SVGs that I do not directly control as JSX, and thus can't easily pass things like animatedProps or animatedStyles to them. I have the SVG backend using the Reanimated wrappers but haven't been able to interact with them at all.

const svgClass = {
  svg: Animated.createAnimatedComponent(Svg),
  path: Animated.createAnimatedComponent(Path),
  rect: Animated.createAnimatedComponent(Rect),
  g: Animated.createAnimatedComponent(G),
};

Before I started using react native, I was able to animate already-rendered SVGs by selecting them from the DOM and doing things like this:

const transitionTime = SECONDS_PER_MEASURE * (chords.length);
const translationX = STAVE_WIDTH * (chords.length)
staveGroup.style.transition = `transform ${transitionTime}s linear`
staveGroup.style.transform = `translate(-${translationX}px, 0)`

This doesn't work anymore so I'm trying to migrate to reanimated. I'd like to animate SVGs that I do not directly control in response to MIDI controller input, here: https://github.com/LukeDowell/flashchords-expo/blob/master/src/components/exercises/NativeExercise.tsx#L40

I'm very new to react native so I'm hoping that I'm just missing something very obvious. My next plan is to try and create an animationRef in the ReactNativeSVGContext I linked above, and then pass that back to any components that want animation control alongside the SVG group element.

The ultimate goal is basically to arbitrarily animate specific SVG elements by class. For example, in this image, I'd like to turn each note green as the user successfully plays them:

Thanks in advance!