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:

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