React Native and Spring Animations

Beto Muniz
Oct 13 · 3 min read

Note: This story was published originally on August 05th, 2018 on my personal blog.

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

Rebound example

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 example

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

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

Check it out on this interactive demo.

4th order Runge-Kutta (RK4) Spring Algorithm

Dragging animation

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

Beto Muniz

Written by

@minasdev co-founder. @googledevexpert for Web Technologies. @listtta creator. Developer. Speaker. Writer. Dad. Gamer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade