Page MenuHomePhabricator

[native] Introduced new types for Reanimated
ClosedPublic

Authored by kuba on May 11 2023, 2:29 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Nov 25, 6:40 AM
Unknown Object (File)
Wed, Nov 6, 3:42 PM
Unknown Object (File)
Wed, Nov 6, 3:41 PM
Unknown Object (File)
Wed, Nov 6, 3:41 PM
Unknown Object (File)
Wed, Nov 6, 3:41 PM
Unknown Object (File)
Wed, Nov 6, 3:41 PM
Unknown Object (File)
Wed, Nov 6, 3:41 PM
Unknown Object (File)
Wed, Nov 6, 3:41 PM
Subscribers

Details

Summary

Added types for FadeInDown and FadeOutDown animations,
interpolateColor, and withTiming.

Test Plan

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

Can you link to where you got these types from? Eg. docs or TypeScript types?

ashoat requested changes to this revision.May 12 2023, 2:19 AM

Back to you for extra details

This revision now requires changes to proceed.May 12 2023, 2:19 AM

Can you link to where you got these types from? Eg. docs or TypeScript types?

I created new types analogous to the other types in this file:

  • withTiming docs, similar to withSpring type
  • interpolateColor docs, similar to interpolate and interpolateColors types

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?

Added remaining properties to types

Reverted moving to Partial due to errors

ashoat requested changes to this revision.May 16 2023, 5:54 AM

Can you link the TypeScript types you used as inspiration? It will make review a lot easier

This revision now requires changes to proceed.May 16 2023, 5:54 AM

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?

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.

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;

Link: https://github.com/software-mansion/react-native-reanimated/blob/398e620f5850a00f829a2b2760854d004e1ca1ce/react-native-reanimated.d.ts#L459

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;

Link: https://github.com/software-mansion/react-native-reanimated/blob/398e620f5850a00f829a2b2760854d004e1ca1ce/react-native-reanimated.d.ts#L407

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)
  1. Can you type the callback here?
  2. Can you type toValue correctly? It looks like it can be any animatable value, but you're only supporting number here
native/flow-typed/npm/react-native-reanimated_v2.x.x.js
104–111

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 ↗(On Diff #26629)

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 ↗(On Diff #26629)

Let's make this object read-only

169 ↗(On Diff #26629)

Let's make this read-only

This revision is now accepted and ready to land.May 18 2023, 6:33 AM
kuba marked 3 inline comments as done.

Address review