⚠️ Deprecated: Reanimated 2 ships with a much nicer solution, out of the box. This makes this library only useful for Reanimated 1 code and therefore no time will be invested into it's future development.
React Native Reanimated gives us a new level of control over React Native Animations and allows us to run complex animations with 60fps.
With that new power, we write so complex expressions that it can become hard to read. In Reanimated, all math expressions are functions, which leads us to write the operator before the values instead of the natural inbetween. For example, we write multiply(2, 2) instead of 2 * 2. If you nest the expressions, your statement might end with ))))). The more you nest, the harder it gets to read.
reanimated-formula allows you to write expressions in a more familiar and natural way.
npm install reanimated-formulaimport Animated from 'react-native-reanimated'
import formula from 'reanimated-formula'
const active = new Animated.Value(0)
const offsetY = new Animated.Value(0)
const swipeProgress = new Animated.Value(0)
const Animation = () => (
<Animated.View
style={{
// Using Reanimated functions
translateY: Animated.cond(
active,
Animated.min(
Animated.add(
15,
Animated.multiply(offsetY, swipeProgress)
),
0
),
0
),
// Using reanimated-formula
translateY: formula`${active} ? min(15 + ${offsetY} * ${swipeProgress}, 0) : 0`
}}
>
</Animated.View>
)| Reanimated Functions from Reanimated.* |
reanimated-formula Use inside formula`` |
|---|---|
add(a, b) |
${a} + ${b} |
sub(a, b) |
${a} - ${b} |
multiply(a, b) |
${a} * ${b} |
divide(a, b) |
${a} / ${b} |
sin(a) |
sin(${a}) |
cos(a) |
cos(${a}) |
tan(a) |
tan(${a}) |
sqrt(a) |
sqrt(${a}) |
min(a, b, c) |
min(${a}, ${b}, ${c})or min(${[a, b, c]}) |
max(a, b, c) |
max(${a}, ${b}, ${c})or max(${[a, b, c]}) |
pow(a, b, c) |
${a} ** ${b} ** ${c}or pow(${[a, b, c]}) |
and(a, b) |
${a} && ${b} |
or(a, b) |
${a} || ${b} |
modulo(a, b) |
${a} % ${b} |
exp(a) |
exp(${a}) |
asin(a) |
asin(${a}) |
atan(a) |
atan(${a}) |
acos(a) |
acos(${a}) |
round(a) |
round(${a}) |
floor(a) |
floor(${a}) |
ceil(a) |
ceil(${a}) |
abs(a) |
abs(${a}) |
eq(a, b) |
${a} === ${b} |
neq(a, b) |
${a} !== ${b} |
greaterThan(a, b) |
${a} > ${b} |
lessThan(a, b) |
${a} < ${b} |
greaterOrEq(a, b) |
${a} >= ${b} |
lessOrEq(a, b) |
${a} <= ${b} |
not(a) |
!${a} |
diff(a) |
diff(${a}) |
acc(a) |
acc(${a}) |
defined(a) |
defined(${a}) |
cond(a, b) |
${a} ? ${b} : 0 |
cond(a, b, c) |
${a} ? ${b} : ${c} |
concat(a, 'deg') |
deg(${a}) |
set(a, b) |
set(${a}, ${b}) |
Standard project that can be cloned and set up using npm install.
Unit tests can be run using npm test.
- Jonny Burger
- Includes a modified version of simple-math-ast
MIT
This is a library with a very similar purpose that I only found after I have written this module.
It uses a Babel macro to compile the math expressions into standard Reanimated code, which should make it more performant.
On the other hand, it doesn't support operators like &&, ||, ?, :, >=, so I think both libraries have merit.
