Can't animate on Web because of camelCase to dash conversion of Props #2790
Description
Description
On the Web it seems the camelCase props are converted to kebab-case through setNativeProps, this mainly causes issues when we try animate a component which doesn't have it's dashed equivalent prop on the web.
For example FeGaussianBlur which has attributes stdDeviation & edgeMode in camelCase, so when we try to animate it through useAnimatedProps, instead of manipulating stdDeviation it instead updates the unsupported std-deviation
Please see the attached video:
rn_svg_fegaussion_animation_issue.mov
On the mobile though we can animate the blur using createAnimatedPropAdapter, you can find the sample code in the attached expo snack.
Steps to reproduce
Try the provided expo snack on the web
Snack or a link to a repository
https://snack.expo.dev/@ashu_dubey/svg-blur-animation-web-issue
SVG version
15.13.0
React Native version
0.81.4
Platforms
Web
JavaScript runtime
None
Workflow
None
Architecture
None
Build type
None
Device
None
Device model
Chrome Web Browser
Acknowledgements
Yes