v2 types #840

renanmav · 2020-05-30T01:08:03Z

Description

This PR includes the type definitions for react-native-reanimated v2. I created these types following the documentation and doing a quick check within the source code. Tested it against some changes I made on my reanimated-v2-playground. A better test would be to use these types on example app.

Suggestions

Increase DX for types, lint-staged isn’t configured to work for typescript files.

…alue

react-native-reanimated.d.ts

terrysahaidak · 2020-05-30T07:58:07Z

react-native-reanimated.d.ts

+      toValue: number,
+      userConfig?: Omit<TimingConfig, 'toValue'>,
+      callback?: (isCancelled: boolean) => void,
+    ): number;


Not sure if this should return a number. Each animation actually returns an object. But maybe @kmagiera have better thoughts on this.

I’m doing this to make the imperative compatible with:

SharedValue

react-native styles (ViewStyle, TextStyle, ImageStyle)

Thoughts @kmagiera?

react-native-reanimated.d.ts

renanmav · 2020-05-30T21:11:17Z

After some local usage of these types (patch-package to enjoy the types), I saw that generics don’t work for useAnimatedGestureHandler and useAnimatedStyle, maybe there is something related to the UI Thread not being able to parse the Typescript type annotation.

I also saw I’ve forgot the interpolation function type.

terrysahaidak · 2020-06-04T07:10:57Z

After some local usage of these types (patch-package to enjoy the types), I saw that generics don’t work for useAnimatedGestureHandler and useAnimatedStyle, maybe there is something related to the UI Thread not being able to parse the Typescript type annotation.

Yeah, right now typescript annotations aren't getting removed from worklets before babel plugin processing them.

react-native-reanimated.d.ts

terrysahaidak · 2020-06-04T12:23:50Z

@renanmav actually, Shared Value is not a class in the code, I would just use type/interface here. There is no way to new it :)

Also, as I mentioned before, T extends Value but it' not correct since Value - string | number | boolean. But you can pass also an object, array, and even function here.

wcandillon · 2020-06-09T19:02:12Z

@renanmav Thank you so much for your effort. With now type annotations supported with worklets, things are getting interesting :) I'm also thinking about an eslint plugin to check the env variables used from worklets 😅

I'm trying your definition and added a definition for onRunUI():

    // reanimated2 functions
    export function runOnUI<ReturnType>(fn: () => ReturnType): () => ReturnType;
    export function runOnUI<P1, ReturnType>(fn: (p1: P1) => ReturnType): (p1: P1) => ReturnType;
    export function runOnUI<P1, P2, ReturnType>(fn: (p1: P1, p2: P2) => ReturnType): (p1: P1, p2: P2) => ReturnType;
    export function runOnUI<P1, P2, P3, ReturnType>(fn: (p1: P1, p2: P2, p3: P3) => ReturnType): (p1: P1, p2: P2, p3: P3) => ReturnType;
    export function runOnUI<P1, P2, P3, P4, ReturnType>(fn: (p1: P1, p2: P2, p3: P3, p4: P4) => ReturnType): (p1: P1, p2: P2, p3: P3, p4: P4) => ReturnType;
    export function runOnUI<P1, P2, P3, P4, P5, ReturnType>(fn: (p1: P1, p2: P2, p3: P3, p4: P4, p5: P5) => ReturnType): (p1: P1, p2: P2, p3: P3, p4: P4, p5: P5) => ReturnType;
    export function runOnUI<A, ReturnType>(fn: (...args: A[]) => ReturnType): (...args: A[]) => ReturnType;
//...
  export const runOnUI: typeof Animated.runOnUI

wcandillon · 2020-06-09T19:09:08Z

@terrysahaidak how can we deal with assigning animations to shared values? Here withTiming return value is typed as number. But it is not a number. I'm wondering what is the most elegant to deal with this.

We can do something like this:

    class SharedValue<T extends SharedValueType> {
      value: T;
      set value(value: T | Animation);
    }

Not sure how to define Animation yet.

renanmav · 2020-06-09T19:11:28Z

I'm trying your definition and added a definition for onRunUI()

I’m not sure what onRunUI means. Would you mind clarify it @wcandillon?

wcandillon · 2020-06-09T19:17:49Z

runOnUI call a worklet function from the JS thread. You can pass it parameter. You can see an example of it at https://github.com/wcandillon/can-it-be-done-in-react-native/blob/master/reanimated-2/src/Worklets/Worklets.tsx#L53

renanmav · 2020-06-09T20:48:44Z

So, can I add your runOnUI definition in this PR @wcandillon?

Update react-native-reanimated.d.ts

wcandillon · 2020-07-02T17:37:26Z

@renanmav Great work! about the CI failure, could it be just a matter of merging the latest master into this branch?

@terrysahaidak Does this work for you as well?

…nimated into v2-types

terrysahaidak · 2020-07-04T14:57:38Z

react-native-reanimated.d.ts

+    ): number;
+    export function withSpring(
+      toValue: number,
+      userConfig?: Omit<SpringConfig, 'toValue'>,


SpringConfig is missing velocity: number

Done in 5fd666e

terrysahaidak

There is withDecay already in the master.

type DecayConfig = {
  deceleration?: number;
  velocity: number;
  clamp?: [number, number];
};

export function withDecay(
  userConfig: DecayConfig,
  callback: (isCancelled: boolean) => void
): number;

wcandillon · 2020-07-08T16:17:13Z

Thks for your review @terrysahaidak
On top of that I would merge the proc change from https://github.com/software-mansion/react-native-reanimated/pull/890/files

    export function proc<A extends Adaptable[]>(
      cb: (...args: A) => AnimatedNode<number>
    ): typeof cb;

@renanmav you rock!

…nimated into v2-types

terrysahaidak · 2020-07-11T20:05:09Z

@renanmav velocity is not required AFAIK.

wcandillon · 2020-07-17T12:15:43Z

@renanmav Could you fix the merge conflict?
@jakub-gonet this is good to go.

wcandillon · 2020-07-18T13:30:49Z

Is a proposal for the merge conflict: https://github.com/renanmav/react-native-reanimated/pull/3/files

Fix merge conflict

tsconfig.json

terrysahaidak · 2020-07-20T11:29:55Z

The sequence helper has been added recently. Also, Loop has been renamed to repeat
https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/animations.js#L332
https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/animations.js#L371

2. Add repeat function 3. Add sequence function 4. Add test for sequence function

likern · 2020-07-20T15:34:41Z

The sequence helper has been added recently. Also, Loop has been renamed to repeat
https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/animations.js#L332
https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/animations.js#L371

@renanmav This pull request should fix this https://github.com/renanmav/react-native-reanimated/pull/4/files

Change loop to repeat and add sequence function

renanmav · 2020-07-21T15:00:26Z

Shall we merge this?

jakub-gonet

I think yes. I'm still not convinced about tests being in the root of the package and adding react-native-gesture-handler as a peer dependency, but we can fix it in the follow-up PR after tests to the Reanimated 2 are set up.

jakub-gonet · 2020-07-22T11:53:32Z

🎉

wcandillon · 2020-07-22T12:22:45Z

Woah congrats everyone 🙌🏻 @renanmav you're our TypeScript hero 🦸🏻‍♂️

MinimogDev · 2020-08-03T09:15:10Z

Do you guys have an eta on when these will become available in alpha release?

wcandillon · 2020-08-03T09:21:01Z

you can use https://www.npmjs.com/package/patch-package in the meantime.

…

On Mon, Aug 3, 2020 at 11:15 AM MinimogDev ***@***.***> wrote: Do you guys have an eta on when these will become available in alpha release? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#840 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVSZOFU3UR6BVYQ34CLR6Z523ANCNFSM4NOO3IIA> .

renanmav added 11 commits May 29, 2020 16:38

create type definition for useSharedValue

a6ebc56

add value prop to AnimatedValue class and correctly export useSharedV…

f0232a7

…alue

create typings for useAnimatedStyle

13027f3

add type definitions for useDerivedValue

1239b53

add type definitions to useAnimatedGestureHandler

404116e

add type definitions to useAnimatedScrollHandler

6becb07

add type definitions to withTiming animation

ac7222f

add type definitions to withSpring animation

0a135c3

add type definitions to cancelAnimation animation

869bd35

add type definitions to delay animation

dff0c13

add type definitions to loop animation

ba1ced6

terrysahaidak suggested changes May 30, 2020

View reviewed changes

wcandillon reviewed May 30, 2020

View reviewed changes

react-native-reanimated.d.ts Outdated Show resolved Hide resolved

renanmav added 2 commits June 3, 2020 17:31

create SharedValue and interpolation function

726d207

update cancelAnimation to use SharedValue

69cfd6c

terrysahaidak suggested changes Jun 4, 2020

View reviewed changes

react-native-reanimated.d.ts Outdated Show resolved Hide resolved

jakub-gonet added the 🏠 Reanimated 2 label Jun 4, 2020

remove SharedValue extension

c20cb07

renanmav added 3 commits June 4, 2020 09:40

move SharedValue from class to interface

8d785b1

update new SharedValueType within reanimated 2 hooks

40fc26a

fix typo

7543620

Add runOnUI()

37f3d38

Merge pull request #2 from wcandillon/patch-30

e531ad3

Update react-native-reanimated.d.ts

wcandillon approved these changes Jul 2, 2020

View reviewed changes

Merge branch 'master' of github.com:software-mansion/react-native-rea…

774e99b

…nimated into v2-types

terrysahaidak reviewed Jul 4, 2020

View reviewed changes

terrysahaidak suggested changes Jul 4, 2020

View reviewed changes

jakub-gonet linked an issue Jul 9, 2020 that may be closed by this pull request

V2, Typescript support #829

Closed

renanmav added 3 commits July 11, 2020 15:37

Merge branch 'master' of github.com:software-mansion/react-native-rea…

7dd60e8

…nimated into v2-types

add typings for withDecay

0f0f96a

add velocity to WithSpringConfig

5fd666e

make velocity not required

1194b6a

Merge branch 'master' into v2-types

ff00926

Merge pull request #3 from wcandillon/v2-types

b2d9bb0

Fix merge conflict

jakub-gonet reviewed Jul 20, 2020

View reviewed changes

tsconfig.json Show resolved Hide resolved

1. Remove loop function

ea823e1

2. Add repeat function 3. Add sequence function 4. Add test for sequence function

Merge pull request #4 from likern/v2-types

4068431

Change loop to repeat and add sequence function

jakub-gonet approved these changes Jul 21, 2020

View reviewed changes

jakub-gonet merged commit aa0b739 into software-mansion:master Jul 22, 2020

renanmav deleted the v2-types branch July 22, 2020 18:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v2 types #840

v2 types #840

renanmav commented May 30, 2020

terrysahaidak May 30, 2020

renanmav Jun 3, 2020 •

edited

renanmav commented May 30, 2020 •

edited

terrysahaidak commented Jun 4, 2020

terrysahaidak commented Jun 4, 2020

wcandillon commented Jun 9, 2020 •

edited

wcandillon commented Jun 9, 2020 •

edited

renanmav commented Jun 9, 2020

wcandillon commented Jun 9, 2020

renanmav commented Jun 9, 2020

wcandillon commented Jul 2, 2020

terrysahaidak Jul 4, 2020

renanmav Jul 11, 2020

terrysahaidak left a comment

wcandillon commented Jul 8, 2020

terrysahaidak commented Jul 11, 2020

wcandillon commented Jul 17, 2020

wcandillon commented Jul 18, 2020

terrysahaidak commented Jul 20, 2020

likern commented Jul 20, 2020

renanmav commented Jul 21, 2020

jakub-gonet left a comment

jakub-gonet commented Jul 22, 2020

wcandillon commented Jul 22, 2020

MinimogDev commented Aug 3, 2020

wcandillon commented Aug 3, 2020 via email

v2 types #840

v2 types #840

Conversation

renanmav commented May 30, 2020

Description

Suggestions

terrysahaidak May 30, 2020

Choose a reason for hiding this comment

renanmav Jun 3, 2020 • edited

Choose a reason for hiding this comment

renanmav commented May 30, 2020 • edited

terrysahaidak commented Jun 4, 2020

terrysahaidak commented Jun 4, 2020

wcandillon commented Jun 9, 2020 • edited

wcandillon commented Jun 9, 2020 • edited

renanmav commented Jun 9, 2020

wcandillon commented Jun 9, 2020

renanmav commented Jun 9, 2020

wcandillon commented Jul 2, 2020

terrysahaidak Jul 4, 2020

Choose a reason for hiding this comment

renanmav Jul 11, 2020

Choose a reason for hiding this comment

terrysahaidak left a comment

Choose a reason for hiding this comment

wcandillon commented Jul 8, 2020

terrysahaidak commented Jul 11, 2020

wcandillon commented Jul 17, 2020

wcandillon commented Jul 18, 2020

terrysahaidak commented Jul 20, 2020

likern commented Jul 20, 2020

renanmav commented Jul 21, 2020

jakub-gonet left a comment

Choose a reason for hiding this comment

jakub-gonet commented Jul 22, 2020

wcandillon commented Jul 22, 2020

MinimogDev commented Aug 3, 2020

wcandillon commented Aug 3, 2020 via email

renanmav Jun 3, 2020 •

edited

renanmav commented May 30, 2020 •

edited

wcandillon commented Jun 9, 2020 •

edited

wcandillon commented Jun 9, 2020 •

edited