A tiny expression compiler for React Native Animated values

  • Its expressive API lets developers compose animated effects based on time, spring physics and even real-time user interaction with distinct ease.I’ve recently released animated.macro, a small JavaScript package that improves the ergonomics of working with animated values in React Native apps — and, more importantly, has been fun to build.
  • The results of these operations can then be used anywhere the basic values can.For instance, here’s how you add two animated values together:const result = Animated.add(x, y);And here’s a slightly more involved calculation:const result = Animated.modulo( Animated.add(phase, Math.PI * 2 + angle), Math.PI * 2);What can be improvedOn closer inspection, the…
  • This can be an inconvenience when refactoring animation code.In the second example, the types of phase and angle (and of Math.PI) similarly dictate the shape of the surrounding code — e.g. Animated values can’t be added with + and plain numbers can’t be added with Animated.add().
  • Can we do better?Yes.Introducing animated.macro 🕺🏽🔢animated.macro lets you write JS-like arithmetic expressions that operate on animated values and plain numbers alike.
  • These expressions take the form of tagged template literals that evaluate to animated values.The second example above can now be written as:import animated from “animated.macro”;const result = animated` (${phase} + ${Math.PI} * 2 + ${angle}) % (${Math.PI} * 2)`;Addition, subtraction, multiplication, division and modulo are all supported, with the same…

The Animated library, which allows animations to be set up in JS and executed on the native thread, is a mainstay of the React Native programming model. Its expressive API lets developers compose…

A tiny expression compiler for React Native Animated valuestl;dr: Get animated.macro on GitHub, npm, Snack.The Animated library, which allows animations to be set up in JS and executed on the native thread, is a mainstay of the React Native programming model. Its expressive API lets developers compose animated effects based on time, spring physics and even real-time user interaction with distinct ease.I’ve recently released animated.macro, a small JavaScript package that improves the ergonomics of working with animated values in React Native apps — and, more importantly, has been fun to build. 😋In this post I’ll detail the ideas behind this package and how I went about building it.A brief introduction to Animated.ValueThe React Native docs include a fantastic guide to animations which I won’t repeat here. Central to things is the Animated.Value class, which represents an opaque handle to a numeric variable. It’s opaque in the sense that its actual contents are maintained out of sight, often on the native thread, where JS can’t access them directly.In lieu of direct access, there are methods for controlling, interpolating and declaratively combining values. There’s one particular set of methods that let you combine values mathematically, via addition, multiplication, division and modulo. The results of these operations can then be used anywhere the basic values can.For instance, here’s how you add two animated values together:const result = Animated.add(x, y);And here’s a slightly more involved calculation:const result = Animated.modulo( Animated.add(phase, Math.PI * 2 + angle), Math.PI * 2);What can be improvedOn closer inspection, the above examples exhibit a…

A tiny expression compiler for React Native Animated values