Motion: [FEATURE] React Native Support

[chrisdrackett]

Is your feature request related to a problem? Please describe.
Can't currently use with react native components

Describe the solution you'd like
support for react-native (motion.View?)

Describe alternatives you've considered
I haven't dug much into if this is even possible atm.

[amannn]

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.

[nicksmithr]

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

[chrisdrackett]

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).

[mattgperry]

@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.

[amannn]

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!

[viktorrenkema]

@eberdotjs is also interested in React Native support :)

[viktorrenkema]

+1 Lennart
+1 Travis

[matthewbal]

+1 keen for react native support if possible

[Prattjames]

This could be really great!

[tomfloresa]

+1

Would be great and much appreciated.

[crsanthony]

+1000 please and thank you!

[KristofferEriksson]

This could be great!

[jsheffers]

Agreed!

[matthewdias]

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

[tostavio]

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

[alan-oliv]

+1

[juriuschakow]

This would be briliant!!

[flacito]

+1 I _depend_ on React Native Pose (deprecated?, aghhhhhh) for _easy_ to implement, _delightful_ menu effects. Please provide Framer on React Native.

[imranhassan87]

+1

[paul-bg]

This will be amazing!!!!

[paul-bg]

+1

[simpleshadow]

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

[sorakthunly]

This will be really awesome. Please! +1

[acerbastimur]

+1

[therealadum]

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.

[flacito]

@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?

[stevejboyer]

Another +1 here!

[luvpack]

+1 🚀

[data987]

+1 Here!!

[stewwan]

+1

[dentuzhik]

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.
https://github.com/framer/motion/issues/180#issuecomment-577357562

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.

[EhsanSarshar]

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

[ganySA]

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

[asim47]

+1

[marlonsecundo]

+1

[EhsanSarshar]

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

[Faisal-Manzer]

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

[ptrobert]

+1

[kevinrodriguez-io]

Any Ideas on when is this going to happen?

[tsalemy]

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

[nandorojo]

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.

[tsalemy]

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

[nandorojo]

@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.

[tsalemy]

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

[nandorojo]

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.

[tsalemy]

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

[tsalemy]

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.

[hadnet]

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..

[csemur]

+1

[mattgperry]

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.

[nandorojo]

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

[hairarrow]

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.

[VrTech]

Please make this happened

[matdocker]

+1

[geraldcells18]

Waiting...

[robrecord]

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!

[hadnet]

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!

[EhsanSarshar]

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.

[gruckionvit]

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.