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

Jonny Burger
Includes a modified version of simple-math-ast

License

MIT

Kida007/reanimated-formula