Skip to content
Permalink
Browse files
Make animation types exact
Summary: Changelog: [General][Changed] Improved flowtype support for Animated

Reviewed By: cpojer

Differential Revision: D20002839

fbshipit-source-id: 537ac00b3fe408585d34a0ffac8adc598e01d1b7
  • Loading branch information
javache authored and facebook-github-bot committed Feb 21, 2020
1 parent c18fa70 commit bdafc55f50c7d580ee2e643a02cb95d0196f721c
Show file tree
Hide file tree
Showing 9 changed files with 26 additions and 27 deletions.
@@ -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) {
@@ -91,7 +91,7 @@ const diffClamp = function(

const _combineCallbacks = function(
callback: ?EndCallback,
config: AnimationConfig,
config: {...AnimationConfig, ...},
) {
if (callback && config.onComplete) {
return (...args) => {
@@ -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 ' +
@@ -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.
@@ -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 {
@@ -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 {
@@ -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;
@@ -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,
@@ -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();

0 comments on commit bdafc55

Please sign in to comment.