fix: web example (#2376)

Fix web example by adding missing tags and importing react

apps/examples/src/examples/Filters/FeGaussianBlur.tsx

@@ -6,10 +6,10 @@ class StdDeviation5Example extends Component {
   render() {
     return (
       <Svg height="150" width="150">
-        <Filter id="filter">
+        <Filter id="filter1">
           <FeGaussianBlur stdDeviation="5" />
         </Filter>
-        <G filter="url(#filter)">
+        <G filter="url(#filter1)">
           <Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
           <Circle cx="55" cy="90" r="40" fill="green" fillOpacity="0.5" />
           <Circle cx="95" cy="90" r="40" fill="red" fillOpacity="0.5" />
@@ -23,10 +23,10 @@ class StdDeviation20Example extends Component {
   render() {
     return (
       <Svg height="150" width="150">
-        <Filter id="filter">
+        <Filter id="filter2">
           <FeGaussianBlur stdDeviation="20" />
         </Filter>
-        <G filter="url(#filter)">
+        <G filter="url(#filter2)">
           <Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
           <Circle cx="55" cy="90" r="40" fill="green" fillOpacity="0.5" />
           <Circle cx="95" cy="90" r="40" fill="red" fillOpacity="0.5" />
@@ -40,10 +40,10 @@ class StdDeviation250Example extends Component {
   render() {
     return (
       <Svg height="150" width="150">
-        <Filter id="filter">
+        <Filter id="filter3">
           <FeGaussianBlur stdDeviation="25 0" />
         </Filter>
-        <G filter="url(#filter)">
+        <G filter="url(#filter3)">
           <Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
           <Circle cx="55" cy="90" r="40" fill="green" fillOpacity="0.5" />
           <Circle cx="95" cy="90" r="40" fill="red" fillOpacity="0.5" />
@@ -57,10 +57,10 @@ class StdDeviation050Example extends Component {
   render() {
     return (
       <Svg height="150" width="150">
-        <Filter id="filter">
+        <Filter id="filter4">
           <FeGaussianBlur stdDeviation="0 50" />
         </Filter>
-        <G filter="url(#filter)">
+        <G filter="url(#filter4)">
           <Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
           <Circle cx="55" cy="90" r="40" fill="green" fillOpacity="0.5" />
           <Circle cx="95" cy="90" r="40" fill="red" fillOpacity="0.5" />
@@ -72,10 +72,10 @@ class StdDeviation050Example extends Component {
 
 const icon = (
   <Svg height="30" width="30" viewBox="0 0 20 20">
-    <Filter id="filter">
+    <Filter id="filter5">
       <FeGaussianBlur stdDeviation="6" />
     </Filter>
-    <G filter="url(#filter)">
+    <G filter="url(#filter5)">
       <Circle cx="10" cy="7.5" r="5" fill="blue" fillOpacity="0.5" />
       <Circle cx="7.5" cy="12.5" r="5" fill="green" fillOpacity="0.5" />
       <Circle cx="12.5" cy="12.5" r="5" fill="red" fillOpacity="0.5" />

apps/examples/src/examples/Filters/ReanimatedFeColorMatrix.tsx

@@ -30,14 +30,14 @@ const ReanimatedHueRotateExample = () => {
 
   return (
     <Svg height="100" width="150">
-      <Filter id="filter">
+      <Filter id="filterLizard">
         <AnimatedFeColorMatrix type="hueRotate" animatedProps={animatedProps} />
       </Filter>
       <Image
         href="https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg"
         height="100"
         width="150"
-        filter="url(#filter)"
+        filter="url(#filterLizard)"
       />
     </Svg>
   );

src/ReactNativeSVG.web.ts

@@ -24,6 +24,8 @@ import type { TSpanProps } from './elements/TSpan';
 import type { UseProps } from './elements/Use';
 import type { FilterProps } from './elements/filters/Filter';
 import type { FeColorMatrixProps } from './elements/filters/FeColorMatrix';
+import type { FeGaussianBlurProps } from './elements/filters/FeGaussianBlur';
+import type { FeOffsetProps } from './elements/filters/FeOffset';
 import type {
   GestureResponderEvent,
   ImageProps as RNImageProps,
@@ -588,4 +590,12 @@ export class FeColorMatrix extends WebShape<BaseProps & FeColorMatrixProps> {
   tag = 'feColorMatrix' as const;
 }
 
+export class FeGaussianBlur extends WebShape<BaseProps & FeGaussianBlurProps> {
+  tag = 'feGaussianBlur' as const;
+}
+
+export class FeOffset extends WebShape<BaseProps & FeOffsetProps> {
+  tag = 'feOffset' as const;
+}
+
 export default Svg;

src/filter-image/FilterImage.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import * as React from 'react';
 import {
   ImageProps,
   ImageStyle,
@@ -27,7 +27,7 @@ export const FilterImage = (props: FilterImageProps) => {
   const { filters = [], source, style, ...imageProps } = props;
   const styles = StyleSheet.flatten(style);
   const extractedFilters = [...filters, ...extractFiltersCss(styles?.filter)];
-  const filterId = useMemo(() => `RNSVG-${getRandomNumber()}`, []);
+  const filterId = React.useMemo(() => `RNSVG-${getRandomNumber()}`, []);
 
   const src =
     Platform.OS === 'web'
@@ -40,7 +40,7 @@ export const FilterImage = (props: FilterImageProps) => {
   return (
     <View style={[styles, { width, height, overflow: 'hidden' }]}>
       <Svg width="100%" height="100%">
-        <Filter id={`filter`}>
+        <Filter id={filterId}>
           {extractedFilters.map(mapFilterToComponent)}
         </Filter>
         <Image

src/tags.tsx

@@ -1,30 +1,31 @@
-import Rect from './elements/Rect';
-import Circle from './elements/Circle';
-import Ellipse from './elements/Ellipse';
-import Polygon from './elements/Polygon';
-import Polyline from './elements/Polyline';
-import Line from './elements/Line';
-import Svg from './elements/Svg';
-import Path from './elements/Path';
-import G from './elements/G';
-import Text from './elements/Text';
-import TSpan from './elements/TSpan';
-import TextPath from './elements/TextPath';
-import Use from './elements/Use';
-import Image from './elements/Image';
-import Symbol from './elements/Symbol';
-import Defs from './elements/Defs';
-import LinearGradient from './elements/LinearGradient';
-import RadialGradient from './elements/RadialGradient';
-import Stop from './elements/Stop';
-import ClipPath from './elements/ClipPath';
-import Pattern from './elements/Pattern';
-import Mask from './elements/Mask';
-import Marker from './elements/Marker';
-import Filter from './elements/filters/Filter';
-import FeColorMatrix from './elements/filters/FeColorMatrix';
-import FeGaussianBlur from './elements/filters/FeGaussianBlur';
-import FeOffset from './elements/filters/FeOffset';
+import Svg, {
+  Circle,
+  ClipPath,
+  Defs,
+  Ellipse,
+  G,
+  Image,
+  Line,
+  LinearGradient,
+  Marker,
+  Mask,
+  Path,
+  Pattern,
+  Polygon,
+  Polyline,
+  RadialGradient,
+  Rect,
+  Stop,
+  Text,
+  TextPath,
+  TSpan,
+  Use,
+  Symbol,
+  Filter,
+  FeColorMatrix,
+  FeGaussianBlur,
+  FeOffset,
+} from './ReactNativeSVG';
 
 export const tags = {
   circle: Circle,

src/tags.web.tsx

@@ -1,50 +0,0 @@
-import Svg, {
-  Circle,
-  ClipPath,
-  Defs,
-  Ellipse,
-  G,
-  Image,
-  Line,
-  LinearGradient,
-  Marker,
-  Mask,
-  Path,
-  Pattern,
-  Polygon,
-  Polyline,
-  RadialGradient,
-  Rect,
-  Stop,
-  Text,
-  TextPath,
-  TSpan,
-  Use,
-  Symbol,
-} from './ReactNativeSVG.web';
-
-export const tags = {
-  circle: Circle,
-  clipPath: ClipPath,
-  defs: Defs,
-  ellipse: Ellipse,
-  g: G,
-  image: Image,
-  line: Line,
-  linearGradient: LinearGradient,
-  marker: Marker,
-  mask: Mask,
-  path: Path,
-  pattern: Pattern,
-  polygon: Polygon,
-  polyline: Polyline,
-  radialGradient: RadialGradient,
-  rect: Rect,
-  stop: Stop,
-  svg: Svg,
-  symbol: Symbol,
-  text: Text,
-  textPath: TextPath,
-  tspan: TSpan,
-  use: Use,
-} as const;

web-example/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}