What is wrong with my React Native Reanimated colour interpolation animation?

Question

I'm trying to do something extremely simple - have my button be transparent while not pressed, and change its background color to a different colour gradually when a user presses it. To achieve that, I'm using React Native Reanimated. Unfortunately, there's something wrong with my animation and I'm not sure what. The issue is this:

I change isPressed to true when the button is pressed and to false when the user moves his finger away from the button. Then I use that isPressed boolean to change the progress and finally use that progress to interpolate the colour from transparent to my other colour. Sadly what happens is this:

I press on the button and instead of the button changing its background color almost instantly, it takes like 5 seconds before turning to colors.primary50. Then if I unpress the button, it takes another 5 or so seconds to turn back to transparent. Also I don't really see gradual change in color, it just changes instantly.

const TertiaryButton: FunctionComponent<Props> = ({ title, wide = false, style, ...rest }) => {
    const [isPressed, setIsPressed] = useState(false);

    const progress = useSharedValue(0);

    useEffect(() => {
        progress.value = withTiming(isPressed ? 1 : 0, { easing: Easing.out(Easing.cubic), duration: 1000 });
    }, [isPressed, progress]);

    const rStyle = useAnimatedStyle(() => {
        const backgroundColor = interpolateColor(progress.value, [0, 1], ['transparent', colors.primary50]);

        return { backgroundColor };
    });

    return (
        <Pressable onPressIn={() => setIsPressed(true)} onPressOut={() => setIsPressed(false)} {...rest}>
            <Button
                wide={wide}
                style={[
                    style,
                    {
                        ...rStyle,
                    },
                ]}
            >
                <ButtonText variant="h4">{title}</ButtonText>
            </Button>
        </Pressable>
    );
};

score 1 · Answer 1 · edited Jun 14 '22 at 15:22

1

Try to change the progress value instantly inside onPressIn and onPressOut.

onPressOut={() => {
  console.log("onPressOut")
  isPressed.value = withTiming(0)
}}

onPressIn={() => {
  console.log("onPressIn")
  isPressed.value = withTiming(1)
}}

edited Jun 14 '22 at 15:22

Skatox

4,237
12
42
47

answered Jun 14 '22 at 14:51

yarbasha

11
1

score 0 · Answer 2 · answered Sep 23 '22 at 22:32

The possible reason for this not working is that the Button component may not be an Animated component. You need to make sure that Button is an animated component. If it's a custom/library component, you can wrap it with Animated.createAnimatedComponent(...) to make it an Animated component:

const AnimatedButton = Animated.createAnimatedComponent(Button);

What is wrong with my React Native Reanimated colour interpolation animation?

2 Answers2