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

@@ -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) {

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) => {

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 ' +

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.

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 {

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 {

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;

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<number>,
+  inputRange: $ReadOnlyArray<number>,
   /* $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<number> | Array<string>,
+  outputRange: $ReadOnlyArray<number> | $ReadOnlyArray<string>,
   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<string>) {
+function checkPattern(arr: $ReadOnlyArray<string>) {
   const pattern = arr[0].replace(stringShapeRegex, '');
   for (let i = 1; i < arr.length; ++i) {
     invariant(
@@ -268,7 +267,7 @@ function checkPattern(arr: Array<string>) {
   }
 }
 
-function findRange(input: number, inputRange: Array<number>) {
+function findRange(input: number, inputRange: $ReadOnlyArray<number>) {
   let i;
   for (i = 1; i < inputRange.length - 1; ++i) {
     if (inputRange[i] >= input) {
@@ -278,7 +277,7 @@ function findRange(input: number, inputRange: Array<number>) {
   return i - 1;
 }
 
-function checkValidInputRange(arr: Array<number>) {
+function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   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<number>) {
   }
 }
 
-function checkInfiniteRange(name: string, arr: Array<number>) {
+function checkInfiniteRange(name: string, arr: $ReadOnlyArray<number>) {
   invariant(arr.length >= 2, name + ' must have at least 2 elements');
   invariant(
     arr.length !== 2 || arr[0] !== -Infinity || arr[1] !== Infinity,

RNTester/js/examples/MaskedView/MaskedViewExample.js

@@ -35,12 +35,12 @@ class AnimatedMaskExample extends React.Component<Props> {
       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<Props> {
     Animated.loop(
       Animated.timing(this._maskRotateAnimatedValue, {
         toValue: 360,
-        timing: 2000,
+        duration: 2000,
         useNativeDriver: true,
       }),
     ).start();