feat: create web components and handle web events

apps/examples/src/examples/PanResponder.tsx

@@ -1,72 +1,57 @@
-import React, {PureComponent} from 'react';
-import {
-  Animated,
-  PanResponder,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import {G, Line, Path, Polyline, Svg, Text} from 'react-native-svg';
+import React, {Component} from 'react';
+import {Animated, PanResponder, View} from 'react-native';
+import {G, Line, Path, Polyline, Text, Svg} from 'react-native-svg';
 
 const AnimatedSvg = Animated.createAnimatedComponent(Svg as any);
 
-const zeroDelta = {x: 0, y: 0};
-
-class PanExample extends PureComponent {
+class PanExample extends Component {
   static title = 'Bind PanResponder on the SVG Shape';
-  panXY: any;
-  constructor(props: {}, context: {}) {
-    super(props, context);
-    const xy = new Animated.ValueXY();
-    const {x: dx, y: dy} = xy;
-    let offset = zeroDelta;
-    xy.addListener(flatOffset => {
-      offset = flatOffset;
-    });
-    const {panHandlers} = PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponderCapture: () => true,
-      onPanResponderGrant: () => {
-        xy.setOffset(offset);
-        xy.setValue(zeroDelta);
-      },
-      onPanResponderMove: Animated.event([null, {dx, dy}], {
-        useNativeDriver: false,
-      }),
+  pan: Animated.ValueXY;
+  panResponder: any;
+  constructor(props: {}) {
+    super(props);
+
+    this.pan = new Animated.ValueXY();
+
+    this.panResponder = PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event(
+        [null, {dx: this.pan.x, dy: this.pan.y}],
+        {useNativeDriver: false},
+      ),
       onPanResponderRelease: () => {
-        xy.flattenOffset();
+        this.pan.extractOffset();
       },
     });
-    this.panXY = {
-      style: {
-        transform: xy.getTranslateTransform(),
-      },
-      ...panHandlers,
-    };
   }
   render() {
     return (
-      <TouchableWithoutFeedback>
-        <View>
-          <AnimatedSvg height="200" width="200" {...this.panXY}>
-            <Path
-              d="M50,5L20,99L95,39L5,39L80,99z"
-              stroke={'black'}
-              fill={'red'}
-              strokeWidth="6"
-              scale="0.8"
-            />
-            <Text
-              fontSize="20"
-              fontWeight="bold"
-              fill="blue"
-              textAnchor="middle"
-              x="40"
-              y="80">
-              STAR
-            </Text>
-          </AnimatedSvg>
-        </View>
-      </TouchableWithoutFeedback>
+      <View>
+        <AnimatedSvg
+          height="200"
+          width="200"
+          style={{
+            transform: [{translateX: this.pan.x}, {translateY: this.pan.y}],
+          }}
+          {...this.panResponder.panHandlers}>
+          <Path
+            d="M50,5L20,99L95,39L5,39L80,99z"
+            stroke={'black'}
+            fill={'red'}
+            strokeWidth="6"
+            scale="0.8"
+          />
+          <Text
+            fontSize="20"
+            fontWeight="bold"
+            fill="blue"
+            textAnchor="middle"
+            x="40"
+            y="80">
+            STAR
+          </Text>
+        </AnimatedSvg>
+      </View>
     );
   }
 }

apps/examples/src/examples/TouchEvents.tsx

@@ -23,15 +23,15 @@ class PressExample extends Component {
           cy="50%"
           r="38%"
           fill="red"
-          onPress={() => Alert.alert('Press on Circle')}
+          onPress={() => console.log('Press on Circle')}
         />
         <Rect
           x="20%"
           y="20%"
           width="60%"
           height="60%"
           fill="blue"
-          onLongPress={() => Alert.alert('Long press on Rect')}
+          onLongPress={() => console.log('Long press on Rect')}
         />
         <Path d="M50,5L20,99L95,39L5,39L80,99z" fill="pink" />
       </Svg>

package.json

@@ -112,6 +112,7 @@
     "react": "^18.2.0",
     "react-native": "^0.72.3",
     "react-native-builder-bob": "^0.20.4",
+    "react-native-web": "^0.19.10",
     "react-native-windows": "^0.72.4",
     "react-test-renderer": "^18.2.0",
     "release-it": "^14.12.5",