feat: add FeOffset filter (#2361)

# Summary

Continuation of #2316
Introducing new filter `FeOffset`.

## Test Plan

Example app -> Filters -> FeOffset

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |         |
| Android |         |

## Checklist

- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
This commit is contained in:
Jakub Grzywacz
2024-07-25 12:32:15 +02:00
committed by GitHub
parent 44254df9fb
commit 5807f2c1a6
23 changed files with 507 additions and 5 deletions
@@ -0,0 +1,47 @@
import React, {Component} from 'react';
import {FeOffset, Filter, Rect, Svg} from 'react-native-svg';
class ReferenceExample extends Component {
static title = 'Offset';
render() {
return (
<Svg width="200" height="200">
<Filter id="offset" width="180" height="180">
<FeOffset dx="50" dy="50" />
</Filter>
<Rect x="0" y="0" width="100" height="100" stroke="black" fill="red" />
<Rect x="0" y="0" width="50" height="50" stroke="black" fill="none" />
<Rect
x="0"
y="0"
width="100"
height="100"
stroke="black"
fill="blue"
filter="url(#offset)"
/>
</Svg>
);
}
}
const icon = (
<Svg height="30" width="30" viewBox="0 0 20 20">
<Filter id="iconOffset">
<FeOffset dx="5" dy="5" />
</Filter>
<Rect x="0" y="0" width="15" height="15" fill="red" />
<Rect
x="0"
y="0"
width="15"
height="15"
fill="blue"
filter="url(#iconOffset)"
/>
</Svg>
);
const samples = [ReferenceExample];
export {icon, samples};
@@ -1,4 +1,5 @@
import * as FeColorMatrix from './FeColorMatrix';
import * as FeGaussianBlur from './FeGaussianBlur';
import * as FeOffset from './FeOffset';
import * as ReanimatedFeColorMatrix from './ReanimatedFeColorMatrix';
export {FeColorMatrix, FeGaussianBlur, ReanimatedFeColorMatrix};
export {FeColorMatrix, FeGaussianBlur, FeOffset, ReanimatedFeColorMatrix};