Hice este código debajo de que cuando haces clic en el botón, los colores cambian. Pero no quiero que el cambio de color suceda instantáneamente, quiero que cambie lentamente de un color al siguiente, como si tomara 5 segundos.
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> ); }Lo que debe hacer es aprovechar la biblioteca Animated en react-native. Aquí hay un ejemplo completo ( https://snack.expo.dev/hXW2jw7yN ). Y debajo está el código explicado con comentarios de código.
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> ); }Esto puede ser una tontería, pero ¿has intentado agregar:
transitionDuration: 5sal atributo de estilo?