Migrate away from setNativeProps on web

[tomekzaw]

Summary

This draft PR moves off of setNativeProps in favor of editing DOM nodes directly.

Closes #4335, related to #2756.

Test plan

App.tsx

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  cancelAnimation,
  withRepeat,
  interpolateColor,
} from 'react-native-reanimated';
import { View, StyleSheet } from 'react-native';
import React, { useEffect } from 'react';

export default function AnimatedStyleUpdateExample(): React.ReactElement {
  const randomWidth = useSharedValue(0);

  useEffect(() => {
    cancelAnimation(randomWidth);
    randomWidth.value = withRepeat(withTiming(1), -1, true);
  }, [randomWidth]);

  const style = useAnimatedStyle(() => {
    return {
      width: randomWidth.value * 100,
      height: randomWidth.value * 100,
      backgroundColor: interpolateColor(
        randomWidth.value,
        [0, 1],
        ['red', 'lime']
      ),
      transform: [{ rotate: `${randomWidth.value * 180}deg` }],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={style} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Nagranie.z.ekranu.2023-05-15.o.13.45.19.mov

[chrisedington]

Thank you for this @tomekzaw

[macrozone]

thx @tomekzaw , is there an easy way to test this in moti?

would love to get this to work in nextjs!

[nandorojo]

If you use patch-package, you can test it by editing this reanimated file in your node_modules: https://github.com/software-mansion/react-native-reanimated/pull/4352/files#diff-c91126f95c199aee12f3e0909df9a49ccb8bfd7c529a1430446df596e2c71330

Then yarn patch-package react-native-reanimated and yarn next

[iwash0120]

@tomekzaw Thank you!
Does this support transforms?
I tried but could not use it.

EDITED:
Sorry, I changed it a bit and was able to handle it.

import createReactDOMStyle from 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle';
// Added.
import { createTransformValue } from 'react-native-web/dist/exports/StyleSheet/preprocess';

...

const domStyle = createReactDOMStyle(currentStyle);
for (const key in domStyle) {
  (component.style as StyleProps)[key] = domStyle[key];
}
// Added.
if (currentStyle.transform) {
  (component.style as StyleProp).transform = createTransformValue(currentStyle.transform);
}
```

[alantoa]

We should handle this situation specifically because react-native-web has already removed array transform. You can check it out here.

Something just like this:

import { createTransformValue } from 'react-native-web/dist/exports/StyleSheet/preprocess';

for (const key in domStyle) {
  if(key === 'transform') {
      (component.style).transform = createTransformValue(domStyle[key]);
  }else{
      (component.style)[key] = domStyle[key];
  }
}

[nandorojo]

does the current RNW function not account for it?

[alantoa]

Uunfortunately no. If you don't use createTransformValue, useAnimatedStyle will not work.

[tomekzaw]

Thanks @y120sb and @alantoa, added transform array support in 551f37a

[piaskowyk]

In overall looks great 😊
I just posted some questions just to be sure.

[chrisedington]

Thanks @tomekzaw for the efforts.

[nandorojo]

I think it would be better to require this in the conditional itself, rather than at the root. I'm not sure if try catch requires work with Webpack and most parsers.

[tomekzaw]

Yep, you're right, already done in #4473.