Added types for FadeInDown and FadeOutDown animations,
interpolateColor, and withTiming.
Details
Checked if there are no flow errors after adding the animations in next diffs.
Diff Detail
- Repository
- rCOMM Comm
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
It looks like you're missing some parameters for types such as InterpolateColor. Can you find the TypeScript types and try to base your new types on those, and make sure to include all relevant params?
Can you link the TypeScript types you used as inspiration? It will make review a lot easier
Sure, added. I hope that this is what you meant.
native/flow-typed/npm/react-native-reanimated_v2.x.x.js | ||
---|---|---|
136–147 ↗ | (On Diff #26497) | Inspiration for that: declare export type InterpolationConfig = { +inputRange: $ReadOnlyArray<number>, +outputRange: $ReadOnlyArray<number>, +extrapolate?: ?ExtrapolateType, ... }; declare export type InterpolateNode = ( node: NodeParam, interpolationConfig: InterpolationConfig, ) => NodeImpl; declare export type InterpolateColorsConfig = { +inputRange: $ReadOnlyArray<number>, +outputColorRange: $ReadOnlyArray<number | string>, }; declare export type InterpolateColors = ( animationValue: NodeParam, interpolationConfig: InterpolateColorsConfig ) => NodeImpl; |
409–419 ↗ | (On Diff #26497) | Inspiration: declare export class SlideInDown extends ComplexAnimationBuilder { static createInstance(): SlideInDown; build(): AnimationConfigFunction<EntryAnimationsValues>; } declare export class SlideOutDown extends ComplexAnimationBuilder { static createInstance(): SlideOutDown; build(): AnimationConfigFunction<ExitAnimationsValues>; } |
508–516 ↗ | (On Diff #26497) | Inspiration: declare type WithSpringConfig = $Shape<{| +stiffness: number, +damping: number, +mass: number, +overshootClamping: boolean, +restDisplacementThreshold: number, +restSpeedThreshold: number, +velocity: number, |}>; declare type WithSpring = ( toValue: number | string, springConfig?: WithSpringConfig, ) => number; |
I was asking for links (hyperlinks) to the TypeScript types. In a previous comment I had requested:
Can you find the TypeScript types and try to base your new types on those, and make sure to include all relevant params?
Assuming you did that and found the TypeScript types, I'm now asking you to link those types. With the comments you left, it appears that some of them don't match, and I can't tell if they are TypeScript types or just other Flow types that we already have.
native/flow-typed/npm/react-native-reanimated_v2.x.x.js | ||
---|---|---|
136–147 ↗ | (On Diff #26497) | These types don't appear to match at all? |
Ok, sorry, I completely misunderstood you. Added comments with TypeScript types and links to Reanimated git.
native/flow-typed/npm/react-native-reanimated_v2.x.x.js | ||
---|---|---|
136–147 ↗ | (On Diff #26497) | Those are Flow types from this file that I take inspiration from. Here is TypeScript type: export type InterpolationOptions = { gamma?: number; useCorrectedHSVInterpolation?: boolean; }; export function interpolateColor<T extends string | number>( value: number, inputRange: readonly number[], outputRange: readonly T[], colorSpace?: 'RGB' | 'HSV', options?: InterpolationOptions ): T; |
508–516 ↗ | (On Diff #26497) | TypeScript type: export interface WithTimingConfig { duration?: number; easing?: EasingFunction | EasingFunctionFactory; } export function withTiming<T extends AnimatableValue>( toValue: T, userConfig?: WithTimingConfig, callback?: AnimationCallback ): T; |
native/flow-typed/npm/react-native-reanimated_v2.x.x.js | ||
---|---|---|
136–147 ↗ | (On Diff #26497) | Can you add the generic T here, so that outputRange / the function return can be strings`? |
508–516 ↗ | (On Diff #26497) |
|
native/flow-typed/npm/react-native-reanimated_v2.x.x.js | ||
---|---|---|
104–111 ↗ | (On Diff #26628) | TypeScript types: export type AnimationCallback = ( finished?: boolean, current?: AnimatableValue ) => void; type Animatable = number | string | Array<number>; type AnimatableValueObject = { [key: string]: Animatable }; export type AnimatableValue = Animatable | AnimatableValueObject; |
Thanks for iterating on the types so much! Some small comments inline; please address before landing
native/flow-typed/npm/react-native-reanimated_v2.x.x.js | ||
---|---|---|
107 | I know it's void in TypeScript, but let's type this as mixed... it's more flexible, and I doubt that Reanimated requires the function to return void | |
110 | Let's make this object read-only | |
169 | Let's make this read-only |