diff --git a/Libraries/Animated/AnimatedImplementation.js b/Libraries/Animated/AnimatedImplementation.js index f483d0a63f3647..84c47e36a1580f 100644 --- a/Libraries/Animated/AnimatedImplementation.js +++ b/Libraries/Animated/AnimatedImplementation.js @@ -556,7 +556,7 @@ type AnimatedNumeric = | AnimatedAddition | AnimatedDiffClamp | AnimatedDivision - | AnimatedInterpolation + | AnimatedInterpolation | AnimatedModulo | AnimatedMultiplication | AnimatedSubtraction diff --git a/Libraries/Animated/NativeAnimatedHelper.js b/Libraries/Animated/NativeAnimatedHelper.js index e303128751b6e1..e97a10d262ebba 100644 --- a/Libraries/Animated/NativeAnimatedHelper.js +++ b/Libraries/Animated/NativeAnimatedHelper.js @@ -359,7 +359,9 @@ function validateStyles(styles: {[key: string]: ?number, ...}): void { } } -function validateInterpolation(config: InterpolationConfigType): void { +function validateInterpolation( + config: InterpolationConfigType, +): void { for (const key in config) { if (!isSupportedInterpolationParam(key)) { throw new Error( diff --git a/Libraries/Animated/animations/SpringAnimation.js b/Libraries/Animated/animations/SpringAnimation.js index 471fe50216cd50..e02ed31872daa7 100644 --- a/Libraries/Animated/animations/SpringAnimation.js +++ b/Libraries/Animated/animations/SpringAnimation.js @@ -44,7 +44,7 @@ export type SpringAnimationConfig = { ... } | AnimatedColor - | AnimatedInterpolation, + | AnimatedInterpolation, overshootClamping?: boolean, restDisplacementThreshold?: number, restSpeedThreshold?: number, @@ -67,7 +67,7 @@ export type SpringAnimationConfig = { export type SpringAnimationConfigSingle = { ...AnimationConfig, - toValue: number | AnimatedValue | AnimatedInterpolation, + toValue: number, overshootClamping?: boolean, restDisplacementThreshold?: number, restSpeedThreshold?: number, @@ -90,7 +90,7 @@ class SpringAnimation extends Animation { _startPosition: number; _lastPosition: number; _fromValue: number; - _toValue: any; + _toValue: number; _stiffness: number; _damping: number; _mass: number; diff --git a/Libraries/Animated/animations/TimingAnimation.js b/Libraries/Animated/animations/TimingAnimation.js index 859a5755f254ff..94c4b3a4b8361b 100644 --- a/Libraries/Animated/animations/TimingAnimation.js +++ b/Libraries/Animated/animations/TimingAnimation.js @@ -36,7 +36,7 @@ export type TimingAnimationConfig = $ReadOnly<{ | AnimatedValueXY | RgbaValue | AnimatedColor - | AnimatedInterpolation, + | AnimatedInterpolation, easing?: (value: number) => number, duration?: number, delay?: number, @@ -44,7 +44,7 @@ export type TimingAnimationConfig = $ReadOnly<{ export type TimingAnimationConfigSingle = $ReadOnly<{ ...AnimationConfig, - toValue: number | AnimatedValue | AnimatedInterpolation, + toValue: number, easing?: (value: number) => number, duration?: number, delay?: number, @@ -62,7 +62,7 @@ function easeInOut() { class TimingAnimation extends Animation { _startTime: number; _fromValue: number; - _toValue: any; + _toValue: number; _duration: number; _delay: number; _easing: (value: number) => number; diff --git a/Libraries/Animated/nodes/AnimatedAddition.js b/Libraries/Animated/nodes/AnimatedAddition.js index 409db6e4d6b7b3..b311b39a6606fc 100644 --- a/Libraries/Animated/nodes/AnimatedAddition.js +++ b/Libraries/Animated/nodes/AnimatedAddition.js @@ -38,7 +38,9 @@ class AnimatedAddition extends AnimatedWithChildren { return this._a.__getValue() + this._b.__getValue(); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { + interpolate( + config: InterpolationConfigType, + ): AnimatedInterpolation { return new AnimatedInterpolation(this, config); } diff --git a/Libraries/Animated/nodes/AnimatedDiffClamp.js b/Libraries/Animated/nodes/AnimatedDiffClamp.js index 629e04cc68113f..61b167c2fcba57 100644 --- a/Libraries/Animated/nodes/AnimatedDiffClamp.js +++ b/Libraries/Animated/nodes/AnimatedDiffClamp.js @@ -38,7 +38,9 @@ class AnimatedDiffClamp extends AnimatedWithChildren { super.__makeNative(platformConfig); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { + interpolate( + config: InterpolationConfigType, + ): AnimatedInterpolation { return new AnimatedInterpolation(this, config); } diff --git a/Libraries/Animated/nodes/AnimatedDivision.js b/Libraries/Animated/nodes/AnimatedDivision.js index 1dcd4622ac135d..3d77e2de6453e7 100644 --- a/Libraries/Animated/nodes/AnimatedDivision.js +++ b/Libraries/Animated/nodes/AnimatedDivision.js @@ -54,7 +54,9 @@ class AnimatedDivision extends AnimatedWithChildren { return a / b; } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { + interpolate( + config: InterpolationConfigType, + ): AnimatedInterpolation { return new AnimatedInterpolation(this, config); } diff --git a/Libraries/Animated/nodes/AnimatedInterpolation.js b/Libraries/Animated/nodes/AnimatedInterpolation.js index dac38a30a18662..ee5ea21946241c 100644 --- a/Libraries/Animated/nodes/AnimatedInterpolation.js +++ b/Libraries/Animated/nodes/AnimatedInterpolation.js @@ -23,9 +23,9 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig'; type ExtrapolateType = 'extend' | 'identity' | 'clamp'; -export type InterpolationConfigType = $ReadOnly<{ +export type InterpolationConfigType = $ReadOnly<{ inputRange: $ReadOnlyArray, - outputRange: $ReadOnlyArray | $ReadOnlyArray, + outputRange: $ReadOnlyArray, easing?: (input: number) => number, extrapolate?: ExtrapolateType, extrapolateLeft?: ExtrapolateType, @@ -38,14 +38,14 @@ const linear = (t: number) => t; * Very handy helper to map input ranges to output ranges with an easing * function and custom behavior outside of the ranges. */ -function createInterpolation( - config: InterpolationConfigType, -): (input: number) => number | string { +function createInterpolation( + config: InterpolationConfigType, +): (input: number) => OutputT { if (config.outputRange && typeof config.outputRange[0] === 'string') { - return createInterpolationFromStringOutputRange(config); + return (createInterpolationFromStringOutputRange((config: any)): any); } - const outputRange: Array = (config.outputRange: any); + const outputRange: $ReadOnlyArray = (config.outputRange: any); const inputRange = config.inputRange; @@ -87,7 +87,7 @@ function createInterpolation( ); const range = findRange(input, inputRange); - return interpolate( + return (interpolate( input, inputRange[range], inputRange[range + 1], @@ -96,7 +96,7 @@ function createInterpolation( easing, extrapolateLeft, extrapolateRight, - ); + ): any); }; } @@ -195,7 +195,7 @@ const stringShapeRegex = /[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g; * -45deg // values with units */ function createInterpolationFromStringOutputRange( - config: InterpolationConfigType, + config: InterpolationConfigType, ): (input: number) => string { let outputRange: Array = (config.outputRange: any); invariant(outputRange.length >= 2, 'Bad output range'); @@ -299,17 +299,19 @@ function checkInfiniteRange(name: string, arr: $ReadOnlyArray) { ); } -class AnimatedInterpolation extends AnimatedWithChildren { +class AnimatedInterpolation< + OutputT: number | string, +> extends AnimatedWithChildren { // Export for testing. static __createInterpolation: ( - config: InterpolationConfigType, - ) => (input: number) => number | string = createInterpolation; + config: InterpolationConfigType, + ) => (input: number) => OutputT = createInterpolation; _parent: AnimatedNode; - _config: InterpolationConfigType; - _interpolation: (input: number) => number | string; + _config: InterpolationConfigType; + _interpolation: (input: number) => OutputT; - constructor(parent: AnimatedNode, config: InterpolationConfigType) { + constructor(parent: AnimatedNode, config: InterpolationConfigType) { super(); this._parent = parent; this._config = config; @@ -330,7 +332,9 @@ class AnimatedInterpolation extends AnimatedWithChildren { return this._interpolation(parentValue); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { + interpolate( + config: InterpolationConfigType, + ): AnimatedInterpolation { return new AnimatedInterpolation(this, config); } @@ -343,7 +347,7 @@ class AnimatedInterpolation extends AnimatedWithChildren { super.__detach(); } - __transformDataType(range: Array): Array { + __transformDataType(range: $ReadOnlyArray): Array { return range.map(NativeAnimatedHelper.transformDataType); } @@ -355,9 +359,6 @@ class AnimatedInterpolation extends AnimatedWithChildren { return { inputRange: this._config.inputRange, // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here - /* $FlowFixMe[incompatible-call] (>=0.38.0) - Flow error detected during - * the deployment of v0.38.0. To see the error, remove this comment and - * run flow */ outputRange: this.__transformDataType(this._config.outputRange), extrapolateLeft: this._config.extrapolateLeft || this._config.extrapolate || 'extend', diff --git a/Libraries/Animated/nodes/AnimatedModulo.js b/Libraries/Animated/nodes/AnimatedModulo.js index 88663cc0e12426..bc3bc1b3ad2741 100644 --- a/Libraries/Animated/nodes/AnimatedModulo.js +++ b/Libraries/Animated/nodes/AnimatedModulo.js @@ -38,7 +38,9 @@ class AnimatedModulo extends AnimatedWithChildren { ); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { + interpolate( + config: InterpolationConfigType, + ): AnimatedInterpolation { return new AnimatedInterpolation(this, config); } diff --git a/Libraries/Animated/nodes/AnimatedMultiplication.js b/Libraries/Animated/nodes/AnimatedMultiplication.js index 9adb2570549703..419927b71f53dc 100644 --- a/Libraries/Animated/nodes/AnimatedMultiplication.js +++ b/Libraries/Animated/nodes/AnimatedMultiplication.js @@ -38,10 +38,11 @@ class AnimatedMultiplication extends AnimatedWithChildren { return this._a.__getValue() * this._b.__getValue(); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { + interpolate( + config: InterpolationConfigType, + ): AnimatedInterpolation { return new AnimatedInterpolation(this, config); } - __attach(): void { this._a.__addChild(this); this._b.__addChild(this); diff --git a/Libraries/Animated/nodes/AnimatedSubtraction.js b/Libraries/Animated/nodes/AnimatedSubtraction.js index 3c8eb158fd05db..b3a9198c662baa 100644 --- a/Libraries/Animated/nodes/AnimatedSubtraction.js +++ b/Libraries/Animated/nodes/AnimatedSubtraction.js @@ -38,7 +38,9 @@ class AnimatedSubtraction extends AnimatedWithChildren { return this._a.__getValue() - this._b.__getValue(); } - interpolate(config: InterpolationConfigType): AnimatedInterpolation { + interpolate( + config: InterpolationConfigType, + ): AnimatedInterpolation { return new AnimatedInterpolation(this, config); } diff --git a/Libraries/Animated/nodes/AnimatedValue.js b/Libraries/Animated/nodes/AnimatedValue.js index c829d3e5952513..c6f021467f8af7 100644 --- a/Libraries/Animated/nodes/AnimatedValue.js +++ b/Libraries/Animated/nodes/AnimatedValue.js @@ -219,7 +219,9 @@ class AnimatedValue extends AnimatedWithChildren { * Interpolates the value before updating the property, e.g. mapping 0-1 to * 0-10. */ - interpolate(config: InterpolationConfigType): AnimatedInterpolation { + interpolate( + config: InterpolationConfigType, + ): AnimatedInterpolation { return new AnimatedInterpolation(this, config); } diff --git a/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index a7b904b36643e3..ebd6f676def560 100644 --- a/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/Libraries/Components/ScrollView/ScrollViewStickyHeader.js @@ -90,7 +90,7 @@ class ScrollViewStickyHeader extends React.Component { } updateTranslateListener( - translateY: AnimatedImplementation.Interpolation, + translateY: AnimatedNode, isFabric: boolean, offset: AnimatedDiffClamp | null, ) { @@ -274,11 +274,11 @@ class ScrollViewStickyHeader extends React.Component { .interpolate({ extrapolateLeft: 'clamp', inputRange: [layoutY, layoutY + 1], - outputRange: ([0, 1]: Array), + outputRange: [0, 1], }) .interpolate({ inputRange: [0, 1], - outputRange: ([0, -1]: Array), + outputRange: [0, -1], }), -this.state.layoutHeight, 0,