Combining some style animations does not work with pan gestures on web

[rcoppolo]

Description

I'm trying to animate a component's transform.translateX/Y and its height/width based off a pan gesture (I want to support resizing/moving a rectangle), and this doesn't seem to work well on web. During the pan gesture, the animation for each style seems to happen independently and sporadically flashes between them.

If I'm doing something wrong/weird here would love to hear it! I'm not running into this problem on iOS, though, so my hunch is something is off with web.

Not sure if this is a duplicate of #2019.

Expected behavior

Expect both style animations to maintain their shared values and animate smoothly over the course of the gesture.

Actual behavior & steps to reproduce

I can reproduce this behavior just by adding an additional animated width style to the DragAndSnapExample example component:

  const stylez = useAnimatedStyle(() => {
    const H = Math.round(
      interpolate(translation.x.value, [0, 300], [0, 360], Extrapolate.CLAMP)
    );
    const S = Math.round(
      interpolate(translation.y.value, [0, 500], [100, 50], Extrapolate.CLAMP)
    );
    const backgroundColor = `hsl(${H},${S}%,50%)`;
    return {
      transform: [
        {
          translateX: translation.x.value,
        },
        {
          translateY: translation.y.value,
        },
      ],
      backgroundColor,
      width: translation.y.value + 40, // new code to repro issue
    };
  });

Panning the element vertically should animate the element's width. This works OK with a translateY transform, but with a translateX transform (i.e. panning horizontally) the element flickers between the original width and the animated width.

Bug.mov

Snack or minimal code example

Snack with the above change to DragAndSnapExample: https://snack.expo.io/Pl0TTMZD-

Package versions

• Expo: 41.0.1
• React Native Reanimated: 2.1.0
• React Native Gesture Handler: 1.10.2

Affected platforms

• Android
• iOS
• Web

[github-actions]

Issue validator

The issue is valid!

[piaskowyk]

This look like an issue related to react-native-web - necolas/react-native-web#1935

[rcoppolo]

@piaskowyk Thanks, you are correct. I manually applied your (now reverted) patch and that solved this issue.