I'm trying to animate a Button's borderColor in React Native and I got it workin. In my app's context this button opens an intent to leave the app, but when it comes back to the app I get an error:"Attempting to run JS driven animation on animated node that has been moved to "native" earlier by starting an animation with 'useNativeDriver: true'..Also the animation stops and the solutions on Looping a react native animated animation did not work for me.Here is my code:
import React, {FunctionComponent, useState} from 'react'import {TouchableOpacity} from 'react-native-gesture-handler'import {Animated, AppState, Text} from 'react-native'interface ButtonProps { title: string action: any}export const SecondaryRoundButton: FunctionComponent<ButtonProps> = ({ title, action,}) => { const [animation, setAnimation] = useState(new Animated.Value(0)) // AppState.addEventListener('change', status => { // if (status === 'background') springAnimation.stop() // // if (status === 'active') springAnimation.reset() // // console.log('app state changed to: ', status) // }) Animated.timing(animation, { toValue: 1, duration: 3000, useNativeDriver: false, }).start() const boxInterpolation = animation.interpolate({ inputRange: [0, 0.5, 1], outputRange: ['rgb(100,255,100)', 'rgb(100, 0, 100)', 'rgb(100,255,100)'], }) return (<TouchableOpacity style={{ height: 65, width: 185, borderColor: boxInterpolation, borderWidth: 4, alignItems: 'center', justifyContent: 'center', padding: 2, margin: 20, borderRadius: 100, }} onPress={action}><Text style={{color: 'white', fontWeight: '900', fontSize: 24}}> {title}</Text></TouchableOpacity> )}