React-motion: Use React Native Animated

[ahanriat]

Hi !

I was wondering if there is a good way to use React Native Animated Library with RM?

Thank you in advance !

Antoine

[DennisMG]

+1

[karthickvkumar]

+1

[danwebdev]

+1

[chenglou]

Not sure what you mean by that. As in, both at the same time? I presume it's because you want to use the unmounting logic or something?

[ahanriat]

@chenglou, Thanks for your answer, it looks like all animations in RM are pure JS. I was looking for a way to offload those JS animation using the React Native Animated api.
I've managed to use the willLeave, willEnter etc.. logic using ReactTransitionGroup and therefore Animated api 😉

[danwebdev]

@chenglou Thank you for answering. I was refering to these lines in your article

That being said, Animated is really good at interpolating stuff. There’s no reason for RM to keep its interpolation logic if we can defer to using Animated under the hood.

[orenklein]

+1
JS animations with react native usually causing bad performance.
@ahanriat, I'm not sure that ReactTransitionGroup uses Animated api.
react-motion is really great library, would really like to use it with react native without any performance issues.

[souporserious]

@chenglou I've been using Animated recently and really love the performance gains from it. Would you consider a PR with a dependency on Animated? I'm guessing it would get rid of most of the internal code in React Motion and leave the API as well as transitional stuff.

[nkbt]

@souporserious how does it work with non-native web?

[souporserious]

_It just works_ 🎉 haha I'm not really sure. I think they kept the JS version and ported it to web. You can see an example of a third party library using it here. I've been building some libs with it recently I feel like it could totally power the internals of React Motion and offer even more power.

[nkbt]

https://www.npmjs.com/package/animated

animated
Declarative Animations Library for React and React Native

Here are some of my personal observations

1. Why not just use animated itself? It is already declarative (or at least tries to be).
2. Lib seems to be on a very early stage, so if you think of using it within react-motion as backward-compatible solution for exiting applications, you would like to have something more stable than that as a core.
3. Deeplinking from public packages can be dangerous:
   js import Animated from 'animated/lib/targets/react-dom' import Easing from 'animated/lib/Easing'
4. It is not an actual react native animated, but a js implementation that is not used in react native itself _yet_

[browniefed]

The animated library is just the React Native Animated version copied into it's own NPM module from some time ago. It had some activity to make it work better with the web and we haven't worked on it since then. There have been improvements in both the version sitting in React Native core and inside of the Animated separated module.

Ideally these 2 would be brought together and all the differences and improvements combined. I had a PR for this but need to work on it again.

The React Native version was always JS only. All calculations were done in JS, and then setNativeProps was used. Since then there has been improvements so that the calculations are done in the native world.

[Vija02]

Just want to mention that the Animated library provided by react-native-web is working great on web environment as far as I can tell. Might be faster to take something from there. I've been using it for a while now without any issues whatsoever.

[wswoodruff]

Has anyone been able to offload react-motion's heavy lifting to the Animated lib? Any PR's? After watching a react-native performance video, I learned that performance problems come from sending information over the RN bridge. Whenever we move native elements by setting their new positions in JS, we lose a lot of performance

[ahanriat]

I know try to offload as much work as I can from the JS thread to the native thread :)
https://blog.home.ht/tips-for-high-perf-animations-with-react-native-scroll-based-animations-d0c895d1835b

[wswoodruff]

@ahanriat I think this issue is asking react-motion to implement React Native Animated internally. I see your writeup uses Animated, but I want my react-motion anims to use it!