anexpr
anexpr is calculate Animated value for React Native's Animated.Value
note: This library is not production ready. highly experimental implementation.
Motivation
React Native has powerful animation feature, Animated
.
Animated
is almost very useful. However, sometime, I wrote very ugly animation expression like this.
const top = Animated;
That expression is meaning "Vertically center but move up 16px". if containerHeight
and height
is not Animated.Value
but just a JavaScript's number, I could more simply like this.
const top = containerHeight - height / 2 - 16;
By the way, Do you know the JavaScript feature that is called tagged template literal
?. it is special usage of template lietral
.
and use it as follow.
{ console;} const a = 42;const b = 420;const c = 4200;tag`abc def ghi jkl`; // => ['abc ', ' def ', ' ghi ', ' jkl'], [42, 420, 4200]
template literal
accept zero or more variables. and tag function
takes string array that is split on where variable is placed and that variables.
I noticed that I can parse and eval given expression by tagged template literal
. So I implement this library.
installation
yarn add anexpr
or
npm install --save anexpr
example
; // const top = Animated.subtract(Animated.divide(Animated.subtract(containerHeight, height), 2), 16);const top = anexpr`( - ) / 2 - 16`;
limitation
This library can parse four arithmetic operations(+, -, *, /
) only now.