MapMarkerShadowFilter

Author: GCyganek

src/components/MapView/Icons/MapCurrentLocation.tsx

@@ -1,6 +1,7 @@
 import React, {useId} from 'react';
-import {Defs, FeDropShadow, Filter, G, Path, Svg} from 'react-native-svg';
+import {G, Path, Svg} from 'react-native-svg';
 import type {SvgProps} from 'react-native-svg';
+import MapMarkerShadowFilter from './MapMarkerShadowFilter';
 
 function MapCurrentLocation({width = 48, height = 48}: SvgProps) {
     const filterId = useId();
@@ -11,24 +12,11 @@ function MapCurrentLocation({width = 48, height = 48}: SvgProps) {
             viewBox="0 0 48 48"
             fill="none"
         >
-            <Defs>
-                <Filter
-                    id={filterId}
-                    x="0"
-                    y="0"
-                    width="48"
-                    height="48"
-                    filterUnits="userSpaceOnUse"
-                >
-                    <FeDropShadow
-                        dx={0}
-                        dy={4}
-                        stdDeviation={6}
-                        floodColor="#021204"
-                        floodOpacity={0.06}
-                    />
-                </Filter>
-            </Defs>
+            <MapMarkerShadowFilter
+                id={filterId}
+                width="48"
+                height="48"
+            />
             <G filter={`url(#${filterId})`}>
                 <Path
                     fill="#0185ff"

src/components/MapView/Icons/MapMarkerShadowFilter.tsx

@@ -0,0 +1,32 @@
+import {Defs, FeDropShadow, Filter} from 'react-native-svg';
+
+type MapMarkerShadowFilterProps = {
+    id: string;
+    width: string;
+    height: string;
+};
+
+function MapMarkerShadowFilter({id, width, height}: MapMarkerShadowFilterProps) {
+    return (
+        <Defs>
+            <Filter
+                id={id}
+                x="0"
+                y="0"
+                width={width}
+                height={height}
+                filterUnits="userSpaceOnUse"
+            >
+                <FeDropShadow
+                    dx={0}
+                    dy={4}
+                    stdDeviation={6}
+                    floodColor="#021204"
+                    floodOpacity={0.06}
+                />
+            </Filter>
+        </Defs>
+    );
+}
+
+export default MapMarkerShadowFilter;

src/components/MapView/Icons/MapStartWaypoint.tsx

@@ -1,6 +1,7 @@
 import React, {useId} from 'react';
-import {Defs, FeDropShadow, Filter, G, Path, Svg} from 'react-native-svg';
+import {G, Path, Svg} from 'react-native-svg';
 import type {SvgProps} from 'react-native-svg';
+import MapMarkerShadowFilter from './MapMarkerShadowFilter';
 
 function MapStartWaypoint({width = 48, height = 48}: SvgProps) {
     const filterId = useId();
@@ -11,24 +12,11 @@ function MapStartWaypoint({width = 48, height = 48}: SvgProps) {
             viewBox="0 0 48 48"
             fill="none"
         >
-            <Defs>
-                <Filter
-                    id={filterId}
-                    x="0"
-                    y="0"
-                    width="48"
-                    height="48"
-                    filterUnits="userSpaceOnUse"
-                >
-                    <FeDropShadow
-                        dx={0}
-                        dy={4}
-                        stdDeviation={6}
-                        floodColor="#021204"
-                        floodOpacity={0.06}
-                    />
-                </Filter>
-            </Defs>
+            <MapMarkerShadowFilter
+                id={filterId}
+                width="48"
+                height="48"
+            />
             <G filter={`url(#${filterId})`}>
                 <Path
                     fill="#085239"

src/components/MapView/Icons/MapStopWaypoint.tsx

@@ -1,6 +1,7 @@
 import React, {useId} from 'react';
-import {Defs, FeDropShadow, Filter, G, Path, Svg} from 'react-native-svg';
+import {G, Path, Svg} from 'react-native-svg';
 import type {SvgProps} from 'react-native-svg';
+import MapMarkerShadowFilter from './MapMarkerShadowFilter';
 
 function MapStopWaypoint({width = 48, height = 53}: SvgProps) {
     const filterId = useId();
@@ -11,24 +12,11 @@ function MapStopWaypoint({width = 48, height = 53}: SvgProps) {
             viewBox="0 0 48 53"
             fill="none"
         >
-            <Defs>
-                <Filter
-                    id={filterId}
-                    x="0"
-                    y="0"
-                    width="48"
-                    height="52.695"
-                    filterUnits="userSpaceOnUse"
-                >
-                    <FeDropShadow
-                        dx={0}
-                        dy={4}
-                        stdDeviation={6}
-                        floodColor="#021204"
-                        floodOpacity={0.06}
-                    />
-                </Filter>
-            </Defs>
+            <MapMarkerShadowFilter
+                id={filterId}
+                width="48"
+                height="52.695"
+            />
             <G filter={`url(#${filterId})`}>
                 <Path
                     fill="#085239"

src/components/MapView/Icons/MapWaypoint.tsx

@@ -1,6 +1,7 @@
 import React, {useId} from 'react';
-import {Circle, Defs, FeDropShadow, Filter, Svg} from 'react-native-svg';
+import {Circle, Svg} from 'react-native-svg';
 import type {SvgProps} from 'react-native-svg';
+import MapMarkerShadowFilter from './MapMarkerShadowFilter';
 
 function MapWaypoint({width = 40, height = 40}: SvgProps) {
     const filterId = useId();
@@ -11,24 +12,11 @@ function MapWaypoint({width = 40, height = 40}: SvgProps) {
             viewBox="0 0 40 40"
             fill="none"
         >
-            <Defs>
-                <Filter
-                    id={filterId}
-                    x="0"
-                    y="0"
-                    width="40"
-                    height="40"
-                    filterUnits="userSpaceOnUse"
-                >
-                    <FeDropShadow
-                        dx={0}
-                        dy={4}
-                        stdDeviation={6}
-                        floodColor="#021204"
-                        floodOpacity={0.06}
-                    />
-                </Filter>
-            </Defs>
+            <MapMarkerShadowFilter
+                id={filterId}
+                width="40"
+                height="40"
+            />
             <Circle
                 cx="20"
                 cy="16"