React-spring: Use Reanimated on React Native

[brunolemos]

🚀 Feature Proposal

Use react-native-reanimated on React Native.

Motivation

It should provide 60 fps animations even on low end Android devices.

The animations would run at the native thread, not the JavaScript one. Plus it supports useNativeDriver on all properties, not only a limited subset like the official Animated.

Related: #299

[rodolfovilaca]

This would be mind-blowing 🤯🤯:rocket: :rocket: . I'm gonna try an implementation on this issue soon. Could be game changing for cross-platform animations.

[drcmda]

even if not all the functionality is available, it would be nice to have. maybe even as an experimental target: targets/native-driver. the v9 branch is modular enough for this to actually work out now.

[brunolemos]

Reanimated web port is almost ready: https://twitter.com/Baconbrix/status/1173825701192929280?s=20

[brunolemos]

@rodolfovilaca’s progress here: https://twitter.com/vilacarodolfo/status/1178351034051284993?s=21

[andrei-zgirvaci]

@brunolemos So is it possible to currently use react-native-reanimated and react-spring together as seen from Evan's twitter example?

[evanheckert]

Here's hoping something drops soon - was just about to refactor a few dozen animations to reanimated for performance reasons on a react-native app, so this would save me days!

[rodolfovilaca]

Hey guys just an update on the implementation and some thoughts, so you can organize your timelines:

1. I got all interpolations working great (colors, rotations etc...).
2. Today how it works, i track the array of animations and change the interpolation to be affected in each style, and for this I re-wrote(a simpler version) of everything to see if it could be done. This is ok, but not great as it doesn't support script animations(as react-spring supports) because it needs to be handled as a Promise like sequence of animations. So today i support animations like:

{
    from: { width: 0, opacity: 0 },
    to: [
        { width: 100, opacity: 1 },
        { width: 0, opacity: 0 }
    ]
}
// this will work as a sequence animation

but do not support function scripts.

1. My current work is to implement this solution as a queue promise sequence(as react-spring works today) and try to plug into react-spring core and see if it works.
2. react-native-reanimated has some overhead on transporting many Animated nodes to the native side, causing some fps loss(not noticeable in simple animations like above.) As seen https://github.com/react-navigation/stack/issues/252, this can impact some animations lists with trail and looping(cause i need to have a single Animated value for each item of the list) in long period of times the animations just get out of sync.

Unfortunately, I have 2 projects on my plate today and have little free time to implement this.

Feel free to comment and give some ideas on how we can do a roadmap to merge this into master. Maybe an experimental one as @drcmda said.

@evanheckert I don't have an estimate for you, but maybe I can share with you some stuff to see if it can help in your needs.

[brunolemos]

@rodolfovilaca can you open a draft pull request?

[gut4]

Any updates?

[ozerty]

Any news guys ?

[aleclarson]

Integrating with react-native-reanimated just got a whole lot easier. 👀

https://twitter.com/kzzzf/status/1266038863681794048

[Faisal-Manzer]

Any update on this? Animations with spring's APIs are great. But are lagging on several Android devices tested. Reanimated will help in boosting this severely.

[nandorojo]

Reanimated v2's API is miles ahead of v1. It also now has web support, in case that's relevant.
Universal animations with reanimated performance on native would be 🔥 Is this still looking realistic for 9.1?

If so, @aleclarson is there somewhere in the code I could start looking? I'm not familiar with the code base, but I could probably help with the reanimated integration.

(CC: https://github.com/nandorojo/dripsy/issues/46)