react-native-animated-mananger
Simple class wrapping native Animated Value that helps to perform various operations on them
yarn add react-native-animated-mananger
Create value
; new AnimatedManager0;new AnimatedManagertrue; // will convert true > 1, false > 0new AnimatedManagernew Animated.Value1;
Get raw animated value (to pass it to styles)
;;
Compose values
;;; .addvalueB, valueC .multiply2 .dividevalueB; ;
Call animations as promises
;
API
// allowed input for AnimatedManager class and methods; // return raw react natvie Animated.Valuevalue.getValue: RawAnimatedValue;// inverts value that is in 0-1 range.// example: const animatedOpacity = isHidden.invert()// it's shortcut of .interpolate({ inputRange: [0, 1], outputRange: [1, 0})value.invert: AnimatedManager; // basic mathematical operators - under the hood it just use raw Animated.add etc but in chainable way// also every valid AnimatedManager input can be used eg. someValue.add(new Animated.Value(2), 50, true)value.multiply...inputs: AnimatedValueInput: AnimatedManager;value.subtract...inputs: AnimatedValueInput: AnimatedManager;value.add...inputs: AnimatedValueInput: AnimatedManager;value.divide...inputs: AnimatedValueInput: AnimatedManager; // Works the same as raw Animated.spring etc, but doesnt need .start() to be called and returns promise that is resolved when animation is finishedvalue.springconfig: RawAnimated.SpringAnimationConfig: Promise<this>;value.timingconfig: RawAnimated.TimingAnimationConfig: Promise<this>; // works exactly as native interpolation functionvalue.interpolateinterpolation: RawAnimated.InterpolationConfigType: AnimatedManager;
Tips and Gotchas
Always remember to call .getValue()
before passing it to animated view. Animated view will only accept raw Animated.Value
instance that is returned by .getValue()
Helpers
Connecting it to events. Pass .getValue()
result to Animated.Event
Also there is helper method for scroll based events: