Skip to content

JonnyBurger/reanimated-formula

Repository files navigation

⚠️ 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.

reanimated-formula

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.

Installation

npm install reanimated-formula

Example Usage

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

Implemented functions

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

Development

Standard project that can be cloned and set up using npm install.
Unit tests can be run using npm test.

Credits

License

MIT

See also

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.


About

Natural math Expressions for React Native Reanimated

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published