[FEATURE] React Native Support about motion HOT 72 CLOSED

@nicksmithr Yeah I won't be deleting anything but I might offer it to the community to take over.

@amannn Motion was built largely with this kind of thing in mind. So useTransform's first syntax was the array-based interpolation, the function only came after I realised I was being too strict about this.

I'm also interested in getting to a place where we can pre-calculate frames using Popmotion and then pass those to the WebAnimations API. This will further push the architecture to a place that will be good for Native support.

There's places where Motion interacts quite closely with the DOM, forcing renders and what-not. So we'd have to address those.

With a subset of functionality I think this is quite doable, but we need to gauge interest from the Framer X community. Stuff like this issue helps - if people are interested, give it a thumbs up.

from motion.

Please don't send +1 comments. You can thumbs up the issue without spamming subscribers.

from motion.

Guys, as mentioned in the comment above reactions like +1 are perfectly achievable with reactions on PRs. I think everybody here understands that it's a desired feature.
#180 (comment)

So, unless you have some value to bring into discussion of the issue, please refrain from spamming other people, who follow this issue with GH notifications interface 🙇

Disclaimer, I am NOT a maintainer of Framer, but this is generally adopted good practice in open source.
Let's respect other people in the community.

Thank you.

from motion.

I've been working on a framer-motion-like library for React Native (including Web.) You can follow me on Twitter if you'd like to use it when it's out: https://twitter.com/FernandoTheRojo/status/1351234878902333445?s=20

@mattgperry gave me a hand getting AnimatePresence support to work.

And yes, it's built with Reanimated 2 under the hood.

from motion.

+1

from motion.

I think using react-native-reanimated 2 and react-native-gesture-handler will tackle the issue of 60fps animations in react native and it will be perfect to combine it with framer motion

from motion.

Please, @InventingWithMonster , do this! We need Framer on React Native.

from motion.

javascript no matter what way you put it is inferior in performance due to its design. it was built for simplicity. which has been fantastic for unlocking innovation to date. but do you really need simplicity if it's automatically generated + exported code + built by Framer? probably not, and if you do, probably can hire someone to dive through Rust/etc. whatever you end up using.

from motion.

React-spring does indeed work on all 3 platforms. However, on native, it animates on the JS-thread which is rough for performance.

On the other hand, Moti runs all iOS and Android animations on the native thread, thanks to Reanimated 2. This means getting 60 FPS animations on native is effortless.

In case you're wondering: https://github.com/nandorojo/moti

from motion.

Moti looks like an excellent Native-compatible alternative. I don't think Reanimated 2 is "there" yet for us to jump on it, and Native support won't be on our roadmap for the foreseeable future so I'm closing this in the meantime.

from motion.

react-native-reanimated@2-alpha is using JSI. so it's performant to start a react-native-framer base on that and we can finally achive the first release

from motion.

I wish we could use FM with Chakra UI with RN :)

from motion.

This could be really great!

from motion.

+1

from motion.

+1

from motion.

I'm in a place where I'd love to use Framer to maintain production animations on web and native, but I'm currently transforming everything with Reanimated 2 on RN.

I would be open to helping out with a native-motion project, or at the very least try to get support for <motion.View />. I was hoping to write a transformer for my Framer animations to make them compatible with react-native-pose, but I have a couple scroll based animations that need to be offloaded to the UI thread and require Reanimated.

from motion.

Yes please. In the meantime, will pose for React Native be kept alive @InventingWithMonster ?

from motion.

@eberdotjs is also interested in React Native support :)

from motion.

I guess one of the main challenges is that in react-native animations don't run on the JS thread, but are only described there. The animation itself is handled in native code, as it would be too expensive to send animation instructions over the bridge with 60FPS.

An example that shows the difference well is interpolations.

react-native using the Animated API:

const y = x.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 2],
});

In Framer Motion, animations run on the JS main thread and therefore you can interpolate freely with useTransform:

const y = useTransform(x, value => value * 2)

For such calculations you'd have to use a separate API from react-native. There's the react-native-reanimated project, but as far as I know they use the same architecture.

There might be other areas where this difference in architecture makes a big difference. Maybe it could work to only support a subset of the Framer Motion API, but you'd have to implement the transitions in native code.

While this may not be a popular answer, it might be wise to monitor the RN 2020/2021 roadmap and wait until the bridge is removed. Once the framework is rearchitected 60fps is definitely possible (imo) for running complicated animations (like interpolation) on the JS thread and synchronously communicating that to the native ui/modules.

from motion.

I'd have to disagree. You should go a more native route than relying on an existing platform that constantly changes and honestly in my opinion becomes obsolete once Framer finds a way to automatically export builds of the apps created in these high fidelity prototypes. I think that you integrate with react-native through another driver layer, but ultimately build the core functionality such that it transcends frameworks and applicable across native, web, and any other future platform. ie use javascript if you may, but think strongly about using the most native language you can implement in

from motion.

+1

from motion.

I guess one of the main challenges is that in react-native animations don't run on the JS thread, but are only described there. The animation itself is handled in native code, as it would be too expensive to send animation instructions over the bridge with 60FPS.

An example that shows the difference well is interpolations.

react-native using the Animated API:

const y = x.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 2],
});

In Framer Motion, animations run on the JS main thread and therefore you can interpolate freely with useTransform:

const y = useTransform(x, value => value * 2)

For such calculations you'd have to use a separate API from react-native. There's the react-native-reanimated project, but as far as I know they use the same architecture.

There might be other areas where this difference in architecture makes a big difference. Maybe it could work to only support a subset of the Framer Motion API, but you'd have to implement the transitions in native code.

from motion.

Waiting...

from motion.

As an update it's unlikely that this is going to happen any time soon. There seems to be a general lack of enthusiasm when I've brought it up. Reanimated 2 looks great though and would certainly bring the idea closer to the realm of achievability.

From my beginner's perspective the promise of using prototyping code in production that drew me to Framer is frustratingly unavailable when building React Native apps. If Framer Motion could support React Native it would open up a world of possibility for seamless mobile prototyping and development. I don't understand why there would possibly be a lack of enthusiasm (and from whom)?

EDIT have just seen this RFC... awesome!

from motion.

So useTransform's first syntax was the array-based interpolation, the function only came after I realised I was being too strict about this.

I'm really glad that you allow for a custom function in useTransform. The first attempt at my last animation prototype has used Animated for web and it was pretty tricky to get the bubbles moving in a circular shape at the right spot with a complicated interpolation. When I moved to RxJS that was much easier, as I could do proper math there for the movement. I'm really glad that Framer Motion is "web first" in that regard and doesn't limit you there!

I'm also interested in getting to a place where we can pre-calculate frames using Popmotion and then pass those to the WebAnimations API. This will further push the architecture to a place that will be good for Native support.

That sounds pretty interesting to me. I didn't know this is possible!

from motion.

Agreed I just personally think react native 5 years from now goes away if Framer develops this type of tech. just think about the power that opens up for designers and the engineering community in general if we take away all the cruft and go with an opinionated, first-principles language that automates the develop + build process after handoff. so many companies are failing to tackle this w/ the right approach. Framer is the #1 app to handle this properly

from motion.

As an update it's unlikely that this is going to happen any time soon. There seems to be a general lack of enthusiasm when I've brought it up. Reanimated 2 looks great though and would certainly bring the idea closer to the realm of achievability.

from motion.

@mattgperry - sad that it's not on your roadmap. Appreciate Moti is essentially recreating Framer Motion for React Native, but would love to have used FM in React Native... oh well. Thanks for being honest.

from motion.

@therealadum, great analysis. “Maybe it could work to only support a subset...”. Small starts that have meaningful functionality are a great. I use pose to just move buttons in and out for a little sizzle to my UI. Its so simple and so effective. Would an initial subset include something like this?

from motion.

+1

from motion.

Just note that Shopify (& many others) contribute to Reanimated. While it's perhaps not ideal to rely on a separate library with its own API, I think it's worth noting that Reanimated has a particularly strong presence in the React Native community.

from motion.

Would be happy to help to make this happen.... I would prefer Swift but react-native probably more applicable for a broader community

from motion.

+1

from motion.

Would really love support for React Native! This would greatly help our design/dev handoff and collaboration for our app

from motion.

+1 keen for react native support if possible

from motion.

Any Ideas on when is this going to happen?

from motion.

+1

from motion.

I think reanimated 2 is enough it's easy and you can implement any sort of animations with it. sometimes abstraction avoid creativity. that's what I believe and I am agree if most of you unlike it.

from motion.

I'd be ok with a subset myself, this is the current constraint I live with using pose on native and web (our app is universal and uses react-native-web).

from motion.

+1

from motion.

agreed -- I honestly think if I'm framer looking through this comment thread, it's clear the #1 driver of the business and community will be automatically connecting designs + animation to any app across multiple platforms, automatically building experiences akin to Unreal Engine (which is far far more complex so confused why design platforms haven't accomplished this) and leverage the typescript interfaces they're already using to represent the information that gets piped into each view through a RESTful service or whatever you're using

from motion.

I think it would be a great move to use Reanimated 2 here for native.

from motion.

The huge advantage if FM supports RN would be a seamless animation prototyping/development on both realms: web and mobile. Learn once, run on both!

from motion.

@Mi3liX9 tem o native base, é igual ao chakra UI - https://nativebase.io/

from motion.

@Mi3liX9 tem o native base, é igual ao chakra UI - https://nativebase.io/

Englisch please ?

from motion.

Just use Nandorojo's Moti. Feature parity and very well maintained.

from motion.

+1 Lennart
+1 Travis

from motion.

+1

Would be great and much appreciated.

from motion.

+1000 please and thank you!

from motion.

This could be great!

from motion.

Agreed!

from motion.

This would be briliant!!

from motion.

+1 I depend on React Native Pose (deprecated?, aghhhhhh) for easy to implement, delightful menu effects. Please provide Framer on React Native.

from motion.

+1

from motion.

This will be amazing!!!!

from motion.

+1

from motion.

+1! — Recently wanted to use framer-motion but stuck with react-spring due to RN support.

from motion.

This will be really awesome. Please! +1

from motion.

+1

from motion.

Another +1 here!

from motion.

+1 🚀

from motion.

+1 Here!!

from motion.

Just wondering if there is now a solution for motion.View?
The last version of Posed does not work with the latest react.

from motion.

Any updates on the first release? I guess this would go great.

from motion.

Echoing what @EhsanSarshar said, Reanimated 2.0's JS-based animation API would be pretty ideal for this. That said, it isn't currently stable, and might not be for a few months. Expo probably won't support it until the end of the year.

from motion.

@tsalemy That's a good point. Reanimated is just miles ahead of any universal animation solution for React Native at the moment. But if the bandwidth exists for a first-principles approach that's as close to native as possible, it could be better than relying on Reanimated.

from motion.

I'm familiar with Framer since ver x21. Honestly I don't know which one is miles ahead of something... whether is Framer with the possibility of exporting a build or Reanimated with a universal animation solution..

from motion.

Please make this happened

from motion.

Im in the process of setting up the architecture for a long running project. Currently considering react native web and animation libraries. It would be amazing to have a motion library that works on both react and native.

from motion.

Im in the process of setting up the architecture for a long running project. Currently considering react native web and animation libraries. It would be amazing to have a motion library that works on both react and native.

Have a look at react-spring or @nandorojo's moti, they work cross platform

from motion.

@NilsBaumgartner1994 and @Mi3liX9 has native base, it's the same as chakra ui... - https://nativebase.io/

from motion.

+1

from motion.