I made this code below that when you click the button the colors change. But I don't want the color change to happen instantly I want it to slowly change from one color to the next, like should take 5 seconds.
export default function App() {
const [colorIsRed,setColorIsRed] = React.useState(false);
return (
<View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"black"}}>
<TouchableOpacity
style={{
width:100,
height:100,
borderRadius:20,
backgroundColor:colorIsRed?"red":"white",
borderWidth:1,
borderColor:colorIsRed?"white":"red",
}}
onPress={()=>{setColorIsRed(!colorIsRed)}}>
</TouchableOpacity>
</View>
);
}
What you need to do is take advantage of the Animated library in react-native. Here's a full example (https://snack.expo.dev/hXW2jw7yN). And below is the code explained with code comments.
export default function App() {
/**
* This is the animated value that keeps track of the
* progess of the animation
*/
const progress = React.useRef(new Animated.Value(0)).current;
/**
* Function to be called on button press
*/
const onPress = ()=>{
/**
* Runs a timing animation that moves the progress value to 1 or 0
* in 3 seconds
*/
Animated.timing(progress,{
toValue:progress._value===1?0:1, // If progress is 1 then set to 0 else set to 1
duration:3000, // Five seconds
}).start()
}
/**
* Uses the progess value to interpolate the color,
* this will "slowly change from one color to the next".
* Please search interpolate online and learn more
*
*/
const bgColor = progress.interpolate({
inputRange:[0,1],
outputRange:["white","red"]
})
const borderColor = progress.interpolate({
inputRange:[0,1],
outputRange:["red","white"]
})
return (
<View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"black"}}>
<TouchableOpacity
onPress={onPress}>
<Animated.View style={{
width:100,
height:100,
borderRadius:20,
backgroundColor:bgColor,
borderColor:borderColor
}}>
</Animated.View>
</TouchableOpacity>
</View>
);
}
This may be silly, but have you tried adding:
transitionDuration: 5s
to style attribute?