While a Pressable button component is pressed, I change the backgroundColor of a buton to a different color. How can I add some sort of animation?

user_8618818 0
Viewed 74

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;
react-native reactjs javascript
2 Answers

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

user_113553030

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

} }

user_192471770
Related