Web animations break when StrictMode is enabled

Question

Web animations break when StrictMode is enabled

jaivinwylde opened this issue 2 years ago · 13 comments

Reanimated for web uses findDOMNode in AnimatedComponent which is depreciated in StrictMode. This causes the Moti animation to fail during its initial animate transition.

I looked at Reanimated's issues and it doesn't seem like anyone has mentioned the use of findDOMNode being an issue with their web implementation. Does anyone know if this is actually something they're aware of and fixing or should I bring up this issue there as well?

And the reason I'm asking here is that I'm just wondering if anyone else using Moti has experienced this and if they've found a good workaround.

Answer 1 · 2022-08-29T22:28:28.000Z

Can you give more details about when this breaks? Is it a warning or a runtime error? Specifically with React Native Web 0.18?

It would be best to open a Reanimated issue.

Answer 2 · 2022-08-29T22:30:16.000Z

Reanimated for web uses findDOMNode in AnimatedComponent

Are you referring to findNodeHandle? Because I don't see findDOMNode anywhere in the reanimated codebase.

Presumably findNodeHandle uses findDOMNode under the hood...

Answer 3 · 2022-08-29T22:31:41.000Z

It would help if you shared all the versions you're using, since I haven't faced this issue yet myself.

Answer 4 · 2022-08-30T01:05:52.000Z

My bad, I'll provide versions and work on a minimal reproduction tomorrow

Answer 5 · 2022-08-30T01:09:24.000Z

thanks! appreciate it

Answer 6 · 2022-08-30T17:26:05.000Z

To answer your previous question the animations break because of a runtime error. There is also a deprecation warning for the use of setNativeProps.

moti=0.18.0
reanimated=2.10.0 (also happens with 2.9.1)
react-native-web=0.18.7
next=12

I'm also going to try and recreate the problem in a minimal repo

Answer 7 · 2022-08-30T18:01:13.000Z

I just created a base Solito example project and the same thing happens.

All I did was this:
npx create-solito-app@latest strictmode
cd strictmode && yarn web

And got this StrictMode warning again:

The difference is that this animation did not break and I think that's because in my use case I was using AnimatePresence and had the MotiView be conditionally rendered from a toggle state. When the toggle state changed, the MotiView was created and the error happened so it didn't do its initial animation, but it did do its exit animation.

Answer 8 · 2022-08-30T21:54:09.000Z

RNW pr
Seems like this is a known issue with react-native-web but a fix hasn't been merged yet

and the setNativeProps warn should go away in a future RNW because the code for that was deleted, so Reanimated would use this fallback instead:

Answer 9 · 2023-02-09T18:28:13.000Z

Going to close since I don't see much I can do for this.

Answer 10 · 2023-08-26T21:20:38.000Z

This is fixed on reanimated 3.3 fyi

Answer 11 · 2024-01-23T17:24:53.000Z

Hello, I didn't understand if I can put reactStrictMode to true now.
My version of reanimated is 3.3, but I have still the findDOMNode is deprecated in StrictMode error.

Answer 12 · 2024-01-23T17:25:45.000Z

I think you’d need a newer version of it. But I’m not up to date with it. Strict mode causes a lot of issues for me and I always disable it

Answer 13 · 2024-01-23T18:13:23.000Z

Ok, never mind 😃

I needed it because in next-international docs (here https://next-international.vercel.app/docs#typescript-config) it's stated that works better with strict mode, but having it disabled don't cause issues.

I managed to have a shared setup of localization by using react-i18next on expo and next-international on next (next-i18next gave me a lot of troubles).

Have you ever faced this need?

Btw, thank you for your work and for your time 🙏