Tengo un componente de botón y cambio su color de fondo a un color diferente mientras está presionado, pero el cambio ocurre instantáneamente y me preguntaba si es posible agregar un poco de animación que haga que el cambio de color sea más suave.
El cambio de color ocurre aquí:
{ ...(variant === 'tertiary' && isPressed ? { backgroundColor: colors.primary50 } : {}) },El componente del botón:
const PrimaryButton: FunctionComponent<Props> = ({ title, variant = 'primary', wide = false, style, ...rest }) => { const width = wide ? '100%' : undefined; const textColor = variant === 'primary' ? colors.white : colors.primary600; return ( <Pressable style={({ pressed: isPressed }) => [ styles.button, styles[variant], { width, elevation: isPressed ? 5 : 0, }, style, { ...(variant === 'tertiary' && isPressed ? { backgroundColor: colors.primary50 } : {}) }, ]} {...rest} > <HeaderText variant="h4" style={[styles.text, { color: textColor }]}> {title} </HeaderText> </Pressable> ); }; const styles = StyleSheet.create({ button: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 100, borderWidth: 1.5, justifyContent: 'center', alignItems: 'center', alignSelf: 'center', }, primary: { backgroundColor: colors.primary600, borderColor: colors.primary600, }, secondary: { backgroundColor: colors.white, borderColor: colors.primary600, }, tertiary: { backgroundColor: 'transparent', borderColor: 'transparent', }, text: { textAlign: 'center', }, }); export default PrimaryButton;Puedes probar lo siguiente:
import React, { useRef } from "react"; import { Button, Image, StyleSheet, Text, View, Animated, TouchableOpacity } from "react-native"; function App() { const color = useRef(new Animated.Value(0)).current; let newColor = color.interpolate({ inputRange: [0, 1], outputRange: ["rgba(255, 255, 255, 1)", "rgba(0, 255, 0, 1)"] }); const pressFunc = () => { Animated.timing(color, { toValue: 1, duration: 2000 }).start(); }; return ( <View style={styles.app}> <TouchableOpacity onPress={pressFunc}> <Text>Press</Text> </TouchableOpacity> <Animated.View style={[ styles.logo, { backgroundColor: newColor } ]} /> </View> ); } const styles = StyleSheet.create({ app: { marginHorizontal: "auto", maxWidth: 500, flex: 1 }, logo: { height: 100, width: 100 }, });Espero eso ayude. conectate si no entiendes nada
puede usar yarn add react-native-animatable import * as Animatable from "react-native-animatable";
exportar el índice de clase predeterminado extiende el componente {
renderizar() { devolver (
<View style={{ alignItems: "center" }}> <Animatable.View style={styles.card} animation="slideInDown" iterationCount={5} direction="alternate"> <Text style={styles.whiteText}>slideInDown Animation</Text> </Animatable.View> </View> </SafeAreaView> );} }