Fixed setNativeProps for web

[jmysliv]

Description

setNativeProps method was ignoring previously changed style, so before the method call, I merge the current style with the previous one to overcome this issue. Detailed description: necolas/react-native-web#1935

Changes

• added merging current style with previous one, before setNativeProps call

Screenshots / GIFs

Before

before.mov

After

after.mov

[chakravarthy-mm]

Shouldn't this be viewRef.current._component?
I was trying to use with next.js and while debugging viewRef._component is always undefined
@piaskowyk

[chakravarthy-mm]

Sorry, I thought I installed 2.2.4

[nandorojo]

I'm seeing this bug on 2.2.4 when used with SVG animations.

@piaskowyk Is it possible 2.2.4 doesn't include the patch from #2053 that fixed animated SVGs?

If I revert back to 2.2.0, and add this patch in my app, my SVG animations are fixed:

diff --git a/node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/index.web.js b/node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/index.web.js
index 76e1dc0..46aa7bf 100644
--- a/node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/index.web.js
+++ b/node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/index.web.js
@@ -11,7 +11,22 @@ export const _updatePropsJS = (_viewTag, _viewName, updates, viewRef) => {
             acc[index][key] = value;
             return acc;
         }, [{}, {}]);
-        viewRef.current._component.setNativeProps({ style: rawStyles });
+        if (typeof viewRef.current._component.setNativeProps === 'function') {
+          viewRef.current._component.setNativeProps({ style: rawStyles });
+        } else if (Object.keys(viewRef.current._component.props).length > 0) {
+          Object.keys(viewRef.current._component.props).forEach((key) => {
+            if (!rawStyles[key]) {
+              return;
+            }
+            const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+            viewRef.current._component._touchableNode.setAttribute(
+              dashedKey,
+              rawStyles[key]
+            );
+          });
+        } else {
+          console.warn('It is not possible to manipulate component');
+        }
     }
 };
 global._setGlobalConsole = (_val) => {

[chakrihacker]

@nandorojo with next.js, mount animations with a settimeout around 200ms. With initial render I too saw the same error

[adamhari]

This is also breaking for me on web with the same error as @nandorojo with this component which only uses View and Text. Works on 2.2.3

const AnimatedErrorText = ({ error, style }: Props) => {
  const styles = useStyles();

  const animatedContainerStyles = useAnimatedStyle(() => ({
    height: withTiming(error ? 20 : 0, { duration: 600 }),
  }));

  const animatedTextStyles = useAnimatedStyle(() => ({
    opacity: withDelay(error ? 300 : 0, withTiming(error ? 1 : 0, { duration: 600 })),
  }));

  return (
    <Animated.View style={[styles.container, style, animatedContainerStyles]}>
      <Animated.Text style={[styles.text, animatedTextStyles]}>{error?.toString()}</Animated.Text>
    </Animated.View>
  );
};