Open brunolemos opened 5 years ago
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.
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.
Reanimated web port is almost ready: https://twitter.com/Baconbrix/status/1173825701192929280?s=20
@rodolfovilaca’s progress here: https://twitter.com/vilacarodolfo/status/1178351034051284993?s=21
@brunolemos So is it possible to currently use react-native-reanimated and react-spring together as seen from Evan's twitter example?
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!
Hey guys just an update on the implementation and some thoughts, so you can organize your timelines:
{
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.
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.
@rodolfovilaca can you open a draft pull request?
Any updates?
Any news guys ?
Integrating with react-native-reanimated
just got a whole lot easier. 👀
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.
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.
I ended up building my own package, Moti, to solve this. It's powered by Reanimated 2.
For anyone interested, a contribution is certainly welcome. And I'll happily help you where I can. My current focus is bug fixing. Hopefully when there aren't so many, I can looking at improvements including this one.
Curious where this landed as well 😄
i would stick to reanimated 3 and/or moti.
Team is already using both 😉 we were digging into different options as Reanimated added quite a bit to our web bundle size and this had SSR support to help with that!
🚀 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