Animating a sequence based on prop change

[jackharding]

I'm struggling to fully understand how to use this library for what I need. I've managed to splice together a working example of what I need based on some code from William Candillon's course, but I feel like it's the wrong way to go about it, so I was just hoping someone might be able to suggest a better way.

I need to animate an element's Y position based on received props (in this example I'm just using state):

import React, { useState } from "react";
import { Dimensions, StyleSheet, View } from "react-native";
import Animated, { Easing, interpolate } from "react-native-reanimated";
import { useMemoOne } from "use-memo-one";

import { Button, StyleGuide } from "../../components";

const {
	Clock,
	Value,
	useCode,
	set,
	block,
	cond,
	startClock,
	stopClock,
	clockRunning,
	and,
	not,
	eq,
	timing,
} = Animated;

const { height } = Dimensions.get("screen");

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: "center",
		alignContent: "center",
		justifyContent: "center",
		backgroundColor: StyleGuide.palette.background,
	},
});

const runTiming = (
	clock: Animated.Clock,
	stage: Animated.Value<number>
): Animated.Node<number> => {
	const duration = new Value(1000);
	cond(eq(stage, 1), set(duration, 300), set(duration, 1000));

	const state: Animated.TimingState = {
		finished: new Value(0),
		position: new Value(0),
		time: new Value(0),
		frameTime: new Value(0),
	};
	const config = {
		duration,
		toValue: stage,
		easing: Easing.ease,
	};
	return block([
		cond(
			not(clockRunning(clock)),
			set(state.time, 0),
			timing(clock, state, config)
		),
		cond(eq(state.finished, 1), [
			set(state.finished, 0),
			set(state.frameTime, 0),
			set(state.time, 0),
		]),
		state.position,
	]);
};

const Timing = () => {
	const [phase, setPhase] = useState<
		"exited" | "active" | "incorrect" | "correct" | "exitedGood"
	>("exited");

	const { clock, isPlaying, progress, stage } = useMemoOne(
		() => ({
			clock: new Clock(),
			isPlaying: new Value(1),
			progress: new Value(0),
			stage: new Value(0) as Animated.Value<0 | 1 | 2 | 3 | 4>,
		}),
		[]
	);

	if (phase === "exited") {
		stage.setValue(0);
	}
	if (phase === "incorrect") {
		stage.setValue(1);
	}
	if (phase === "active") {
		stage.setValue(2);
	}
	if (phase === "correct") {
		stage.setValue(3);
	}
	if (phase === "exitedGood") {
		stage.setValue(4);
	}

	useCode(
		() =>
			block([
				cond(
					and(isPlaying, not(clockRunning(clock))),
					startClock(clock)
				),
				cond(
					and(not(isPlaying), clockRunning(clock)),
					stopClock(clock)
				),
				set(progress, runTiming(clock, stage)),
			]),
		[clock, isPlaying, progress]
	);

	const y = interpolate(progress, {
		inputRange: [0, 1, 2, 3, 4],
		outputRange: [height / 2 + 50, 50, 0, -50, (height / 2 + 50) * -1],
	});

	return (
		<View style={styles.container}>
			<Animated.View
				style={{
					position: "absolute",
					width: 100,
					height: 100,
					backgroundColor: "#bada55",
					transform: [
						{
							translateY: y,
						},
					],
				}}
			/>

			<View
				style={{
					marginTop: "auto",
					flexDirection: "row",
				}}
			>
				<Button
					label={"Enter"}
					primary
					onPress={() => setPhase("active")}
				/>
				<Button
					label={"Correct"}
					primary
					onPress={() => setPhase("correct")}
				/>
				<Button
					label={"Incorrect"}
					primary
					onPress={() => setPhase("incorrect")}
				/>
				<Button
					label={"EG"}
					primary
					onPress={() => setPhase("exitedGood")}
				/>
				<Button
					label={"EB"}
					primary
					onPress={() => setPhase("exited")}
				/>
			</View>
		</View>
	);
};

export default Timing;

While this sort of works, I'm not happy with it for a couple of reasons:

• I'm not controlling the animation between phases. Ideally, I'd like to be able to control easing and duration depending on the phase (where I'm setting duration inside that condition doesn't work and I don't get why)
• I'm never stopping the clock and that feels wrong. Is that ok?

I don't seem to be able to tag this as a question, so apologies if this is the wrong place to ask.