chore: fix web-example app path and format examples (#2524)

# Summary

A minor change in web example app to fix SVG path and reformat examples
with prettier/lint

apps/common/test/PointerEventsBoxNone.tsx

@@ -45,8 +45,7 @@ export default function PointerEventsBoxNone() {
           top: 150,
           left: 75,
           transform: [{scale: 2}],
-        }}
+        }}>
-      >
         <Text style={{position: 'absolute', top: -25, left: 20, fontSize: 10}}>
           Try to touch the blue shape
         </Text>
@@ -61,8 +60,7 @@ export default function PointerEventsBoxNone() {
             top: 0,
             left: 0,
           }}
-          pointerEvents={pointerEvents}
+          pointerEvents={pointerEvents}>
-        >
           <Path
             opacity={1}
             pointerEvents={pointerEvents}
@@ -78,8 +76,7 @@ export default function PointerEventsBoxNone() {
           height={74}
           fill="none"
           pointerEvents={pointerEvents}
-          style={{top: 10, transform: [{scale: 1.5}]}}
+          style={{top: 10, transform: [{scale: 1.5}]}}>
-        >
           <Path
             opacity={1}
             pointerEvents={pointerEvents}
@@ -97,8 +94,7 @@ export default function PointerEventsBoxNone() {
           left: '50%',
           width: 150,
           transform: [{translateX: -75}],
-        }}
+        }}>
-      >
         <Button
           title="Toggle box-none property"
           onPress={() => setBoxNone(!boxNone)}

apps/common/test/Test1374.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 import Svg, {Circle, SvgXml} from 'react-native-svg';
 
 export default function App() {
@@ -10,7 +10,7 @@ export default function App() {
   <circle style=" " cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
 </svg>`;
 
-const svgg = `
+  const svgg = `
 <svg width="400" height="200">
   <polygon points="100 100, 180 100, 140 180" fill="black"></polygon>
   <polygon points="100 100, 180 100, 140 180" fill="red" transform="translate(0, 280), scale(1, -1)"></polygon>
@@ -20,16 +20,22 @@ const svgg = `
   return (
     <View style={{flex: 1}}>
       <Svg
-    width={100}
+        width={100}
-    height={100}
+        height={100}
-    viewBox="0 0 100 100"
+        viewBox="0 0 100 100"
-    transform={[{scaleX: 1}, {scaleY: -1}]}
+        transform={[{scaleX: 1}, {scaleY: -1}]}>
-      >
+        <Circle
-      <Circle cx={50} cy={50} r={40} stroke="black" strokeWidth={3} fill="red" />
+          cx={50}
-    </Svg>
+          cy={50}
-    <SvgXml xml={svgXmlWithTransform}/>
+          r={40}
-    <SvgXml xml={svgXmlWithEmptyStyle}/>
+          stroke="black"
-    <SvgXml xml={svgg}/>
+          strokeWidth={3}
-      </View>
+          fill="red"
+        />
+      </Svg>
+      <SvgXml xml={svgXmlWithTransform} />
+      <SvgXml xml={svgXmlWithEmptyStyle} />
+      <SvgXml xml={svgg} />
+    </View>
   );
 }

apps/common/test/Test1442.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {ImageLoadEventData, Platform, Image as RNImage} from 'react-native';
-import {Svg, Image} from 'react-native-svg';
+import {Image, Svg} from 'react-native-svg';
 
 export default function Test1442() {
   return <TestWithStrictSize />;

apps/common/test/Test1718.tsx

@@ -1,18 +1,23 @@
 import React from 'react';
-import { SvgUri } from 'react-native-svg';
+import {SvgUri} from 'react-native-svg';
-
 
 export default () => {
-  const [uri, setUri] = React.useState('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg')
+  const [uri, setUri] = React.useState(
+    'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg',
+  );
 
   return (
     <>
       <SvgUri
-        onError={() => setUri('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg')}
+        onError={() =>
+          setUri(
+            'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg',
+          )
+        }
         width="100"
         height="100"
         uri={uri}
       />
     </>
   );
-}
+};

apps/common/test/Test1813.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {SvgFromUri, SvgFromXml, SvgUri, SvgXml} from 'react-native-svg';
 import {
+  LocalSvg,
   SvgCss,
   SvgCssUri,
   SvgWithCss,
   SvgWithCssUri,
   WithLocalSvg,
-  LocalSvg,
 } from 'react-native-svg/css';
 
 const asset = require('./assets/ruby.svg');

apps/common/test/Test1845.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {SafeAreaView, useColorScheme} from 'react-native';
-import {Svg, Ellipse} from 'react-native-svg';
 import Animated, {
   createAnimatedPropAdapter,
   processColor,
@@ -9,6 +8,7 @@ import Animated, {
   withRepeat,
   withTiming,
 } from 'react-native-reanimated';
+import {Ellipse, Svg} from 'react-native-svg';
 
 const AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);
 

apps/common/test/Test2080.tsx

@@ -1,17 +1,32 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 import Svg, {Rect} from 'react-native-svg';
 
 export default function App() {
-
   return (
     <View style={{flex: 1}}>
       <Svg width="100%" height="100%" viewBox="0 0 56 56" color="red">
-          <Rect width="20" height="20" rx="4" fill="currentColor" opacity={0.2} />
+        <Rect width="20" height="20" rx="4" fill="currentColor" opacity={0.2} />
-          <Rect x="0" y="25" width="20" height="20" rx="4" fill="red" opacity={0.2} />
+        <Rect
-          <Rect x="25" y="0" width="20" height="20" rx="4" fill="red" />
+          x="0"
-          <Rect x="25" y="25" width="20" height="20" rx="4" fill="blue" fillOpacity="0.2"  />
+          y="25"
-        </Svg>
+          width="20"
-      </View>
+          height="20"
+          rx="4"
+          fill="red"
+          opacity={0.2}
+        />
+        <Rect x="25" y="0" width="20" height="20" rx="4" fill="red" />
+        <Rect
+          x="25"
+          y="25"
+          width="20"
+          height="20"
+          rx="4"
+          fill="blue"
+          fillOpacity="0.2"
+        />
+      </Svg>
+    </View>
   );
 }

apps/common/test/Test2086.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
+import {Button, StyleSheet, Text, View} from 'react-native';
 import Svg, {Path} from 'react-native-svg';
-import {StyleSheet, Text, View, Button} from 'react-native';
 
 export default function Test2086() {
   const [display, setDisplay] = useState(false);
@@ -15,7 +15,7 @@ export default function Test2086() {
   );
 }
 
-const MySVG = ({style, toggle}) => {
+const MySVG = ({style, toggle}: any) => {
   return (
     <Svg viewBox="0 0 32 32" style={style}>
       {toggle && (

apps/common/test/Test2089.tsx

@@ -1,14 +1,14 @@
 import React, {useEffect} from 'react';
 import Animated, {
-  useSharedValue,
-  withTiming,
   Easing,
-  withRepeat,
   interpolate,
-  useDerivedValue,
   useAnimatedProps,
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
 } from 'react-native-reanimated';
-import {Svg, Circle} from 'react-native-svg';
+import {Circle, Svg} from 'react-native-svg';
 
 export default () => {
   const AnimatedCircle = Animated.createAnimatedComponent(Circle);

apps/common/test/Test2196.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {View, Button, Text} from 'react-native';
+import {Button, Text, View} from 'react-native';
 import Svg, {Circle} from 'react-native-svg';
 import {SvgCssUri} from 'react-native-svg/css';
 

apps/common/test/Test2248.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useRef} from 'react';
-import {Path, Svg} from 'react-native-svg';
 import {Animated} from 'react-native';
+import {Path, Svg} from 'react-native-svg';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path as any);
 

apps/common/test/Test2327.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {SvgUri, Circle, Svg} from 'react-native-svg';
 import {Button, View} from 'react-native';
+import {Circle, Svg, SvgUri} from 'react-native-svg';
 
 export default () => {
   const [uri, setUri] = React.useState<string | null>(null);

apps/common/test/Test2363.tsx

@@ -43,7 +43,7 @@ const svgXmlWithRGB = `<?xml version="1.0" encoding="UTF-8"?>
 <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;" d="M 95.488281 21.273438 L 92.597656 13.152344 C 96.226562 15.082031 96.421875 20.394531 95.488281 21.273438 "/>
 </g>
 </g>
-</svg>`
+</svg>`;
 
 const svgXmlWithRGBA = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="97.59pt" height="70.53pt" viewBox="0 0 97.59 70.53" version="1.1">
@@ -86,7 +86,7 @@ const svgXmlWithRGBA = `<?xml version="1.0" encoding="UTF-8"?>
 <path style=" stroke:none;fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;" d="M 95.488281 21.273438 L 92.597656 13.152344 C 96.226562 15.082031 96.421875 20.394531 95.488281 21.273438 "/>
 </g>
 </g>
-</svg>`
+</svg>`;
 
 export default function Test2363() {
   return (
@@ -97,7 +97,7 @@ export default function Test2363() {
         justifyContent: 'center',
       }}>
       <SvgXml xml={svgXmlWithRGB} />
-      <View style={{height: 30}}/>
+      <View style={{height: 30}} />
       <SvgXml xml={svgXmlWithRGBA} />
     </View>
   );

apps/common/test/Test2397.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import {Svg, Circle} from 'react-native-svg';
 import Animated, {
   createAnimatedPropAdapter,
+  interpolateColor,
   processColor,
   useAnimatedProps,
   useSharedValue,
   withRepeat,
   withTiming,
-  interpolateColor,
 } from 'react-native-reanimated';
+import {Circle, Svg} from 'react-native-svg';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 

apps/common/test/Test2455.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Share, Text, TouchableOpacity, View} from 'react-native';
+import {Button, Share, View} from 'react-native';
 import {Circle, G, Path, Rect, Svg} from 'react-native-svg';
 
 const Favorite = ({color}: {color: string}): JSX.Element => {

apps/web-example/package.json

@@ -25,7 +25,7 @@
     "react-native-gesture-handler": "^2.20.0",
     "react-native-reanimated": "3.13.0",
     "react-native-safe-area-context": "^4.11.0",
-    "react-native-svg": "link:../",
+    "react-native-svg": "link:../../",
     "react-native-svg-transformer": "^1.4.0",
     "react-native-view-shot": "3.8.0",
     "react-native-web": "0.19.11"

apps/web-example/yarn.lock

@@ -3357,6 +3357,14 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
+css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
@@ -5870,6 +5878,11 @@ md5hex@^1.0.0:
   resolved "https://registry.yarnpkg.com/md5hex/-/md5hex-1.0.0.tgz#ed74b477a2ee9369f75efee2f08d5915e52a42e8"
   integrity sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ==
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 mdn-data@2.0.28:
   version "2.0.28"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
@@ -6988,7 +7001,7 @@ react-native-svg-transformer@^1.4.0:
     "@svgr/plugin-svgo" "^8.1.0"
     path-dirname "^1.0.2"
 
-"react-native-svg@link:..":
+"react-native-svg@link:../..":
   version "0.0.0"
   uid ""
 
@@ -8420,7 +8433,7 @@ walker@^1.0.7, walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warn-once@^0.1.0:
+warn-once@0.1.1, warn-once@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
   integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==