Estoy tratando de hacer algo extremadamente simple: hacer que mi botón sea transparente mientras no está presionado y cambiar su color de fondo a un color diferente gradualmente cuando un usuario lo presiona. Para lograr eso, estoy usando React Native Reanimated. Desafortunadamente, hay algo mal con mi animación y no estoy seguro de qué. El asunto es este:

Cambio isPressed a verdadero cuando se presiona el botón y a falso cuando el usuario aleja el dedo del botón. Luego uso ese booleano isPressed para cambiar el progreso y finalmente uso ese progreso para interpolar el color de transparente a mi otro color. Lamentablemente lo que sucede es esto:

Presiono el botón y en lugar de que el botón cambie su color de fondo casi instantáneamente, tarda como 5 segundos antes de cambiar a colors.primary50. Luego, si dejo de presionar el botón, toma otros 5 o más segundos para volver a ser transparente. Además, realmente no veo un cambio gradual en el color, solo cambia instantáneamente.

 const TertiaryButton: FunctionComponent<Props> = ({ title, wide = false, style, ...rest }) => { const [isPressed, setIsPressed] = useState(false); const progress = useSharedValue(0); useEffect(() => { progress.value = withTiming(isPressed ? 1 : 0, { easing: Easing.out(Easing.cubic), duration: 1000 }); }, [isPressed, progress]); const rStyle = useAnimatedStyle(() => { const backgroundColor = interpolateColor(progress.value, [0, 1], ['transparent', colors.primary50]); return { backgroundColor }; }); return ( <Pressable onPressIn={() => setIsPressed(true)} onPressOut={() => setIsPressed(false)} {...rest}> <Button wide={wide} style={[ style, { ...rStyle, }, ]} > <ButtonText variant="h4">{title}</ButtonText> </Button> </Pressable> ); };