I have been trying to learn to use the Animated API but have been encountering unexplained network response timeouts after the app throws an error such as.

TypeError: undefined is not an object (evaluating 'animations[current].start') or Invariant Violation: Transform with key of "rotate" must be a string: {"rotate":3.141592653589793}

I am using android studio to emulate a device to display the app on but im working on the app and running expo from VS code.

Even if I kill the expo instance in the console and reload it with a different component not containing the animations I was working on, I still get a blue screen on the emulated device stating "Something went wrong, Network response timed out".

the strange thing is it will inexplicably start working again after repeated refreshes and resets whereupon it will build a new bundle and work, until another error is thrown then it breaks all over again, which makes debugging it quite challenging.

code I am working on is:

    import React, { useEffect, useRef, useState } from 'react';
import { Animated, Easing, View, StyleSheet } from 'react-native';


const AnimPractice = () => {

    const progress = useRef(new Animated.Value(0.5)).current
    const scale = useRef(new Animated.Value(1)).current


    useEffect(() => {
        
        Animated.sequence([
            Animated.spring(progress, { toValue: 1, useNativeDriver: true} ).start(),
            Animated.spring(progress, { toValue: 0.5, useNativeDriver: true} ).start()
        ]).start();

        Animated.sequence([
            Animated.spring(scale, { toValue: 2, useNativeDriver: true}).start(),
            Animated.spring(progress, { toValue: 1, useNativeDriver: true} ).start()
        ]).start();
        

    },[])

    return (
        <View style={styles.container}>
            <Animated.View style={[styles.square, 
                {
                    borderRadius: progress.interpolate({inputRange: [0.5, 1], outputRange: [(0.5 * SIZE) / 2, (1 * SIZE) / 2]}),
                    opacity: progress, 
                    transform: [{ scale }, { rotate: progress.interpolate({inputRange: [0.5, 1] , outputRange: [0.5 * 2 * Math.PI, 1 * 2 * Math.PI]})}]
                }
            ]} 
            />
        </View>
    );
}

const SIZE = 100;

const styles = StyleSheet.create({
    
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: "center",
        justifyContent: "center"
    },
    square: {
        width: SIZE,
        height: SIZE,
        backgroundColor: "orange",
    }
})

export default AnimPractice;

All I can say is that its a good job the office doesn't have windows or the computer would have gone out of one around lunchtime! Any help would be gratefully accepted.