Using LegendList to replace Scrollview?

[ak-specto]

Implementing huge dynamic screens with ScrollView is some of the times painful, since ScrollView renders everything instantly and if the screen has many different components that can drop performance.

Has anyone tried implementing LegendList as a scrollview alternative, that can render different components?

An example:

const sections = ['Chart', 'Presentation', 'Indicators', 'Documents'];
// -----
   <LegendList
		data={sections.map((item) => item.name)}
		keyExtractor={(item) => item}
		renderItem={({ item }) => {
			if (item === 'Chart') {
				return <Chart />;
			}

			if (item === 'Presentation') {
				return <SomePresentationModule />;
			}

			if (item === 'Indicators') {
				return <Indicators />;
			}

			if (item === 'Documents') {
				return <Documents/>;
			}

			return null;
		}}
	/>

the only issue I see is that we couldn't really handle estimatedItemSize since the height of the components will be all over the place. I am replacing FlatList on some old projects with LegendList and it worked perfectly, but now only ScrollViews are left, and I am unsure how to tackle them.

[jmeistrich]

Oops, I hadn't seen this before!

I think that should work just fine. In 1.0 the estimatedItemSize isn't needed anymore, so it should be all good.

It would be ideal for perf to have a getItemType so that the recycling system could recycle the same component. I have a branch to do that in progress... But for now it should work well enough I think! Please let me know if you run into any issues.

[BalogunofAfrica]

I’ve been thinking about starting this discussion. Thank you @ak-specto for this.

I implemented something like this using FlashList: https://gist.github.com/BalogunofAfrica/15e3ed757b6dcb730e106cc7623ddea0

The Shopify team also confirmed that they do use something similar internally in this tweet https://x.com/naqvitalha/status/1641790541636702210?s=46 and this blog https://shopify.engineering/improving-shopify-app-s-performance.

It would be a nicety to have an official implementation exposed from LegendList(and FlashList).

[SpectoIT]

Just wanted to let you know that now I also received an answer from Talha Naqvi (Shopify staff engineer) about the usage of LazyScrollView - if that helps

Shopify/flash-list#1662
https://gist.github.com/naqvitalha/cdaf87ef531fdd3cd0f26352b8ef770d

we can close this discussion, thanks :)