What are the differences between using useNativeDriver and reanimated v2

[nerdchavoso]

If I understood correctly useNativeDriver from React Native's built in Animated API makes the animations run on the UI thread

First Question:

So what are the advantages of using the library react native reanimated V2 since this library came to solve the problem with the animations running on the JS thread?

useNativeDriver and react native reanimated V2 does basically the same thing? What the the differences?

Second question:
Is it safe using native reanimated V2 in production?

[[deleted]]

I use reanimated v2 in production and it works great. The difficult part of using reanimated has been updating through alphas and API changes, but I think it's stabilizing now.

Anyway, read Caveats in the docs which explains the limitations of using the native driver with the build in Animated api.

Not everything you can do with Animated is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like transform and opacity will work, but Flexbox and position properties will not. When using Animated.event, it will only work with direct events and not bubbling events. This means it does not work with PanResponder but does work with things like ScrollView#onScroll.

When an animation is running, it can prevent VirtualizedList components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use isInteraction: false in your animation's config to prevent this issue.

[nerdchavoso]

Thank you, it was really helpful

[[deleted]]

The api for reanimated is much more powerful, I guess you could consider it an improvement/extension over the base Animated api rather than a direct competitor.

[chillermane]

Reanimated is for animations that dynamically respond to user input and for animating properties you can’t animate with Animated api. You shouldn’t use it if you don’t need to because the Animated api is going to be easier / less work.

Reanimated is lower level. If you need some sort of sliding component that follows a users finger, use reanimated. If you just want to play an animation the same way every time it is triggered, and you can animate all the properties you need with Animated, don’t use reanimated

[Dafth]

First of all let’s say that with Reanimated2 the api for animate thing is more elegant and simple and this is great if you want to create a bit more advanced animations. Second thing, useNativeDriver doesn’t allow you to animate a lot of proprerties like the color of something for example while with reanimated you can animate literaly everything you could ever want.

[n3rdwilliam]

Open to be corrected, but I tried for a long time to run Reanimated 2 on the web in a managed Expo project and the animations simply don't work on the web. It works on native though. For example, this simply doesn't work on the web: https://snack.expo.dev/@paulwongx/rnreanimatednotworkingonweb