From bdafc55f50c7d580ee2e643a02cb95d0196f721c Mon Sep 17 00:00:00 2001 From: Pieter De Baets Date: Fri, 21 Feb 2020 06:51:52 -0800 Subject: [PATCH] Make animation types exact Summary: Changelog: [General][Changed] Improved flowtype support for Animated Reviewed By: cpojer Differential Revision: D20002839 fbshipit-source-id: 537ac00b3fe408585d34a0ffac8adc598e01d1b7 --- Libraries/Animated/src/AnimatedEvent.js | 3 +-- Libraries/Animated/src/AnimatedImplementation.js | 2 +- Libraries/Animated/src/NativeAnimatedHelper.js | 4 +++- Libraries/Animated/src/animations/Animation.js | 1 - Libraries/Animated/src/animations/DecayAnimation.js | 8 ++++---- .../Animated/src/animations/SpringAnimation.js | 8 ++++---- .../Animated/src/animations/TimingAnimation.js | 8 ++++---- .../Animated/src/nodes/AnimatedInterpolation.js | 13 ++++++------- .../js/examples/MaskedView/MaskedViewExample.js | 6 +++--- 9 files changed, 26 insertions(+), 27 deletions(-) diff --git a/Libraries/Animated/src/AnimatedEvent.js b/Libraries/Animated/src/AnimatedEvent.js index 8921fc4fbaafb6..d1fc3c614858fa 100644 --- a/Libraries/Animated/src/AnimatedEvent.js +++ b/Libraries/Animated/src/AnimatedEvent.js @@ -22,7 +22,6 @@ export type Mapping = {[key: string]: Mapping, ...} | AnimatedValue; export type EventConfig = { listener?: ?Function, useNativeDriver: boolean, - ... }; function attachNativeEvent( @@ -140,7 +139,7 @@ class AnimatedEvent { if (config == null) { console.warn('Animated.event now requires a second argument for options'); - config = {}; + config = {useNativeDriver: false}; } if (config.listener) { diff --git a/Libraries/Animated/src/AnimatedImplementation.js b/Libraries/Animated/src/AnimatedImplementation.js index efdd204dff805b..ce70beb529b0c0 100644 --- a/Libraries/Animated/src/AnimatedImplementation.js +++ b/Libraries/Animated/src/AnimatedImplementation.js @@ -91,7 +91,7 @@ const diffClamp = function( const _combineCallbacks = function( callback: ?EndCallback, - config: AnimationConfig, + config: {...AnimationConfig, ...}, ) { if (callback && config.onComplete) { return (...args) => { diff --git a/Libraries/Animated/src/NativeAnimatedHelper.js b/Libraries/Animated/src/NativeAnimatedHelper.js index 8dac3579f90302..f21066bb07ff65 100644 --- a/Libraries/Animated/src/NativeAnimatedHelper.js +++ b/Libraries/Animated/src/NativeAnimatedHelper.js @@ -277,7 +277,9 @@ function assertNativeAnimatedModule(): void { let _warnedMissingNativeAnimated = false; -function shouldUseNativeDriver(config: AnimationConfig | EventConfig): boolean { +function shouldUseNativeDriver( + config: {...AnimationConfig, ...} | EventConfig, +): boolean { if (config.useNativeDriver == null) { console.warn( 'Animated: `useNativeDriver` was not specified. This is a required ' + diff --git a/Libraries/Animated/src/animations/Animation.js b/Libraries/Animated/src/animations/Animation.js index 4d2ac80752330a..fd0c2218858452 100644 --- a/Libraries/Animated/src/animations/Animation.js +++ b/Libraries/Animated/src/animations/Animation.js @@ -22,7 +22,6 @@ export type AnimationConfig = { useNativeDriver: boolean, onComplete?: ?EndCallback, iterations?: number, - ... }; // Important note: start() and stop() will only be called at most once. diff --git a/Libraries/Animated/src/animations/DecayAnimation.js b/Libraries/Animated/src/animations/DecayAnimation.js index 6f4039cf40e604..c3dce534f84baa 100644 --- a/Libraries/Animated/src/animations/DecayAnimation.js +++ b/Libraries/Animated/src/animations/DecayAnimation.js @@ -17,7 +17,8 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper'); import type AnimatedValue from '../nodes/AnimatedValue'; import type {AnimationConfig, EndCallback} from './Animation'; -export type DecayAnimationConfig = AnimationConfig & { +export type DecayAnimationConfig = { + ...AnimationConfig, velocity: | number | { @@ -26,13 +27,12 @@ export type DecayAnimationConfig = AnimationConfig & { ... }, deceleration?: number, - ... }; -export type DecayAnimationConfigSingle = AnimationConfig & { +export type DecayAnimationConfigSingle = { + ...AnimationConfig, velocity: number, deceleration?: number, - ... }; class DecayAnimation extends Animation { diff --git a/Libraries/Animated/src/animations/SpringAnimation.js b/Libraries/Animated/src/animations/SpringAnimation.js index f9957d38fcfb0c..aec87e5cecb732 100644 --- a/Libraries/Animated/src/animations/SpringAnimation.js +++ b/Libraries/Animated/src/animations/SpringAnimation.js @@ -22,7 +22,8 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper'); import type {AnimationConfig, EndCallback} from './Animation'; -export type SpringAnimationConfig = AnimationConfig & { +export type SpringAnimationConfig = { + ...AnimationConfig, toValue: | number | AnimatedValue @@ -51,10 +52,10 @@ export type SpringAnimationConfig = AnimationConfig & { damping?: number, mass?: number, delay?: number, - ... }; -export type SpringAnimationConfigSingle = AnimationConfig & { +export type SpringAnimationConfigSingle = { + ...AnimationConfig, toValue: number | AnimatedValue | AnimatedInterpolation, overshootClamping?: boolean, restDisplacementThreshold?: number, @@ -68,7 +69,6 @@ export type SpringAnimationConfigSingle = AnimationConfig & { damping?: number, mass?: number, delay?: number, - ... }; class SpringAnimation extends Animation { diff --git a/Libraries/Animated/src/animations/TimingAnimation.js b/Libraries/Animated/src/animations/TimingAnimation.js index 33ab52b3961a5b..ffe8c8313be2f7 100644 --- a/Libraries/Animated/src/animations/TimingAnimation.js +++ b/Libraries/Animated/src/animations/TimingAnimation.js @@ -19,7 +19,8 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper'); import type {AnimationConfig, EndCallback} from './Animation'; -export type TimingAnimationConfig = AnimationConfig & { +export type TimingAnimationConfig = { + ...AnimationConfig, toValue: | number | AnimatedValue @@ -33,15 +34,14 @@ export type TimingAnimationConfig = AnimationConfig & { easing?: (value: number) => number, duration?: number, delay?: number, - ... }; -export type TimingAnimationConfigSingle = AnimationConfig & { +export type TimingAnimationConfigSingle = { + ...AnimationConfig, toValue: number | AnimatedValue | AnimatedInterpolation, easing?: (value: number) => number, duration?: number, delay?: number, - ... }; let _easeInOut; diff --git a/Libraries/Animated/src/nodes/AnimatedInterpolation.js b/Libraries/Animated/src/nodes/AnimatedInterpolation.js index 1bf6af4b27c3d7..d3e29a54616b6c 100644 --- a/Libraries/Animated/src/nodes/AnimatedInterpolation.js +++ b/Libraries/Animated/src/nodes/AnimatedInterpolation.js @@ -22,17 +22,16 @@ const normalizeColor = require('../../../StyleSheet/normalizeColor'); type ExtrapolateType = 'extend' | 'identity' | 'clamp'; export type InterpolationConfigType = { - inputRange: Array, + inputRange: $ReadOnlyArray, /* $FlowFixMe(>=0.38.0 site=react_native_fb,react_native_oss) - Flow error * detected during the deployment of v0.38.0. To see the error, remove this * comment and run flow */ - outputRange: Array | Array, + outputRange: $ReadOnlyArray | $ReadOnlyArray, easing?: (input: number) => number, extrapolate?: ExtrapolateType, extrapolateLeft?: ExtrapolateType, extrapolateRight?: ExtrapolateType, - ... }; const linear = t => t; @@ -258,7 +257,7 @@ function isRgbOrRgba(range) { return typeof range === 'string' && range.startsWith('rgb'); } -function checkPattern(arr: Array) { +function checkPattern(arr: $ReadOnlyArray) { const pattern = arr[0].replace(stringShapeRegex, ''); for (let i = 1; i < arr.length; ++i) { invariant( @@ -268,7 +267,7 @@ function checkPattern(arr: Array) { } } -function findRange(input: number, inputRange: Array) { +function findRange(input: number, inputRange: $ReadOnlyArray) { let i; for (i = 1; i < inputRange.length - 1; ++i) { if (inputRange[i] >= input) { @@ -278,7 +277,7 @@ function findRange(input: number, inputRange: Array) { return i - 1; } -function checkValidInputRange(arr: Array) { +function checkValidInputRange(arr: $ReadOnlyArray) { invariant(arr.length >= 2, 'inputRange must have at least 2 elements'); for (let i = 1; i < arr.length; ++i) { invariant( @@ -294,7 +293,7 @@ function checkValidInputRange(arr: Array) { } } -function checkInfiniteRange(name: string, arr: Array) { +function checkInfiniteRange(name: string, arr: $ReadOnlyArray) { invariant(arr.length >= 2, name + ' must have at least 2 elements'); invariant( arr.length !== 2 || arr[0] !== -Infinity || arr[1] !== Infinity, diff --git a/RNTester/js/examples/MaskedView/MaskedViewExample.js b/RNTester/js/examples/MaskedView/MaskedViewExample.js index 2b9f99c19a0aa6..d53359ff71040d 100644 --- a/RNTester/js/examples/MaskedView/MaskedViewExample.js +++ b/RNTester/js/examples/MaskedView/MaskedViewExample.js @@ -35,12 +35,12 @@ class AnimatedMaskExample extends React.Component { Animated.sequence([ Animated.timing(this._maskScaleAnimatedValue, { toValue: 1.3, - timing: 750, + duration: 750, useNativeDriver: true, }), Animated.timing(this._maskScaleAnimatedValue, { toValue: 1, - timing: 750, + duration: 750, useNativeDriver: true, }), ]), @@ -49,7 +49,7 @@ class AnimatedMaskExample extends React.Component { Animated.loop( Animated.timing(this._maskRotateAnimatedValue, { toValue: 360, - timing: 2000, + duration: 2000, useNativeDriver: true, }), ).start();