Feat: Move `FlatList`s to `@react-native/flat-lists` package by Pranav-yadav · Pull Request #35423 · react/react-native

Pranav-yadav · 2022-11-21T16:20:54Z

Summary

This PR moves FlatList, SectionList and related files (tests, etc.) to a new package @react-native/flat-lists located under packages/flat-lists as proposed in #35263
This is a first step towards moving all the FlatList-related code to a separate package.
This will allow us to make changes to the FlatList implementation without affecting the rest of the React Native codebase.

Changelog

[General] [Changed] - Move FlatLists to @react-native/flat-lists package.
FlatList and SectionList are now available in @react-native/flat-lists package.
Warning: This is a breaking(?) change, and you may need to update your imports to use the new package.

Test Plan

ensure yarn lint && yarn flow && yarn test is #00ff00

analysis-bot · 2022-11-21T16:45:03Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,520,731	+699
android	hermes	armeabi-v7a	7,836,751	+822
android	hermes	x86	9,000,706	+858
android	hermes	x86_64	8,855,902	+729
android	jsc	arm64-v8a	9,141,696	+275
android	jsc	armeabi-v7a	8,333,645	+287
android	jsc	x86	9,196,198	+282
android	jsc	x86_64	9,454,318	+285

Base commit: 928f4fb
Branch: main

analysis-bot · 2022-11-21T17:20:09Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: d9ade19
Branch: main

pull-bot · 2022-11-21T17:27:50Z

PR build artifact for 083b0448c43227649beef7c87ff2695316541235 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-21T17:30:55Z

PR build artifact for 083b0448c43227649beef7c87ff2695316541235 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-21T18:52:17Z

PR build artifact for de2c5be7b4623bee8344212ef5e4629f2cd9c923 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-21T18:53:41Z

PR build artifact for de2c5be7b4623bee8344212ef5e4629f2cd9c923 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

necolas

Have a look at the feedback on the VirtualizedList PR. Specifically:

We should not be reaching inside any packages. Instead @react-native/flat-lists should export everything that can be imported, and it should import from react-native and not internal paths.
This package should have the virtualized-lists package as a dependency, rather than creating circular dependencies.

#35406

pull-bot · 2022-11-22T16:45:16Z

PR build artifact for 17ce59e4ca4e75e47557af84ff75aa9eaec7a5a7 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-22T16:51:07Z

PR build artifact for 17ce59e4ca4e75e47557af84ff75aa9eaec7a5a7 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-22T17:13:59Z

PR build artifact for c3302acbbac3fa3fc4f6ab022548f179a94793be is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-22T17:18:39Z

PR build artifact for c3302acbbac3fa3fc4f6ab022548f179a94793be is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-22T18:50:56Z

PR build artifact for 0074ab579bb16185c679bdf5a40d57b9ee31ad26 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-22T18:54:34Z

PR build artifact for 0074ab579bb16185c679bdf5a40d57b9ee31ad26 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-23T13:29:44Z

PR build artifact for 6103302e7113bcf4c3e2938fe13ba7b7d74faea8 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-23T13:32:16Z

PR build artifact for 6103302e7113bcf4c3e2938fe13ba7b7d74faea8 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-23T14:53:32Z

PR build artifact for dcb0a8735bf95aa4b533e29e5a44d8af07771110 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-11-23T14:57:09Z

PR build artifact for dcb0a8735bf95aa4b533e29e5a44d8af07771110 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

Pranav-yadav · 2023-02-08T12:07:11Z

@NickGerleman / @hoxyq I have rebased this PR on main as the @react-native/virtualized-lists commit were merged.
Requesting another round of review.

Update:

rebased on main
fixed some typescripts errors

cc: @necolas
PS: Since this PR is being tracked under umbrella issue(s) you may add Tech: Monorepo label ...

Pranav-yadav · 2023-02-14T13:38:54Z

@necolas re-pinging, in case you missed.. 🙂

Edit: cc @cortinico

Pranav-yadav · 2023-02-26T15:26:45Z

@NickGerleman please let me know if should rebase again so that you can review it afterwards.
PS: I just don't want to waste this much effort put into refactoring it.

I know this might not be prioritized but, I don't have any idea about it as well; (no one is replying), hence pinging again.
Sorry for the re-pings.

NickGerleman · 2023-03-22T17:37:48Z

Sorry I haven't been able to take a close look at this (though it seems like you found some help on the Discord). Though as a general bit of feedback, I'm not sure it makes sense to add a new plural flat-lists package, when we have one FlatList, vs adding to the existing plural virtualized-lists package, which currently also only has one list.

necolas · 2023-03-22T17:41:56Z

They both also have the section list variant

Pranav-yadav · 2023-03-22T19:43:58Z

Sorry I haven't been able to take a close look at this.

No worries :)

I'm not sure it makes sense to add a new plural flat-lists package.

I did consider that at the start only but, it's not a FlatList only package; virtualized-lists and flat-lists have SectionList variants.
and specifically flat-lists has:

SectionList,
SectionListModern

variants as well.. as Nicolas said.
So I think plural seems logical here, yet it should have been singular only, iff SectionList had been isolated earlier...

They both also have the section list variant

Yeah.

Summary: This diff moves `FlatList` and `SectionList` to a new package `@react-native/flat-lists`. This is a first step towards moving all the `FlatList`-related code to a separate package. This will allow us to make changes to the `FlatList` implementation without affecting the rest of the React Native codebase. Changelog: [General] [Changed] - Move `FlatList`s to `@react-native/flat-lists` package. `FlatList` and `SectionList` are now available in `@react-native/flat-lists` package. **Warning**: This though this is NOT a breaking change, and you will NOT need to update your imports to use the new package. But, moving forward it will be better to install `@react-native/flat-list` if you want to import explicitly.

Pranav-yadav · 2023-03-23T17:15:17Z

🎉 All Green !!

Will anyone import this?

@NickGerleman

necolas · 2023-03-23T19:10:59Z

+ */
+
+import typeof ScrollViewNativeComponent from 'react-native';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';


Please can we avoid having any imports from RN internals in this package

Yeah. I forgot that; this way it may not work in external projects.
Right now I'm in college, will try to change it once I reach home.
Thanks.

Sorry for the delay. I'm busy with assignment tests at college, will try to look at this; tomorrow eod..

can we avoid having any imports from RN internals in this package
@necolas in order to avoid all of them, we'll need to export some other modules from react-native such as,
deepDiffer
@NickGerleman Are there any issues against that? If no issues, then should I open separate PR(s) for those changes or it is fine to do it in this PR only?

Also, those types are not exported from react-native
So, they will need to be exported, in order to directly import??

roryabraham · 2023-06-14T16:58:44Z

Apologies if this has been discussed already, but might it be simpler to just include these files in the @react-native/virtualized-lists package? Is there any advantage to keeping them separate?

Edit: Oh, this is the same feedback @NickGerleman had above: #35423 (comment)

Pranav-yadav · 2023-06-15T04:58:14Z

Theoretically "Yes". But, both lists were implemented and exist for a special (different) purpose, keeping them separate would support the initial cause of "separation of concerns".

If we combine them into a "single" package:

Sine, both have SectionList variants it could be confusing.
Would significantly increase the package size. (unwanted)
There is possibility that some types may collide.

WDYT?

P.S.: Personally, I would've loved to have them in a single package named @react-native/lists (or similar) in the first place but, doing this change now would need a breaking release while keeping it backward compatible.

github-actions · 2023-12-12T05:13:32Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions · 2023-12-27T05:23:46Z

This PR was closed because it has been stalled for 7 days with no activity.

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 21, 2022

Pranav-yadav mentioned this pull request Nov 21, 2022
☂️ npm packages for react-native-web #35263
Closed
13 tasks

Pranav-yadav force-pushed the feat/add-flat-lists-package branch from 083b044 to de2c5beCompare November 21, 2022 18:18

This comment was marked as resolved.
Sign in to view

necolas suggested changes Nov 21, 2022
View reviewed changes

Pranav-yadav force-pushed the feat/add-flat-lists-package branch 2 times, most recently from 17ce59e to c3302acCompare November 22, 2022 16:43

Pranav-yadav force-pushed the feat/add-flat-lists-package branch from c3302ac to 0074ab5Compare November 22, 2022 18:21

This comment was marked as resolved.
Sign in to view

Pranav-yadav force-pushed the feat/add-flat-lists-package branch from 0074ab5 to 6103302Compare November 23, 2022 12:59

Pranav-yadav force-pushed the feat/add-flat-lists-package branch from 6103302 to dcb0a87Compare November 23, 2022 14:24

cortinico requested changes Nov 23, 2022
View reviewed changes

Comment threadpackages/flat-lists/package.json Outdated
Comment threadpackages/flat-lists/package.json Outdated

Pranav-yadav force-pushed the feat/add-flat-lists-package branch 2 times, most recently from 2429a77 to d67acb3Compare November 23, 2022 15:47

Pranav-yadav force-pushed the feat/add-flat-lists-package branch 2 times, most recently from a6ce399 to 9e18d0aCompare February 7, 2023 18:49

Pranav-yadav requested review from necolas and removed request for cortinico February 8, 2023 11:57

necolas reviewed Feb 26, 2023
View reviewed changes

Comment threadLibraries/Animated/components/AnimatedFlatList.js Outdated

Pranav-yadav force-pushed the feat/add-flat-lists-package branch from 9e18d0a to eb493e8Compare February 27, 2023 19:04

Pranav-yadav commented Feb 27, 2023
View reviewed changes

Comment threadpackages/flat-lists/Lists/FlatList.js.flow Outdated

Pranav-yadav requested a review from necolas February 27, 2023 19:40

Pranav-yadav force-pushed the feat/add-flat-lists-package branch 2 times, most recently from b4fc24f to 0b9a654Compare March 22, 2023 11:21

Pranav-yadav commented Mar 22, 2023
View reviewed changes

Comment threadpackages/flat-lists/package.json Outdated

Pranav-yadav force-pushed the feat/add-flat-lists-package branch from 0b9a654 to 94c33d8Compare March 22, 2023 12:00

Pranav-yadav force-pushed the feat/add-flat-lists-package branch 2 times, most recently from 6b4891a to 600c5afCompare March 23, 2023 14:05

Pranav-yadav force-pushed the feat/add-flat-lists-package branch from 600c5af to 7184780Compare March 23, 2023 14:48

necolas reviewed Mar 23, 2023
View reviewed changes

github-actionsBot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 12, 2023

github-actionsBot closed this Dec 27, 2023

Uh oh!

Conversation

Pranav-yadav commented Nov 21, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changelog

Test Plan

Uh oh!

analysis-bot commented Nov 21, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

analysis-bot commented Nov 21, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pull-bot commented Nov 21, 2022

Uh oh!

pull-bot commented Nov 21, 2022

Uh oh!

This comment was marked as resolved.

pull-bot commented Nov 21, 2022

Uh oh!

pull-bot commented Nov 21, 2022

Uh oh!

necolas left a comment

Choose a reason for hiding this comment

Uh oh!

pull-bot commented Nov 22, 2022

Uh oh!

pull-bot commented Nov 22, 2022

Uh oh!

pull-bot commented Nov 22, 2022

Uh oh!

pull-bot commented Nov 22, 2022

Uh oh!

pull-bot commented Nov 22, 2022

Uh oh!

pull-bot commented Nov 22, 2022

Uh oh!

This comment was marked as resolved.

pull-bot commented Nov 23, 2022

Uh oh!

pull-bot commented Nov 23, 2022

Uh oh!

pull-bot commented Nov 23, 2022

Uh oh!

pull-bot commented Nov 23, 2022

Uh oh!

Uh oh!

Uh oh!

Pranav-yadav commented Feb 8, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Pranav-yadav commented Feb 14, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Pranav-yadav commented Feb 26, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

NickGerleman commented Mar 22, 2023

Uh oh!

necolas commented Mar 22, 2023

Uh oh!

Pranav-yadav commented Mar 22, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Pranav-yadav commented Mar 23, 2023

🎉 All Green !!

Will anyone import this?

Uh oh!

necolasMar 23, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Pranav-yadavMar 24, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Pranav-yadav commented Nov 21, 2022•
edited
Loading

analysis-bot commented Nov 21, 2022•
edited
Loading

analysis-bot commented Nov 21, 2022•
edited
Loading

Pranav-yadav commented Feb 8, 2023•
edited
Loading

Pranav-yadav commented Feb 14, 2023•
edited
Loading

Pranav-yadav commented Feb 26, 2023•
edited
Loading

Pranav-yadav commented Mar 22, 2023•
edited
Loading

necolasMar 23, 2023•
edited
Loading

Pranav-yadavMar 24, 2023•
edited
Loading

roryabraham commented Jun 14, 2023•
edited
Loading