make reanimated work in web (#1886)

Up until now, trying to use reanimated with react-native-svg in react-native-web resulted in an error.
This adds a setNativeProps function to the web implementation to directly modify the transform and style props on a SVGElement ref.

Since there is a need to track the "last merged props" and those need to be reset on every render, the render method has been moved into the WebShape class and a tag string property has been added.

As g had some extra handling for x and y, a prepareProps function was added as well.

Example/babel.config.js

@@ -1,3 +1,7 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    '@babel/plugin-proposal-export-namespace-from',
+    'react-native-reanimated/plugin',
+  ],
 };

Example/package.json

@@ -16,6 +16,7 @@
     "react": "18.1.0",
     "react-dom": "^18.2.0",
     "react-native": "0.70.0",
+    "react-native-reanimated": "^2.10.0",
     "react-native-svg": "link:../",
     "react-native-web": "^0.17.7"
   },

Example/src/App.tsx

@@ -112,6 +112,7 @@ const names: (keyof typeof examples)[] = [
   'TouchEvents',
   'PanResponder',
   'Reusable',
+  'Reanimated',
 ];
 
 const initialState = {

Example/src/examples.tsx

@@ -15,6 +15,7 @@ import * as Image from './examples/Image';
 import * as Reusable from './examples/Reusable';
 import * as TouchEvents from './examples/TouchEvents';
 import * as PanResponder from './examples/PanResponder';
+import * as Reanimated from './examples/Reanimated';
 
 export {
   Svg,
@@ -34,4 +35,5 @@ export {
   TouchEvents,
   Reusable,
   PanResponder,
+  Reanimated,
 };

Example/src/examples/Reanimated.tsx

@@ -0,0 +1,42 @@
+import React, {useEffect} from 'react';
+import {StyleSheet, Text} from 'react-native';
+import Reanimated, {
+  useAnimatedProps,
+  useSharedValue,
+  withRepeat,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import {Svg, Rect} from 'react-native-svg';
+
+const ReanimatedRect = Reanimated.createAnimatedComponent(Rect);
+
+function ReanimatedRectExample() {
+  const height = useSharedValue(10);
+  const position = useSharedValue(0);
+
+  useEffect(() => {
+    height.value = withRepeat(withSpring(100), -1, true);
+    position.value = withRepeat(withTiming(300, {duration: 5000}), -1);
+  });
+  const animatedProps = useAnimatedProps(() => ({
+    width: 30,
+    height: height.value,
+    x: position.value,
+    y: 20,
+  }));
+
+  return (
+    <Svg height="150" width="300">
+      <ReanimatedRect animatedProps={animatedProps} fill="red" />
+    </Svg>
+  );
+}
+ReanimatedRectExample.title = 'reanimated rectangle';
+
+const samples = [ReanimatedRectExample];
+
+const style = StyleSheet.create({text: {width: 30, height: 30}});
+const icon = <Text style={style.text}>R</Text>;
+
+export {icon, samples};

Example/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../tsconfig.json",
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "skipLibCheck": true
+  }
 }

Example/webpack.config.js

@@ -23,6 +23,7 @@ module.exports = {
           fromRoot('index.js'),
           fromRoot('src'),
           fromRoot('node_modules/react-native-svg'),
+          fromRoot('node_modules/react-native-reanimated'),
         ],
       },
       {
@@ -52,4 +53,5 @@ module.exports = {
       '.jsx',
     ],
   },
+  plugins: [new (require('webpack').DefinePlugin)({process: {env: {}}})],
 };

Example/yarn.lock

@@ -578,6 +578,13 @@
     "@babel/helper-create-regexp-features-plugin" "^7.19.0"
     "@babel/helper-plugin-utils" "^7.19.0"
 
+"@babel/plugin-transform-object-assign@^7.16.7":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
+  integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-object-super@^7.0.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
@@ -699,7 +706,7 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-flow-strip-types" "^7.18.6"
 
-"@babel/preset-typescript@^7.13.0":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
   integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
@@ -1440,6 +1447,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/invariant@^2.2.35":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -5253,6 +5265,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -6544,6 +6561,19 @@ react-native-gradle-plugin@^0.70.2:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.2.tgz#b5130f2c196e27c4c5912706503d69b8790f1937"
   integrity sha512-k7d+CVh0fs/VntA2WaKD58cFB2rtiSLBHYlciH18ncaT4N/B3A4qOGv9pSCEHfQikELm6vAf98KMbE3c8KnH1A==
 
+react-native-reanimated@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.10.0.tgz#ed53be66bbb553b5b5e93e93ef4217c87b8c73db"
+  integrity sha512-jKm3xz5nX7ABtHzzuuLmawP0pFWP77lXNdIC6AWOceBs23OHUaJ29p4prxr/7Sb588GwTbkPsYkDqVFaE3ezNQ==
+  dependencies:
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    "@types/invariant" "^2.2.35"
+    invariant "^2.2.4"
+    lodash.isequal "^4.5.0"
+    setimmediate "^1.0.5"
+    string-hash-64 "^1.0.3"
+
 "react-native-svg@link:..":
   version "0.0.0"
   uid ""
@@ -7353,6 +7383,11 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
+string-hash-64@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
+  integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"