How to change the speed of the color switch when button is clicked?

user_18085389 0
Viewed 163

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>
  );
}
expo react-native javascript
2 Answers

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>
  );
}
user_170289700

This may be silly, but have you tried adding:

transitionDuration: 5s

to style attribute?

user_180373410
Related