var isFunctionComponent = function isFunctionComponent(val) {
return is.fun(val) && !(val.prototype instanceof React__default.Component);
var createAnimatedComponent = function createAnimatedComponent(Component) {
var AnimatedComponent = React.forwardRef(function (props, ref) {
var forceUpdate = useForceUpdate();
var mounted = React.useRef(true);
var propsAnimated = React.useRef(null);
var node = React.useRef(null);
var attachProps = React.useCallback(function (props) {
var oldPropsAnimated = propsAnimated.current;
var callback = function callback() {
didUpdate = applyAnimatedValues.fn(node.current, propsAnimated.current.getAnimatedValue());
if (!node.current || didUpdate === false) {
// If no referenced node has been found, or the update target didn't have a
// native-responder, then forceUpdate the animation ...
propsAnimated.current = new AnimatedProps(props, callback);
oldPropsAnimated && oldPropsAnimated.detach();
React.useEffect(function () {
propsAnimated.current && propsAnimated.current.detach();
React.useImperativeHandle(ref, function () {
return animatedApi(node, mounted, forceUpdate);
var _getValue = propsAnimated.current.getValue(),
scrollTop = _getValue.scrollTop,
scrollLeft = _getValue.scrollLeft,
animatedProps = _objectWithoutPropertiesLoose(_getValue, ["scrollTop", "scrollLeft"]); // Functions cannot have refs, see:
// See: https://github.com/react-spring/react-spring/issues/569
var refFn = isFunctionComponent(Component) ? undefined : function (childRef) {
return node.current = handleRef(childRef, ref);
return React__default.createElement(Component, _extends({}, animatedProps, {
return AnimatedComponent;
var controllers = new Set();
var update = function update() {
if (!active) return false;
for (var _iterator = controllers, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
if (_i >= _iterator.length) break;
for (var configIdx = 0; configIdx < controller.configs.length; configIdx++) {
var config = controller.configs[configIdx];
var endOfAnimation = void 0,
for (var valIdx = 0; valIdx < config.animatedValues.length; valIdx++) {
var animation = config.animatedValues[valIdx]; // If an animation is done, skip, until all of them conclude
if (animation.done) continue;
var from = config.fromValues[valIdx];
var to = config.toValues[valIdx];
var position = animation.lastPosition;
var isAnimated = to instanceof Animated;
var velocity = Array.isArray(config.initialVelocity) ? config.initialVelocity[valIdx] : config.initialVelocity;
if (isAnimated) to = to.getValue(); // Conclude animation if it's either immediate, or from-values match end-state
} // Break animation when string values are involved
if (typeof from === 'string' || typeof to === 'string') {
if (config.duration !== void 0) {
position = from + config.easing((time - animation.startTime) / config.duration) * (to - from);
endOfAnimation = time >= animation.startTime + config.duration;
} else if (config.decay) {
position = from + velocity / (1 - 0.998) * (1 - Math.exp(-(1 - 0.998) * (time - animation.startTime)));
endOfAnimation = Math.abs(animation.lastPosition - position) < 0.1;
if (endOfAnimation) to = position;
lastTime = animation.lastTime !== void 0 ? animation.lastTime : time;
velocity = animation.lastVelocity !== void 0 ? animation.lastVelocity : config.initialVelocity; // If we lost a lot of frames just jump to the end.
if (time > lastTime + 64) lastTime = time; // http://gafferongames.com/game-physics/fix-your-timestep/
var numSteps = Math.floor(time - lastTime);
for (var i = 0; i < numSteps; ++i) {
var force = -config.tension * (position - to);
var damping = -config.friction * velocity;
var acceleration = (force + damping) / config.mass;
velocity = velocity + acceleration * 1 / 1000;
position = position + velocity * 1 / 1000;
} // Conditions for stopping the spring animation
var isOvershooting = config.clamp && config.tension !== 0 ? from < to ? position > to : position < to : false;
var isVelocity = Math.abs(velocity) <= config.precision;
var isDisplacement = config.tension !== 0 ? Math.abs(to - position) <= config.precision : true;
endOfAnimation = isOvershooting || isVelocity && isDisplacement;
animation.lastVelocity = velocity;
animation.lastTime = time;
} // Trails aren't done until their parents conclude
if (isAnimated && !config.toValues[valIdx].done) endOfAnimation = false;
// Ensure that we end up with a round value
if (animation.value !== to) position = to;
animation.setValue(position);
animation.lastPosition = position;
} // Keep track of updated values only when necessary
if (controller.props.onFrame) controller.values[config.name] = config.interpolation.getValue();
} // Update callbacks in the end of the frame
if (controller.props.onFrame) controller.props.onFrame(controller.values); // Either call onEnd or next frame
controllers.delete(controller);
} // Loop over as long as there are controllers ...
if (manualFrameloop) manualFrameloop();else requestFrame(update);
var start = function start(controller) {
if (!controllers.has(controller)) controllers.add(controller);
if (manualFrameloop) requestFrame(manualFrameloop);else requestFrame(update);
var stop = function stop(controller) {
if (controllers.has(controller)) controllers.delete(controller);
function createInterpolator(range, output, extrapolate) {
if (typeof range === 'function') {
if (Array.isArray(range)) {
return createInterpolator({
if (interpolation && typeof range.output[0] === 'string') {
return interpolation(range);
var outputRange = config.output;
var inputRange = config.range || [0, 1];
var extrapolateLeft = config.extrapolateLeft || config.extrapolate || 'extend';
var extrapolateRight = config.extrapolateRight || config.extrapolate || 'extend';
var easing = config.easing || function (t) {
return function (input) {
var range = findRange(input, inputRange);
return interpolate(input, inputRange[range], inputRange[range + 1], outputRange[range], outputRange[range + 1], easing, extrapolateLeft, extrapolateRight, config.map);
function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
var result = map ? map(input) : input; // Extrapolate
if (extrapolateLeft === 'identity') return result;else if (extrapolateLeft === 'clamp') result = inputMin;
if (extrapolateRight === 'identity') return result;else if (extrapolateRight === 'clamp') result = inputMax;
if (outputMin === outputMax) return outputMin;
if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax; // Input Range
if (inputMin === -Infinity) result = -result;else if (inputMax === Infinity) result = result - inputMin;else result = (result - inputMin) / (inputMax - inputMin); // Easing
result = easing(result); // Output Range
if (outputMin === -Infinity) result = -result;else if (outputMax === Infinity) result = result + outputMin;else result = result * (outputMax - outputMin) + outputMin;
function findRange(input, inputRange) {
for (var i = 1; i < inputRange.length - 1; ++i) {
if (inputRange[i] >= input) break;
var AnimatedInterpolation =
function (_AnimatedArray) {
_inheritsLoose(AnimatedInterpolation, _AnimatedArray);
function AnimatedInterpolation(parents, range, output, extrapolate) {
_this = _AnimatedArray.call(this) || this;
_this.payload = parents instanceof AnimatedArray && !(parents instanceof AnimatedInterpolation) ? parents.getPayload() : Array.isArray(parents) ? parents : [parents];
_this.calc = createInterpolator(range, output, extrapolate);
var _proto = AnimatedInterpolation.prototype;
_proto.getValue = function getValue() {
return this.calc.apply(this, this.payload.map(function (value) {
_proto.updateConfig = function updateConfig(range, output, extrapolate) {
this.calc = createInterpolator(range, output, extrapolate);
_proto.interpolate = function interpolate(range, output, extrapolate) {
return new AnimatedInterpolation(this, range, output, extrapolate);
return AnimatedInterpolation;
var interpolate$1 = function interpolate(parents, range, output) {
return parents && new AnimatedInterpolation(parents, range, output);
* useChain(references, timeSteps, timeFrame)
function useChain(refs, timeSteps, timeFrame) {
if (timeFrame === void 0) {
var previous = React.useRef();
React.useEffect(function () {
if (is.equ(refs, previous.current)) refs.forEach(function (_ref) {
var current = _ref.current;
return current && current.start();
refs.forEach(function (_ref2, index) {
var current = _ref2.current;
var ctrls = current.controllers;
var t = timeFrame * timeSteps[index];
ctrls.forEach(function (ctrl) {
ctrl.queue = ctrl.queue.map(function (e) {
} else refs.reduce(function (q, _ref3, rI) {
var current = _ref3.current;
return q = q.then(function () {
* Animated works by building a directed acyclic graph of dependencies
* transparently when you render your Animated components.
* .interpolate() .interpolate() new Animated.Value(1)
* opacity translateY scale
* When an AnimatedValue is updated, we recursively go down through this
* graph in order to find leaf nodes: the views that we flag as needing
* When a view is flagged as needing an update, we recursively go back up
* in order to build the new value that it needs. The reason why we need
* this two-phases process is to deal with composite props such as
* transform which can receive values from multiple parents.
function addAnimatedStyles(node, styles) {
node.getChildren().forEach(function (child) {
return addAnimatedStyles(child, styles);
_inheritsLoose(AnimatedValue, _Animated);
function AnimatedValue(_value) {
_this = _Animated.call(this) || this;
_this.animatedStyles = new Set();
_this.startPosition = void 0;
_this.lastPosition = void 0;
_this.lastVelocity = void 0;
_this.startTime = void 0;
_this.setValue = function (value, flush) {
if (flush) _this.flush();
_this.startPosition = _value;
_this.lastPosition = _value;
var _proto = AnimatedValue.prototype;
_proto.flush = function flush() {
if (this.animatedStyles.size === 0) {
addAnimatedStyles(this, this.animatedStyles);
this.animatedStyles.forEach(function (animatedStyle) {
return animatedStyle.update();
_proto.clearStyles = function clearStyles() {
this.animatedStyles.clear();
_proto.getValue = function getValue() {
_proto.interpolate = function interpolate(range, output, extrapolate) {
return new AnimatedInterpolation(this, range, output, extrapolate);
function (_AnimatedArray) {
_inheritsLoose(AnimatedValueArray, _AnimatedArray);
function AnimatedValueArray(values) {
_this = _AnimatedArray.call(this) || this;
_this.payload = values.map(function (n) {
return new AnimatedValue(n);
var _proto = AnimatedValueArray.prototype;
_proto.setValue = function setValue(value, flush) {
if (Array.isArray(value)) {
if (value.length === this.payload.length) {
value.forEach(function (v, i) {
return _this2.payload[i].setValue(v, flush);
this.payload.forEach(function (p) {
return p.setValue(value, flush);
_proto.getValue = function getValue() {