Repository navigation
☂️ npm packages for react-native-web #35263
Description
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
Animateddirectory 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
AnimatedStyleforPlatform.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
Animatedto a separate package called@react-native/animatedwithinpackages/animated. - Use the package to create the
Animatedcomponents within React Native. - Publish the package to npm with Flow types compiled out / to comments.
- Adopt
@react-native/animatedin React Native for Web.
VirtualizedList
- Move
VirtualizedListandVirtualizedSectionListto a separate package called@react-native/virtualized-listswithinpackages/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-listsin React Native for Web.
FlatList
- Move
FlatListandSectionListto a separate package called@react-native/flat-lists(name tbd?) withinpackages/flat-lists. Feat: MoveFlatLists to@react-native/flat-listspackage #35423 - Publish the package to npm with Flow types compiled out / to comments.
- Adopt
@react-native/flat-listsin React Native for Web.
Activity
12 remaining items
necolas commentedon Mar 21, 2023
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 commentedon Mar 28, 2023
@necolas - Agreed, we do depend on React Native for our cross-platform product (
react-native-webincluded). 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 commentedon Mar 28, 2023
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 commentedon Jun 6, 2023
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 commentedon Jun 6, 2023
That was an oversight on our end, we added it now
DylanTet commentedon Oct 29, 2023
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 commentedon Oct 29, 2023
@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 commentedon Oct 30, 2023
@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 commentedon Jan 26, 2024
@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."
SGamrekelashvili commentedon Apr 20, 2025
Hello, I found out that no one has it done "Move Animated to a separate package called @react-native/animated within packages/animated" after @gabrieldonadel's comment, so I created a PR that includes those changes:
#50816
Looking forward work on this issue thanks
psnet commentedon Jun 28, 2025
so... as due to #50816 (comment) it will never be done without huge breaking of all ecosystem of RN
so sad 🙅
necolas commentedon Jun 28, 2025
We did it with VirtualizedList https://github.com/facebook/react-native/tree/main/packages/virtualized-lists
It usually shouldn't change anything for users of RN when parts are available as packages.
I'll close this issue since it's several years old and no longer in progress. Thanks for all the effort and progress made!