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