Beto Muniz Picture

React Native and Spring Animations

2 min read

Physics-based motions are driven by force, and the Spring behavior defines the Spring Animation concept.

The primary goal of this article is to help developers to understand the concept under the hood of the current state of Spring Animations with React Native (and React at all).

Also, this article helps your mobile team communication to make internal questions like "how should we create and delivery spring-based motions designs that work well with React Native?".

Trust me. This type of question before starting the development will avoid a bunch of misconceptions and individual interpretations.

To the Concepts...

The first thing to keep in mind is that Apple's UIKit Spring Algorithm NOT is supported by React Native. Yeah! This approach should be entirely ignored during the development.

Check this thread from an Ex-Apple guy to see the main aspect that the Community doesn't adopt the Apple UIKit Spring approach.

With all being said, the spring-based animation algorithms commonly used by the React Native community are:

Origami (Rebound) Spring Algorithm

Origami is a Facebook project, and the React Native support is native 🤯. The Origami is synced with the Rebound model which allows us to interpolate Tension, Friction, Speed, and Bounciness.

The most recommended libraries to apply this spring-based animation are React Native Animated, react-native-reanimated, and rebound.

Check it out on this interactive demo.

Damped Harmonic Oscillator (DHO) Algorithm

DHO is an analytical spring model which allows us to interpolate Stiffness, Damping, and Mass.

The most recommended libraries to apply this spring-based animation are React Native Animated, Framer.js and react-motion.

Check it out on this interactive demo.

4th order Runge-Kutta (RK4) Spring Algorithm

RK4 is natively supported in old React Native versions (before Origami/Rebound arrived) and an important industry standard which allows us to interpolate Tension, Friction, and Velocity.

The most recommended libraries to apply this spring-based animation are Framer.js, react-spring, and rebound.

Check it out on this interactive demo and this benchmark created by myself to test react-spring working in a stressed environment.

Conclusion

As you can see, the React Native support for spring-based animations is very fun and diverse, the current problem is the lousy support provided by the market of prototyping tools like Flinto, Framer, Principle, etc.

Currently, the best choice is the Origami Studio, but great times are coming for this scenario with Super Nova and Framer X that is React Native and React friendly respectively. Stay tuned.

Bonus

Take a look at this another article that I wrote to know more about animations approaches with React Native.

Extra References