feat: filters support FeColorMatrix and FilterImage

.eslintrc.js

@@ -7,14 +7,21 @@ module.exports = {
     'prettier',
     'plugin:import/typescript',
   ],
-  plugins: ['react', 'react-native', 'import', '@typescript-eslint', 'react-hooks'],
+  plugins: [
+    'react',
+    'react-native',
+    'import',
+    '@typescript-eslint',
+    'react-hooks',
+  ],
   env: {
     'react-native/react-native': true,
   },
   settings: {
     'import/core-modules': [
       'react-native-svg',
       'react-native-svg/css',
+      'react-native-svg/filter-image',
     ],
     'import/resolver': {
       'babel-module': {

Example/ios/Podfile.lock

@@ -1184,7 +1184,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNSVG (15.2.0-rc.0):
+  - RNSVG (15.3.0):
     - React-Core
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
@@ -1423,10 +1423,10 @@ SPEC CHECKSUMS:
   React-utils: f013537c3371270d2095bff1d594d00d4bc9261b
   ReactCommon: 2cde697fd80bd31da1d6448d25a5803088585219
   RNReanimated: 310731ce451b841548f5103111daa904082ce5d3
-  RNSVG: 55bf7e6e90717321191cde721072df87e9f8a024
+  RNSVG: a48668fd382115bc89761ce291a81c4ca5f2fd2e
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 56f906bf6c11c931588191dde1229fd3e4e3d557
+  Yoga: ff1d575b119f510a5de23c22a794872562078ccf
 
 PODFILE CHECKSUM: 1db1bb5b37b884512b54b2c75095b3e51c78e6ad
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

Example/src/App.tsx

@@ -13,86 +13,13 @@ import {
   ScrollView,
   TouchableHighlight,
   TouchableOpacity,
+  SafeAreaView,
 } from 'react-native';
 import {Modal, Platform} from 'react-native';
 import {Svg, Circle, Line} from 'react-native-svg';
 
 import * as examples from './examples';
-
-const hairline = StyleSheet.hairlineWidth;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 20,
-    alignItems: 'center',
-    overflow: 'hidden',
-  },
-  contentContainer: {
-    alignSelf: 'stretch',
-    borderTopWidth: hairline,
-    borderTopColor: '#ccc',
-    borderBottomWidth: hairline,
-    borderBottomColor: '#ccc',
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    marginHorizontal: 10,
-  },
-  welcome: {
-    padding: 10,
-    color: '#f60',
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-  link: {
-    height: 40,
-    alignSelf: 'stretch',
-    width: Dimensions.get('window').width / 2 - 10,
-  },
-  title: {
-    marginLeft: 10,
-  },
-  cell: {
-    height: 40,
-    paddingHorizontal: 10,
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    flexDirection: 'row',
-    borderTopWidth: hairline,
-    borderTopColor: '#ccc',
-    marginTop: -hairline,
-    backgroundColor: 'transparent',
-  },
-  close: {
-    position: 'absolute',
-    right: 20,
-    top: 40,
-  },
-  scroll: {
-    position: 'absolute',
-    top: 30,
-    right: 10,
-    bottom: 20,
-    left: 10,
-    backgroundColor: '#fff',
-  },
-  scrollContent: {
-    borderTopWidth: hairline,
-    borderTopColor: '#ccc',
-  },
-  example: {
-    paddingVertical: 25,
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    borderBottomWidth: hairline,
-    borderBottomColor: '#ccc',
-  },
-  sampleTitle: {
-    marginHorizontal: 15,
-    fontSize: 16,
-    color: '#666',
-  },
-});
+import {commonStyles} from './commonStyles';
 
 const names: (keyof typeof examples)[] = [
   'Svg',
@@ -116,6 +43,8 @@ const names: (keyof typeof examples)[] = [
   'Transforms',
   'Markers',
   'Mask',
+  'Filters',
+  'FilterImage',
 ];
 
 const initialState = {
@@ -142,8 +71,8 @@ export default class SvgExample extends Component {
         content: (
           <View>
             {samples.map((Sample, i) => (
-              <View style={styles.example} key={`sample-${i}`}>
-                <Text style={styles.sampleTitle}>{Sample.title}</Text>
+              <View style={commonStyles.example} key={`sample-${i}`}>
+                <Text style={commonStyles.sampleTitle}>{Sample.title}</Text>
                 <Sample />
               </View>
             ))}
@@ -171,9 +100,9 @@ export default class SvgExample extends Component {
           underlayColor="#ccc"
           key={`example-${name}`}
           onPress={() => this.show(name)}>
-          <View style={styles.cell}>
+          <View style={commonStyles.cell}>
             {icon}
-            <Text style={styles.title}>{name}</Text>
+            <Text style={commonStyles.title}>{name}</Text>
           </View>
         </TouchableHighlight>
       );
@@ -182,28 +111,30 @@ export default class SvgExample extends Component {
 
   modalContent = () => (
     <>
-      <ScrollView
-        style={styles.scroll}
-        contentContainerStyle={styles.scrollContent}
-        scrollEnabled={this.state.scroll}>
-        {this.state.content}
-      </ScrollView>
-      <View style={styles.close}>
+      <SafeAreaView style={{flex: 1}}>
+        <ScrollView
+          style={styles.scroll}
+          contentContainerStyle={styles.scrollContent}
+          scrollEnabled={this.state.scroll}>
+          {this.state.content}
+        </ScrollView>
+      </SafeAreaView>
+      <SafeAreaView style={styles.close}>
         <TouchableOpacity activeOpacity={0.7} onPress={this.hide}>
           <Svg height="20" width="20">
             <Circle cx="10" cy="10" r="10" fill="red" />
             <Line x1="4" y1="4" x2="16" y2="16" stroke="#fff" strokeWidth="2" />
             <Line x1="4" y1="16" x2="16" y2="4" stroke="#fff" strokeWidth="2" />
           </Svg>
         </TouchableOpacity>
-      </View>
+      </SafeAreaView>
     </>
   );
 
   render() {
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>SVG library for React Apps</Text>
+      <SafeAreaView style={styles.container}>
+        <Text style={commonStyles.welcome}>SVG library for React Apps</Text>
         <View style={styles.contentContainer}>{this.getExamples()}</View>
         {(Platform.OS === 'windows' || Platform.OS === 'macos') &&
         this.state.modal ? (
@@ -217,7 +148,50 @@ export default class SvgExample extends Component {
             {this.modalContent()}
           </Modal>
         )}
-      </View>
+      </SafeAreaView>
     );
   }
 }
+
+const hairline = StyleSheet.hairlineWidth;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 20,
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  contentContainer: {
+    alignSelf: 'stretch',
+    borderTopWidth: hairline,
+    borderTopColor: '#ccc',
+    borderBottomWidth: hairline,
+    borderBottomColor: '#ccc',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    marginHorizontal: 10,
+  },
+  link: {
+    height: 40,
+    alignSelf: 'stretch',
+    width: Dimensions.get('window').width / 2 - 10,
+  },
+  close: {
+    position: 'absolute',
+    right: 20,
+    top: 20,
+  },
+  scroll: {
+    position: 'absolute',
+    top: 30,
+    right: 10,
+    bottom: 20,
+    left: 10,
+    backgroundColor: '#fff',
+  },
+  scrollContent: {
+    borderTopWidth: hairline,
+    borderTopColor: '#ccc',
+  },
+});

Example/src/commonStyles.ts

@@ -0,0 +1,41 @@
+import {StyleSheet} from 'react-native';
+
+const hairline = StyleSheet.hairlineWidth;
+
+export const commonStyles = StyleSheet.create({
+  welcome: {
+    padding: 10,
+    color: '#f60',
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  link: {
+    height: 40,
+  },
+  title: {
+    marginLeft: 10,
+  },
+  cell: {
+    height: 40,
+    paddingHorizontal: 10,
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderTopWidth: hairline,
+    borderTopColor: '#ccc',
+    marginTop: -hairline,
+  },
+  example: {
+    paddingVertical: 25,
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    borderBottomWidth: hairline,
+    borderBottomColor: '#ccc',
+  },
+  sampleTitle: {
+    marginHorizontal: 15,
+    fontSize: 16,
+    color: '#666',
+  },
+});

Example/src/examples.tsx

@@ -19,6 +19,8 @@ import * as Reanimated from './examples/Reanimated';
 import * as Transforms from './examples/Transforms';
 import * as Markers from './examples/Markers';
 import * as Mask from './examples/Mask';
+import * as Filters from './examples/Filters';
+import * as FilterImage from './examples/FilterImage';
 
 export {
   Svg,
@@ -42,4 +44,6 @@ export {
   Transforms,
   Markers,
   Mask,
+  Filters,
+  FilterImage,
 };