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

Closed

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

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!

necolas Mar 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-yadav Mar 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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