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