interpolateColor and withTiming with duration < 250ms dont work in web

Description

When doing a withTiming color animation on web with less than 250 in duration and a scale withSpring animation it reverts to first color on completion

Using interpolateColor function from react-native-reanimated but tested with the one from react-native-redash and same issue

Screenshots

Web example with error

working example on emulator

Steps To Reproduce

Expected behavior

Row should turn green in web

Actual behavior

Row goes back to background color

Snack or minimal code example

here below is the component getting set active on press. Removed other animations for simplicty

export const EmojiButton = ({active, onPress}) => {
  const theme = useTheme();

  const color = useSharedValue(0);
  const scale = useSharedValue(1);

  useEffect(() => {
    if (active) {
      color.value = withTiming(2, {duration: 249, easing: Easing.linear});
      scale.value = withSpring(1.2, {stiffness: 400, damping: 10});
    } else {
      color.value = 0;
      scale.value = 1;
    }
  }, [active]);

  const animationStyles = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        color.value,
        [0, 1, 2],
        [theme.backgroundColor, theme.buttonPressedColor, theme.primaryColor],
      ),
      transform: [
        {
          scaleY: scale.value,
        },
      ],
    };
  }, [theme]);

  return (
    <Pressable onPress={onPress}>
      <Animated.View
        style={[
          {
            height: 80,
            borderBottomColor: theme.dividerColor,
            borderBottomWidth: 1,
          },
          animationStyles,
        ]}
      />
    </Pressable>
  );
};

Package versions

• React: 6.13.1
• React Native: 0.63.3
• React Native Reanimated: react-native-reanimated@2.0.0-alpha.9
• NodeJS: 14.15.0
• react-native-web@0.14.7

[piaskowyk]

My PR for react-native-web with the fix of this issue is on the roadmap to release RNW. I suppose It’ll be merged within the next release of RNW.

[piaskowyk]

The issue is the effect of changes in react-native-web 0.13. The RNW team removed forwardedRef props. 😔
We wait for patch and stay with version 0.12. More information here and here