He estado tratando de aprender a usar la API animada, pero me he encontrado con tiempos de espera de respuesta de red inexplicables después de que la aplicación arroja un error como.

TypeError: undefined no es un objeto (evaluando 'animations[current].start') o Invariant Violation: Transform con la clave de "rotate" debe ser una cadena: {"rotate":3.141592653589793}

Estoy usando Android Studio para emular un dispositivo para mostrar la aplicación, pero estoy trabajando en la aplicación y ejecutando la exposición desde el código VS.

Incluso si elimino la instancia de la exposición en la consola y la vuelvo a cargar con un componente diferente que no contiene las animaciones en las que estaba trabajando, aparece una pantalla azul en el dispositivo emulado que dice "Algo salió mal, se agotó el tiempo de respuesta de la red".

lo extraño es que inexplicablemente comenzará a funcionar nuevamente después de repetidas actualizaciones y reinicios, luego de lo cual creará un nuevo paquete y funcionará, hasta que se arroje otro error y luego se rompa nuevamente, lo que hace que la depuración sea bastante desafiante.

código en el que estoy trabajando es:

 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;

¡Todo lo que puedo decir es que es un buen trabajo que la oficina no tenga ventanas o la computadora se habría quedado sin una a la hora del almuerzo! Cualquier ayuda será aceptada con gratitud.