Cannot manipulate `width` and `height` properties with `useAnimatedStyle` on Web.

Description

I’m try to make a resizable & draggable component with reanimated V2.

when I try to manipulate a height with useAnimatedGestureHandler, It does not apply to component height property on web. but when I try to same animation again, The height value is still preserved. I have no idea what is going on. It work well on ios and android.

Expected behavior

width and height properties are manipulated well with useAnimatedGestureHandler on PanGestureHandler.

Actual behavior & steps to reproduce

The behavior are presented below.

Snack or minimal code example

below video is recorded on web.

And this is my code.

 const TOUCH_AREA_INSET = 10;

 const DEFAULT_HEIGHT = 200;
 const DEFAULT_WIDTH = 200;

 const minWidth = DEFAULT_WIDTH / 3;
 const minHeight = DEFAULT_HEIGHT / 3;

 const translateX = useSharedValue((maxWidth - DEFAULT_WIDTH) / 2);
 const translateY = useSharedValue((maxHeight - DEFAULT_HEIGHT) / 2);
 const windowHeight = useSharedValue(DEFAULT_HEIGHT);
 const windowWidth = useSharedValue(DEFAULT_WIDTH);

const topHandler = useAnimatedGestureHandler<
    PanGestureHandlerGestureEvent,
    {
      windowHeight: number;
      offsetY: number;
    }
  >({
    onStart: (_, ctx) => {
      ctx.windowHeight = windowHeight.value;
      ctx.offsetY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateY.value = clamp(
        windowHeight.value === minHeight
          ? ctx.offsetY + ctx.windowHeight - minHeight
          : ctx.offsetY + event.translationY,
        0,
        maxHeight - windowHeight.value,
      );

      windowHeight.value = clamp(
        translateY.value === 0
          ? ctx.windowHeight + ctx.offsetY
          : ctx.windowHeight - event.translationY,
        minHeight,
        maxHeight,
      );
    },
    onEnd: () => {
      runOnJS(setDimentionOnUI_JS)(
        windowWidth.value,
        windowHeight.value,
        translateX.value,
        translateY.value,
      );
    },
  });

  const dragHandler = useAnimatedGestureHandler<
    PanGestureHandlerGestureEvent,
    {
      offsetX: number;
      offsetY: number;
    }
  >({
    onStart: (_, ctx) => {
      ctx.offsetX = translateX.value;
      ctx.offsetY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateX.value = clamp(
        ctx.offsetX + event.translationX,
        0,
        maxWidth - windowWidth.value,
      );

      translateY.value = clamp(
        ctx.offsetY + event.translationY,
        0,
        maxHeight - windowHeight.value,
      );
    },
    onEnd: () => {
      runOnJS(setDimentionOnUI_JS)(
        windowWidth.value,
        windowHeight.value,
        translateX.value,
        translateY.value,
      );
    },
  });

  const resizeTopAnimStyle = useAnimatedStyle(() => ({
    position: 'absolute',
    transform: [
      {
        translateX: translateX.value + TOUCH_AREA_INSET * 1.75,
      },
      {
        translateY: translateY.value - TOUCH_AREA_INSET * 1.75,
      },
    ],
    height: TOUCH_AREA_INSET * 3.5,
    width: windowWidth.value - TOUCH_AREA_INSET * 3.5,
    backgroundColor: 'green',
  }));

  const windowAnimStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: translateX.value,
        },
        {
          translateY: translateY.value,
        },
      ],
      height: windowHeight.value,
      width: windowWidth.value,
    };
  });

  return (
    <Container>
      <PanGestureHandler onGestureEvent={dragHandler}>
        <Animated.View
          style={[
            {
              borderWidth: 2,
              borderColor: 'white',
              backgroundColor: 'red',
            },
            windowAnimStyle,
          ]}
        />
      </PanGestureHandler>
      <PanGestureHandler onGestureEvent={topHandler}>
        <Animated.View style={resizeTopAnimStyle} />
      </PanGestureHandler>
    </Container>
  );

Package versions

• React Native: 0.63
• React Native Reanimated: ~2.2.0
• NodeJS: 14.15
• Xcode:
• Java & Gradle:

I’m using expo sdk 42. and below is relate packages.

    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.3",
    "react-native-pager-view": "5.0.12",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-svg": "12.1.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-touchable-scale": "^2.1.2",
    "react-native-web": "~0.17.1",

Thank you all in advance.

Affected platforms

• Android
• iOS
• Web

[piaskowyk]

Yes, this was a problem with setNativeProps from react-native-web. We patched this method here #2280, these changes will be available in next release.

[piaskowyk]

Probably fixed with this: https://github.com/software-mansion/react-native-reanimated/pull/2280 I will check this