☂️ npm packages for react-native-web

[necolas]

Description

These are spillover tasks from the W3C props & styles projects. The aim is to move user-space modules into their own packages within the monorepo. React Native for Web must currently copy-paste-edit these modules. Publishing these modules as npm packages will allow React Native and React Native for Web to depend on the same implementations, providing users of cross-platform React with a more reliable foundation (and making it easier for RNWeb to be maintained.)

Once again we're looking for the community's help! If you're interested in helping to reorganize the RN monorepo, you could contribute by helping to move these modules into packages with @cortinico's oversight. If you're interested in improving consistency between RN and RNWeb, you could contribute by helping to prepare those new packages for npm publication and consumption by RNWeb. We're also open to suggestions and feedback on how to proceed.

Animated

• Convert all files in the Animated directory to use ESModule imports/exports. refactor: Convert Animated directory to use ESModule imports/exports #34539
• Prevent crashes caused by use of TurboModules outside of native environments.
• Patch AnimatedStyle for Platform.OS === 'web'. React Native for Web has a patch for this that can be upstreamed. fix: Patch AnimatedStyle to avoid discarding the initial style info #35198
• Move Animated to a separate package called @react-native/animated within packages/animated.
• Use the package to create the Animated components within React Native.
• Publish the package to npm with Flow types compiled out / to comments.
• Adopt @react-native/animated in React Native for Web.

VirtualizedList

• Move VirtualizedList and VirtualizedSectionList to a separate package called @react-native/virtualized-lists within packages/virtualized-lists. feat: Move virtualized lists to @react-native/virtualized-lists #35406
• Publish the package to npm with Flow types compiled out / to comments.
• Adopt @react-native/virtualized-lists in React Native for Web.

FlatList

• Move FlatList and SectionList to a separate package called @react-native/flat-lists (name tbd?) within packages/flat-lists. Feat: Move FlatLists to @react-native/flat-lists package #35423
• Publish the package to npm with Flow types compiled out / to comments.
• Adopt @react-native/flat-lists in React Native for Web.

[gabrieldonadel]

• Move FlatList and SectionList to a separate package called @react-native/flat-lists (name tbd?) within packages/flat-lists.

@necolas let me just double-check this for clarity, if I understand this correctly @react-native/flat-lists would have @react-native/virtualized-lists as a dependency, right?

Do we have plans on how to handle local changes in order to test these? AFAIK metro does not support symlinks

[necolas]

If I understand this correctly @react-native/flat-lists would have @react-native/virtualized-lists as a dependency, right?

yeah I think so

AFAIK metro does not support symlinks

does it not support Node.js resolution? we already have other packages broken out

[kelset]

@necolas you can read more about the symlink stuff here: #34692 (comment) (once we figure it out for that effort, the learning will be useful here too)

[gabrieldonadel]

• Move VirtualizedList and VirtualizedSectionList to a separate package called @react-native/virtualized-lists within packages/virtualized-lists.

@necolas should we also include the RefreshControl component in this package as it's used by VirtualizedList?

[Pranav-yadav]

Move FlatList and SectionList to a separate package called @react-native/flat-lists (name tbd?) within packages/flat-lists.

@necolas / @kelset I've tried to move the FlatLists to @react-native/flat-lists package; here [DRAFT] #35423
If any concerns¹; do let me know under the PR

Edit: Also lmk 👇

(name tbd?)

PS: I'm following things discussed here as well as @gabrieldonadel 's PR :)

Footnotes

1. I will wait for @react-native/virtualized-lists to merge and update the same in PR. Till then y'all can give feedback :) ↩

[lunaleaps]

If any packages land before 0.72 is cut then we might need to create separate DT types for each separated package (only to be deprecated for 0.73)

[cortinico]

Once again we're looking for the community's help! If you're interested in helping to reorganize the RN monorepo, you could contribute by helping to move these modules into packages with @cortinico's oversight

Thanks for the ping @necolas
Sharing it here but I've been flagging it on a couple of PRs:
all the newly created packages should be scoped under @react-native and versioned as 0.72.0.

Additionally, you might face failures on CircleCI for template tests till those packages are published to NPM. We're looking into either using Verdaccio or other solutions to overcome those limitations (cc @hoxyq)

[jacobp100]

Is there a goal here too to not have these packages's JS bundled in an RN app that's not using them? So if I'm not using FlatList, I won't have the JS bundled in my app?

[necolas]

Do we have an idea of when we will start publishing packages to npm with Flow types compiled out / to comments? It's currently not feasible for React Native for Web to depend on @react-native/virtualized-lists while the code on npm is invalid JS - https://www.npmjs.com/package/@react-native/virtualized-lists

[necolas]

I am still repeatedly answering issues from people who wonder why RN npm packages crash in web bundlers necolas/react-native-web#2490

[hoxyq]

Do we have an idea of when we will start publishing packages to npm with Flow types compiled out / to comments? It's currently not feasible for React Native for Web to depend on @react-native/virtualized-lists while the code on npm is invalid JS - https://www.npmjs.com/package/@react-native/virtualized-lists

I feel like this could be in scope of this project, maybe a separate task to support this across packages. Because this is not the part of monorepo project so far, and looks like virtualized-lists and flat-lists both should have it to be supported by react-native-web

[necolas]

There are a number of significant stakeholders, like Expensify, who depend on RN for their cross-platform product. And it seems to be an ongoing source of issues for them that these major modules are not kept in sync across native and web. I think we really need to get these modules into installable packages and published as compiled JS ASAP.

[AndrewGable]

@necolas - Agreed, we do depend on React Native for our cross-platform product (react-native-web included). Please let us know if/how we (Expensify) can help move this project along. If there is anything we can do from implementation, design, or sponsor work; we are happy to help.

[necolas]

Thanks. Any of the incomplete tasks above are in need of attention. We still need to compile to JS before publishing too. I don't think there's a mechanism for automatic publishing yet, but manually publishing the packages once they've been created would be good enough for RNW to start the transition.

[Maxime-p]

Hi,
Small question.
Why this issue isn't tag with a label "☂️ Umbrella"?
I am looking for a good first issue to contribute and I searched with the label and not all Umbrella issues appeared cause they are not tagged.
Sorry if I'm irrelevant.

[cortinico]

Why this issue isn't tag with a label "☂️ Umbrella"?

That was an oversight on our end, we added it now

[DylanTet]

Started working on Move Animated to a separate package called @react-native/animated within packages/animated. @necolas @cortinico . Just trying to figure out which files need to be moved to the new folder.

[gabrieldonadel]

Started working on Move Animated to a separate package called @react-native/animated within packages/animated. @necolas @cortinico . Just trying to figure out which files need to be moved to the new folder.

@DylanTet I don't have the bandwidth to work on this right now but you can use my PR as a base for what needs to be changed #35467

[DylanTet]

@gabrieldonadel thanks man! Looking at it now, if you dont mind me asking, what exactly did you guys mean by having issues with the new monorepo structure?

[fnwk]

@necolas Hey, if no one is working on it, i can take care of "Move Animated to a separate package called @react-native/animated within packages/animated."