Access a shared value outside of a functional component

[AdamGerthel]

I'm refactoring parts of an existing app where we're using Animated.Value a lot. It allows us to, for example use await (basically wrapping animation and calling resolve in the callback) to hold off some code until an animation has completed. It also allows us to have the Animated.Value live outside a component which allows for easy management from stores (that contain business logic) that are not part of the functional components.

Is there a way to do something similar with Reanimated 2? I read that we need to use hooks, which are only available in functional components - so it sounds to me like there's no way to start/stop an animation, or wait for it to finish, from outside the component. Or is there?

My use case (simplified for this example) is something like this:

import React from "react";
import { Animated } from "react-native";

class TimelineStore {
  // This is a mobx store
  animationValue = new Animated.Value(0);
  items = [];

  animateThings = (position) =>
    new Promise((resolve, reject) => {
      Animated.Timing(this.animationValue, { toValue: -position }).start(
        resolve
      );
    });

  addToTimeline = async () => {
    const previousItem = this.items[this.items.length - 1];

    this.items.push({
      position: 100 * this.items.length,
      active: true,
    });

    await this.animateThings(position); // I'm waiting for the animation to finish before moving forward

    if (previousItem) {
      previousItem.active = false;
    }
  };
}

const Timeline = () => {
  const { timelineStore } = useStores();

  return (
    <Animated.View
      style={[
        style.turnsWrapper,
        { transform: [{ translateX: timelineStore.animationValue }] },
      ]}
    >
      {
        // misc content here
      }
    </Animated.View>
  );
};

Basically a timeline that moves whenever a new item is added. The previous item becomes inactive after the timeline animation has finished.