diff --git a/USAGE.md b/USAGE.md
index 504e85b3b..1306909fc 100644
--- a/USAGE.md
+++ b/USAGE.md
@@ -1301,7 +1301,9 @@ Filter effects are a way of processing an element’s rendering before it is dis
The following filters have been implemented:
- FeBlend
+- FeComposite
- FeColorMatrix
+- FeDropShadow
- FeFlood
- FeGaussianBlur
- FeMerge
@@ -1310,11 +1312,9 @@ The following filters have been implemented:
Not supported yet:
- FeComponentTransfer
-- FeComposite
- FeConvolveMatrix
- FeDiffuseLighting
- FeDisplacementMap
-- FeDropShadow
- FeFuncA
- FeFuncB
- FeFuncG
diff --git a/apps/common/example/examples/Filters/FeDropShadow.tsx b/apps/common/example/examples/Filters/FeDropShadow.tsx
new file mode 100644
index 000000000..522141047
--- /dev/null
+++ b/apps/common/example/examples/Filters/FeDropShadow.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+ Circle,
+ FeDropShadow,
+ FeFlood,
+ Filter,
+ Rect,
+ Svg,
+} from 'react-native-svg';
+
+BasicMDN.title = 'Basic MDN example';
+function BasicMDN() {
+ return (
+
+ );
+}
+
+const icon = (
+
+);
+const samples = [BasicMDN];
+
+export {icon, samples};
diff --git a/apps/common/example/examples/Filters/index.tsx b/apps/common/example/examples/Filters/index.tsx
index 131cb9429..36069573c 100644
--- a/apps/common/example/examples/Filters/index.tsx
+++ b/apps/common/example/examples/Filters/index.tsx
@@ -3,6 +3,7 @@ import Svg, {Circle} from 'react-native-svg';
import * as FeBlend from './FeBlend';
import * as FeColorMatrix from './FeColorMatrix';
import * as FeComposite from './FeComposite';
+import * as FeDropShadow from './FeDropShadow';
import * as FeFlood from './FeFlood';
import * as FeGaussianBlur from './FeGaussianBlur';
import * as FeMerge from './FeMerge';
@@ -13,6 +14,7 @@ const samples = {
FeBlend,
FeColorMatrix,
FeComposite,
+ FeDropShadow,
FeFlood,
FeGaussianBlur,
FeMerge,
diff --git a/src/elements/filters/FeDropShadow.tsx b/src/elements/filters/FeDropShadow.tsx
index 25052d8b9..66a653f84 100644
--- a/src/elements/filters/FeDropShadow.tsx
+++ b/src/elements/filters/FeDropShadow.tsx
@@ -1,12 +1,20 @@
+import { ColorValue } from 'react-native';
import { NumberArray, NumberProp } from '../../lib/extract/types';
-import { warnUnimplementedFilter } from '../../lib/util';
+import FeFlood from './FeFlood';
+import FeGaussianBlur from './FeGaussianBlur';
+import FeMerge from './FeMerge';
+import FeMergeNode from './FeMergeNode';
+import FeOffset from './FeOffset';
import FilterPrimitive from './FilterPrimitive';
+import FeComposite from './FeComposite';
export interface FeDropShadowProps {
in?: string;
stdDeviation?: NumberArray;
dx?: NumberProp;
dy?: NumberProp;
+ floodColor?: ColorValue;
+ floodOpacity?: NumberProp;
}
export default class FeDropShadow extends FilterPrimitive {
@@ -17,7 +25,21 @@ export default class FeDropShadow extends FilterPrimitive {
};
render() {
- warnUnimplementedFilter();
- return null;
+ const { stdDeviation, in: in1 = 'SourceGraphic', dx, dy } = this.props;
+ return (
+ <>
+
+
+
+
+
+
+
+
+ >
+ );
}
}