I have a button component and I change its backgroundColor to a different colour while it is pressed but the change happens instantly and I was wondering if its possible to add some fade in animation that would make the colour change smoother.
The colour change happens here:
{ ...(variant === 'tertiary' && isPressed ? { backgroundColor: colors.primary50 } : {}) },
The button component:
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;
You can try the below :
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
},
});
Hope it helps. connect if you dont understand anything
you can use yarn add react-native-animatable
import * as Animatable from "react-native-animatable";
export default class index extends Component {
render() { return (
<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>
);
} }