[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

[delzennejc]

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.