reanimated-math.macro

react-native-reanimated is amazing library for handling animations in react native.

Unfortunately nested function calls can get hard to read even if you are doing only simple arithmetic operations:

import { divide, multiply, sub } from 'react-native-reanimated'

function project(initialVelocity, decelerationRate) {
  return divide(
    multiply(divide(initialVelocity, 1000), decelerationRate),
    sub(1, decelerationRate),
  );
}

This babel.macro aims to simplify arithmetic over reanimated values.

Installation

yarn add reanimated-math.macro -D

If you are using older version of react-native than 0.56 you have to install and configure babel-plugin-macros as well.

Usage

import re from 'reanimated-math.macro'

function project(initialVelocity, decelerationRate) {
  return re(initialVelocity / 1000 * decelerationRate / (1 - decelerationRate))
}

or

import re from 'reanimated-math.macro'

function project(initialVelocity, decelerationRate) {
  return re`${initialVelocity} / 1000 * ${decelerationRate} / (1 - ${decelerationRate})`
}

| reanimated | TaggedTemplateExpression | CallExpression | |---|---|---| | add(a, b, 1) | re`${a} + ${b} + 1` | re(a + b + 1) | | sub(a, b, 1) | re`${a} - ${b} - 1` | re(a - b - 1) | | multiply(a, b, 1) | re`${a} * ${b} * 1` | re(a * b * 1) | | divide(a, b, 1) | re`${a} / ${b} / 1` | re(a / b / 1) | | pow(a, b, 1) | re`${a} ** ${b} ** 1` | re(a ** b ** 1) | | mod(a, b, 1) | re`${a} % ${b} % 1` | re(a % b % 1) | | sqrt(a) | re`sqrt(${a})` | re(sqrt(a)) | | sin(a) | re`sin(${a})` | re(sin(a)) | | cos(a) | re`cos(${a})` | re(cos(a)) | | exp(a) | re`exp(${a})` | re(exp(a)) | | round(a) | re`round(${a})` | re(round(a)) | | floor(a) | re`floor(${a})` | re(floor(a)) | | ceil(a) | re`ceil(${a})` | re(ceil(a)) | | abs(a) | re`abs(${a})` | re(abs(a)) | | multiply(a, -1) | re`-${a}` | re(-a) |