Web Support

[nandorojo]

Just opening for future reference. I'm getting this error on web: software-mansion/react-native-reanimated#1951

I'll see if there's a fix.

[nandorojo]

This patch fixes (almost all of) it on web:

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) => {

This comes included in Reanimated 2.3. The only thing not working for me exactly right is the cursor, so I'll look into that.

I'm mind blown by how good it looks on web.

[nandorojo]

I'll keep posting updates here so we can track the status.

This is pretty good imo. Looks like it animates properly the first one-two times, and then starts flickering after that.

Screen.Recording.2021-10-07.at.3.43.13.PM.mov

But those first times, it's indistinguishable from native. So it seems like the fixes here could be trivial.

I'm also seeing amazing looks from the cross hair, but the line doesn't seem to stretch the height properly, so I'll investigate that.

Screen.Recording.2021-10-07.at.3.49.57.PM.mov

One thing I'm thinking is that it might help to disable animations for transitioning between charts, until it works properly on web. I tried the animationDuration prop, but it looks like that controls the path's horizontal animation when isActive is toggled, so I'll keep trying to disable the chart transitions.

Overall, this is looking very promising to me.

[nandorojo]

Opened a PR to close this at #9