Feat: Move `FlatList`s to `@react-native/flat-lists` package #35423

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 083b044 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 083b044 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 de2c5be 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 de2c5be 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 17ce59e 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 17ce59e 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 c3302ac 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 c3302ac 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 0074ab5 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 0074ab5 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 6103302 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 6103302 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 dcb0a87 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 dcb0a87 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.

packages/flat-lists/package.json

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.

Libraries/Animated/components/AnimatedFlatList.js

packages/flat-lists/Lists/FlatList.js.flow

packages/flat-lists/package.json

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

packages/flat-lists/Lists/FlatList.js

+ */
+
+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

Open

13 tasks

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

This comment was marked as resolved.

Sign in to view

necolas requested 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 c3302ac Compare November 22, 2022 16:43

Pranav-yadav force-pushed the feat/add-flat-lists-package branch from c3302ac to 0074ab5 Compare 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 6103302 Compare November 23, 2022 12:59

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

cortinico requested changes Nov 23, 2022

View reviewed changes

packages/flat-lists/package.json Outdated Show resolved Hide resolved

packages/flat-lists/package.json Outdated Show resolved Hide resolved

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

Pranav-yadav force-pushed the feat/add-flat-lists-package branch 2 times, most recently from a6ce399 to 9e18d0a Compare 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

Libraries/Animated/components/AnimatedFlatList.js Outdated Show resolved Hide resolved

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

Pranav-yadav commented Feb 27, 2023

View reviewed changes

packages/flat-lists/Lists/FlatList.js.flow Outdated Show resolved Hide resolved

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 0b9a654 Compare March 22, 2023 11:21

Pranav-yadav commented Mar 22, 2023

View reviewed changes

packages/flat-lists/package.json Show resolved Hide resolved

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

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

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

necolas reviewed Mar 23, 2023

View reviewed changes

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

github-actions bot closed this Dec 27, 2023

Feat: Move FlatLists to @react-native/flat-lists package #35423

Feat: Move FlatLists to @react-native/flat-lists package #35423

Conversation

Pranav-yadav commented Nov 21, 2022 • edited Loading

Summary

Changelog

Test Plan

analysis-bot commented Nov 21, 2022 • edited Loading

analysis-bot commented Nov 21, 2022 • edited Loading

pull-bot commented Nov 21, 2022

pull-bot commented Nov 21, 2022

This comment was marked as resolved.

pull-bot commented Nov 21, 2022

pull-bot commented Nov 21, 2022

necolas left a comment

Choose a reason for hiding this comment

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

This comment was marked as resolved.

pull-bot commented Nov 23, 2022

pull-bot commented Nov 23, 2022

pull-bot commented Nov 23, 2022

pull-bot commented Nov 23, 2022

Pranav-yadav commented Feb 8, 2023 • edited Loading

Pranav-yadav commented Feb 14, 2023 • edited Loading

Pranav-yadav commented Feb 26, 2023 • edited Loading

NickGerleman commented Mar 22, 2023

necolas commented Mar 22, 2023

Pranav-yadav commented Mar 22, 2023 • edited Loading

Pranav-yadav commented Mar 23, 2023

🎉 All Green !!

Will anyone import this?

necolas Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

Pranav-yadav Mar 24, 2023 • edited Loading

Choose a reason for hiding this comment

Pranav-yadav Mar 28, 2023

Choose a reason for hiding this comment

Pranav-yadav Mar 29, 2023

Choose a reason for hiding this comment

Pranav-yadav Mar 29, 2023

Choose a reason for hiding this comment

roryabraham commented Jun 14, 2023 • edited Loading

Pranav-yadav commented Jun 15, 2023

github-actions bot commented Dec 12, 2023

github-actions bot commented Dec 27, 2023

Feat: Move `FlatList`s to `@react-native/flat-lists` package #35423

Feat: Move `FlatList`s to `@react-native/flat-lists` package #35423

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

necolas Mar 23, 2023 •

edited

Loading

Pranav-yadav Mar 24, 2023 •

edited

Loading

roryabraham commented Jun 14, 2023 •

edited

Loading