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
2025-12-06 07:06:11 +00:00 · 2024-11-04 12:57:30 +01:00
parent 2a58016ec1
commit cceeb2b30a
17 changed files with 91 additions and 56 deletions
--- a/apps/common/test/PointerEventsBoxNone.tsx
+++ b/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)}
--- a/apps/common/test/Test1374.tsx
+++ b/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}
-    height={100}
-    viewBox="0 0 100 100"
-    transform={[{scaleX: 1}, {scaleY: -1}]}
-      >
-      <Circle cx={50} cy={50} r={40} stroke="black" strokeWidth={3} fill="red" />
-    </Svg>
-    <SvgXml xml={svgXmlWithTransform}/>
-    <SvgXml xml={svgXmlWithEmptyStyle}/>
-    <SvgXml xml={svgg}/>
-      </View>
+        width={100}
+        height={100}
+        viewBox="0 0 100 100"
+        transform={[{scaleX: 1}, {scaleY: -1}]}>
+        <Circle
+          cx={50}
+          cy={50}
+          r={40}
+          stroke="black"
+          strokeWidth={3}
+          fill="red"
+        />
+      </Svg>
+      <SvgXml xml={svgXmlWithTransform} />
+      <SvgXml xml={svgXmlWithEmptyStyle} />
+      <SvgXml xml={svgg} />
+    </View>
  );
 }
--- a/apps/common/test/Test1442.tsx
+++ b/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 />;
--- a/apps/common/test/Test1718.tsx
+++ b/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}
      />
    </>
  );
-}
+};
--- a/apps/common/test/Test1813.tsx
+++ b/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');
--- a/apps/common/test/Test1845.tsx
+++ b/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);

--- a/apps/common/test/Test2080.tsx
+++ b/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 x="0" y="25" width="20" 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>
+        <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 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>
  );
 }
--- a/apps/common/test/Test2086.tsx
+++ b/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 && (
--- a/apps/common/test/Test2089.tsx
+++ b/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);
--- a/apps/common/test/Test2196.tsx
+++ b/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';

--- a/apps/common/test/Test2248.tsx
+++ b/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);

--- a/apps/common/test/Test2327.tsx
+++ b/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);
--- a/apps/common/test/Test2363.tsx
+++ b/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>
  );
--- a/apps/common/test/Test2397.tsx
+++ b/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);

--- a/apps/common/test/Test2455.tsx
+++ b/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 => {
--- a/apps/web-example/package.json
+++ b/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"
--- a/apps/web-example/yarn.lock
+++ b/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==