useAnimatedProps with svg not working

[louisholley]

Description

following the example here directly, the code is erroring in our project with TypeError: Cannot read properties of undefined (reading 'setAttribute')

it's occurring here in react-native-reanimated/lib/reanimated2/js-reanimated/index.js:

  if (typeof component.setNativeProps === 'function') {
      setNativeProps(component, rawStyles);
    } else if (Object.keys(component.props).length > 0) {
      Object.keys(component.props).forEach((key) => {
        if (!rawStyles[key]) {
          return;
        }
        const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
        component._touchableNode.setAttribute(dashedKey, rawStyles[key]);
      });

Expected behavior

the example outlined in the docs should work

Actual behavior & steps to reproduce

errors with cannot read property "setAttribute" of undefined

Snack or minimal code example

see the docs - we've copied the code there exactly

Package versions

name	version
react-native	0.68
react-native-reanimated	2.8.0
NodeJS	16.15.0
expo	45

Affected platforms

• [ ] Android
• [ ] iOS
• [x] Web

[tannersatch]

Any update on this? Anyone know if there is an older version I can revert to that works?

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tgreco]

Same issue

[Frit]

Same for me, ios [email protected]

can be tested on this example: Circular Progress Bar https://github.com/enzomanuelmangano/animate-with-reanimated/blob/main/08-circular-progress-bar/App.tsx

[wjaykim]

I found workaround for this bug. Just set empty function for onPress prop of component you want to animate like this:

<AnimatedCircle
  cx="50%"
  cy="50%"
  r="5"
  animatedProps={circleProps}
  onPress={() => {}}
/>

I guess this is because _touchableNode(which is referenced in this line) for the svg component is only added when touchable related props exist(related line in react-native-svg).

[WoLewicki]

Can you check if applying https://github.com/software-mansion/react-native-svg/pull/1886 to react-native-svg fixes the issue?

[saeedblanchette]

react-native-svg v 13.5.0 worked for me in the web using useAnmatedProps But it still throws some error only in the console Error: attribute transform: Expected transform function, "undefined".

[soulfresh]

I'm experiencing this issue when running Jest tests with react-native-svg 12.5.1 and react-native-reanimated 2.14.4. Adding an onPress handler didn't fix the issue for me unfortunately.

[acollazomayer]

This is happening to. me to. have the version react-native-reanimated 3.0.2 react-native-svg 13.8.0. Any news on how. to fix this. It is reproducable with. this https://github.com/enzomanuelmangano/animate-with-reanimated/blob/main/08-circular-progress-bar/App.tsx

@saeedblanchette @soulfresh Were you able to fix this somehow?

[Isrrr]

I also have the same problem with these rnreanimated and rnsvg libs versions

[acollazomayer]

@Isrrr did you found a fix?

[acollazomayer]

I've created a repository that replicates the issue that I am having hope this helps. https://github.com/acollazomayer/ReanimatedSVGBug

[saeedblanchette]

I found a workaround for this bug. Just set empty function for onPress prop of component you want to animate like this:

<AnimatedCircle
  cx="50%"
  cy="50%"
  r="5"
  animatedProps={circleProps}
  onPress={() => {}}
/>

I guess this is because _touchableNode(which is referenced in this line) for the svg component is only added when touchable related props exist(related line in react-native-svg).

I just used a workaround and I did work for @acollazomayer

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[Isrrr]

@Isrrr did you found a fix?

Nope

[geetesh-gupta]

I found workaround for this bug. Just set empty function for onPress prop of component you want to animate like this:

<AnimatedCircle
  cx="50%"
  cy="50%"
  r="5"
  animatedProps={circleProps}
  onPress={() => {}}
/>

I guess this is because _touchableNode(which is referenced in this line) for the svg component is only added when touchable related props exist(related line in react-native-svg).

This works but I get a lot of warnings as errors for all touch related props in the console titled Warning: Unknown event handler property onStartShouldSetResponder. It will be ignored. at circle

Any workaround for the errors? or Proper fix?

[etiennelacoursiere]

I had the problem with the setAttribute error on web on react-native-svg: 13.4.0. Updating to 13.9.0 fixed it for me.

Now it works but i have a bunch of errors in the console for: Error: <circle> attribute transform: Expected transform function, "undefined".

My react-native-reanimated version is: 2.14.4

[tjzel]

The issue isn't present in Reanimated 3.6.1.

[mk0116]

This is still present in 3.6.1 on web. I tried to update react-native-svg to the latest one(14.1.0) but it doesn't work. Also I tried the workaround setting onPress with empty function, but didn't work too.

I found this happened because I used react-native-svg-web. Since react-native-svg supports web now, just removing the alias to it fixed the issue.