Ability to pass scroll component implementation

[terrysahaidak]

In order to support bottom sheet libraries, we need to pass its scroll component. I saw this library implements animated and reanimated versions, but still would be cool to use it with @gorhom/bottom-sheet and other custom things that absolutely need access to the ScrollView.

[jmeistrich]

I actually added a renderScrollComponent prop in the latest version but forgot to add it to the documentation. I did some quick tests and it seemed to work, but I'm not sure if it's correct to support bottom sheet. What do you think? Do you want to try it and see if it works?

cc @assimelha #28 (comment)

[terrysahaidak]

Just tried to use that prop with 1.0.0-beta.0 and looks like doing this works:

renderScrollComponent={(props) => <BottomSheetScrollView {...props} />}

Thank you!

Another question regarding that.

I'm now getting a warning [legend-list] List height is 0. You may need to set a style or flex: for the list, because children are absolutely positioned.. I do have the height set, but looks like it gets measured when outside the screen (still animating) which doesn't always work on android afaik.

Any ideas how could i force to remeasure it?

[jmeistrich]

It might be related to #44

Is it possible to share a repro that we can test with? Otherwise we'll try to fix #44 at some point which hopefully will fix that.

[terrysahaidak]

Made a repro repository with the versions i use:
https://github.com/terrysahaidak/legend-list-bottom-sheet-repro

The issue exists on both iOS and Android.

2025-01-21.16.17.02.mov

[thiagobrez]

Just a heads up @terrysahaidak and possibly others in the future:

Passing renderScrollComponent as inline function might cause you to lose scroll position if the list is rerendered

renderScrollComponent={(props) => <BottomSheetScrollView {...props} />}

Instead, prefer extracting to a custom component:

const CustomScrollView = (props: ScrollViewProps) => {
  return <ScrollView {...props} />;
};