Moving Beyond Animations to User Interactions at 60 FPS in React Native

Morad Stern | March 13th 2017 | Mobile Development

ReactNative

What makes a good mobile app become a great app? What are the magical nuances that can set your app apart?

Mobile is all about transitions and smooth animations. We’ve grown to expect that objects no longer just pop up on screen. Views are expected to move around. Fluid animations at 60 FPS used to be a big issue in React Native. The async nature of the React Native bridge incurs an inherent performance penalty, preventing JavaScript code from running at high framerates.

This issue was ultimately resolved using Animated, the excellent animation library that is now part of the core. Now, it’s time to look beyond animations at the next step – dynamic user interactions that mimic reality.

Here are some real-life examples from some of our favorite apps in the App Store:


What do these UX examples have in common? They are all physical in nature. The views have velocities that are changing as they’re being dragged and tossed. Notice the nuances, like how the notification panel in iOS bounces from the ground when thrown with enough force.

Can similar UX be implemented at 60 FPS in React Native?

Join Tal Kol for an in-depth discussion of this interesting challenge. Exploring various implementation attempts in React Native and analyzing their performance. See how specific solutions can be generalized as a declarative library – aimed at driving complex physical interactions with just a couple lines of code.

Tal Kol

* Read Tal Kol’s article for full details

Follow Tal Kol on Twitter for more updates and insights about mobile and React Native


By Morad Stern
Wix

We are always looking for excellent people. Browse Jobs Here   

At Wix Engineering we develop some of the most innovative cloud-based web applications that influence our 80+ million users worldwide.

Have any questions? Email academy@wix.com.

Find out what’s coming up at Wix Engineering:

Subscribe to our newsletter for updates, events and more.