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

Updated: Jun 17, 2018



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.


Read Tal Kol’s article for full details

You can also Follow him on Twitter

#Android #iOS #MobileDevelopment #ReactNative #WixEngineering

338 views
  • Black Twitter Icon
  • Black YouTube Icon

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

Have any questions?
Email: wixeng@wix.com

Trademarks and logos of other parties appearing in this post are the property of their respective holders.

Get Wix Engineering Straight to Your e-mail