Details

Reviewers

ashoat
tomek

Commits

Summary

We’re using @babel/preset-flow which stripes the flow types. However, presets are run after plugins (https://babeljs.io/docs/plugins#plugin-ordering). That means reanimated plugin is getting the code with types.
In reanimated plugin there is a code that strips typescript types: https://github.com/software-mansion/react-native-reanimated/blob/2.17.0/plugin.js#L361-L374 so it works with ts. However it doesn’t strip Flow types. So if I add @babel/preset-flow to the code I linked it fixes the issue.
To make it nicer I made it configurable so if anyone wants to add some other plugins or presets they can do so in reanimated plugin’s options. So now after the patch we can add @babel/preset-flow in reanimated plugin options.
I’m going to make a PR with this change to Reanimated’s repo later - it’s a simple change. Made a linear issue: https://linear.app/comm/issue/ENG-10007/make-a-pr-to-reanimated-repository-to-fix-flow-types-in-worklets

Also a note to teammebers: after merging this PR they’ll need to reinstall node modules and clear metro cache. Otherwise the app will crash.

Depends on D14112

Test Plan

Verify the app doesn't crash after adding flow types in a worklet.

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

angelika held this revision as a draft.

angelika published this revision for review.Wed, Dec 11, 4:55 PM

Great work on this!!

patches/react-native-reanimated+2.12.0.patch
34–42 ↗	(On Diff #46331)	Looks like we can delete lines 34 through 42 in this patchfile without consequence... it's just accidental linebreaks

This revision is now accepted and ready to land.Wed, Dec 11, 4:57 PM

One small thing – before landing, can you:

git grep prettier-ignore
Find all cases that correspond to commented-out Flow types. These work with Flow, but avoid breaking Reanimated.
Remove the prettier-ignore, and replace the commented-out Flow types with normal Flow types.
Either amend this diff or submit a new one if preferred.