-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
feat: Add support for filter property
#8451
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Add support for filter property
#8451
Conversation
packages/react-native-reanimated/src/common/web/style/processors/filter.ts
Show resolved
Hide resolved
MatiPl01
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left a few comments. In general, good job! I like the tests part very much, they are super clean!
packages/react-native-reanimated/src/common/style/processors/__tests__/filter.test.ts
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/__tests__/filter.test.ts
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/__tests__/filter.test.ts
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
MatiPl01
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for addressing my previous comments. I left a few other comments. I think that the PR will be good to merge after addressing the new bunch of comments.
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
packages/react-native-reanimated/src/common/web/style/processors/filter.ts
Outdated
Show resolved
Hide resolved
MatiPl01
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Summary
This PR adds support for
filterproperty. Before it was only supported on web.It adds
processFilterfunction, adjusts web implementation of this function and changes the name toprocessFilterWeb. I've also added some tests. The filter property is also added to native CSS props.TO-DO:
dropShadowdropShadowas an objectImportant
Disclaimer sometimes there is a problem with precision as the outcome is for example
3.237473234e-14pxand it is non parsable - maybe we can change global precision to some defined number of decimal points, or locally I can change it inside filter function.Important
Disclaimer 2 sometimes we the static asset does not work (most of the time) and it's not related to the
filterprocessing, when testing please replaceballoonsImagewith some workinguri. The asset problem will be fixed in some other PR.Test plan
Animate Filterexample in Reanimated App on Android, iOS and Web.