I found that you can't pass interpolated animations to AnimatedValue constructor
const LIMIT = 100; // or some other value
const pan2 = new Animated.ValueXY({
x: this.state.pan.x.interpolate({
inputRange: [-LIMIT, LIMIT],
outputRange: [-LIMIT, LIMIT],
extrapolate: 'clamp',
}),
y: this.state.pan.y.interpolate({
inputRange: [-LIMIT, LIMIT],
outputRange: [-LIMIT, LIMIT],
extrapolate: 'clamp',
}),
});
because of the following invariant in AnimatedImplementation.js
invariant(
value.x instanceof AnimatedValue &&
value.y instanceof AnimatedValue,
'AnimatedValueXY must be initalized with an object of numbers or ' +
'AnimatedValues.'
);
Funny thing is that commenting the invariant solves the problem and everything works as expected.
The problem is that AnimatedInterpolation is not an instance of AnimatedValue, but an instance of AnimatedWithChildren instance of Animated.
Theoretically, the solution would be to change the invariant to Animated.
This is happening on
"react": "15.2.1",
"react-native": "^0.30.0",
I found that you can't pass interpolated animations to AnimatedValue constructor
because of the following invariant in
AnimatedImplementation.jsFunny thing is that commenting the invariant solves the problem and everything works as expected.
The problem is that
AnimatedInterpolationis not an instance ofAnimatedValue, but an instance ofAnimatedWithChildreninstance ofAnimated.Theoretically, the solution would be to change the invariant to
Animated.This is happening on