Allow providing an external scrollview. #502

gorhom · 2022-07-03T15:01:27Z

Description

Fixes (issue #)

This PR will allow passing an external scrollview to the recyclerlistview, which is needed to allow gesture interactions with react-native-gesture-handler especially on Android.

Reviewers’ hat-rack 🎩

Prop description and docs.

Screenshots or videos (if needed)

Before

Screen.Recording.2022-07-03.at.15.48.05.mov

After

Screen.Recording.2022-07-03.at.15.47.18.mov

Checklist

I have added a changelog entry following the Keep a Changelog guidelines.

nandorojo · 2022-07-03T17:17:57Z

Thoughts on renaming the prop to ScrollViewComponent?

naqvitalha · 2022-07-04T14:20:30Z

@gorhom VirtualizedList already has a prop called renderScrollComponent. I'd suggest we reuse the same contract to make sure FlashList remains closer to default lists. Thoughts?

gorhom · 2022-07-04T21:00:42Z

@naqvitalha sounds better! i have updated the pr 👍

naqvitalha

Few more comment. Looks good otherwise.

naqvitalha · 2022-07-05T03:27:35Z

src/FlashListProps.ts

+   * Rendered as the main scrollview. Its contract for the scroll event should match the native scroll event contract, i.e.
+   * `scrollEvent = { nativeEvent: { contentOffset: { x: offset, y: offset } } }`
+   */
+  renderScrollComponent?:


Let's use default scroll view props from RN. That should be fine. All this complexity in RLV is due to its web only implementation. FlashList doesn't depend on it so using ScrollView props should be fine.

naqvitalha · 2022-07-05T03:27:57Z

src/FlashList.tsx

@@ -350,6 +351,7 @@ class FlashList<T> extends React.PureComponent<
          windowCorrectionConfig={this.getUpdatedWindowCorrectionConfig()}
          itemAnimator={this.itemAnimator}
          suppressBoundedSizeException
+          externalScrollView={renderScrollComponent as any}


Typecast to BaseScrollView instead

i had to cast it to RecyclerListViewProps["externalScrollView"] instead

externalScrollView?: { new (props: ScrollViewDefaultProps): BaseScrollView; };

naqvitalha · 2022-07-05T03:28:51Z

documentation/docs/fundamentals/usage.md

@@ -96,6 +96,14 @@ estimatedItemSize?: number;

 ---

+### `renderScrollComponent`


nit: Props are sorted alphabetically. Moving this would be helpful.

naqvitalha · 2022-07-05T03:29:00Z

CHANGELOG.md

@@ -10,6 +10,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 ## [1.0.4] - 2022-07-02

 - Build fix for Android projects having `kotlinVersion` defined in `build.gradle`.
+- Allow providing an external scrollview.


Add link to this PR here

naqvitalha · 2022-07-06T13:41:15Z

@gorhom we plan to rollout a new version tomorrow. It would be great if you can address the comments and we pull this in :)

gorhom · 2022-07-06T21:06:37Z

@naqvitalha i have addressed you comments in the latest commit 👍

naqvitalha

Thanks for the PR. Looks great!

RoccoDocco · 2023-08-29T09:38:49Z

Using this prop this way:
renderScrollComponent={props => <ScrollView {...props} />}
I get this warning:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

sdfricke · 2023-11-21T19:01:25Z

Using this prop this way: renderScrollComponent={props => <ScrollView {...props} />} I get this warning: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

I'm seeing the same issue

hirbod · 2023-11-21T22:58:58Z

const ScrollViewWithRef = React.forwardRef((props, ref) => (
  <ScrollView {...props} ref={ref} />
)) as typeof ScrollView;

sdfricke · 2023-11-22T20:23:48Z

const ScrollViewWithRef = React.forwardRef((props, ref) => (
  <ScrollView {...props} ref={ref} />
)) as typeof ScrollView;

Thank you for the suggestion. I'm not quite grasping how that would be implemented in the context of this simple example:
renderScrollComponent={props => <ScrollView {...props} />}

I've tried a couple different ways but getting quite a few errors so I'm guessing I'm not implementing that suggestion as intended.

hirbod · 2023-11-22T20:59:09Z

import scrollview from react-native-gesture-handler
use my snippet
pass renderScrollComponent={ScrollViewWithRef}

Enjoy

sdfricke · 2023-11-22T21:16:43Z

import scrollview from react-native-gesture-handler

use my snippet

pass renderScrollComponent={ScrollViewWithRef}

Enjoy

Thanks again for following up. I do have that same strategy implemented but still getting a warning:

Warning: Failed prop type: Invalid prop `externalScrollView` of type `object` supplied to `ProgressiveListView`, expected `function`.

hirbod · 2023-11-22T21:44:53Z

Please create a repo on Snack so I can have a look

sdfricke · 2023-11-28T17:05:27Z

@hirbod it turns out I was on an older version. It looks like the issue I was seeing was fixed in version 1.4.0 as described here: #616

Thanks again for your assistance!

gorhom added 3 commits July 3, 2022 15:43

patch: allow providing external scrollview to recyclerlistview

c2d4fae

docs: added ExternalScrollViewComponent to docs

0d552c5

docs: updated changelog

939ebbf

ghost added the cla-needed label Jul 3, 2022

refactor: updated the prop name to renderScrollComponent

3d8d137

ghost removed the cla-needed label Jul 4, 2022

naqvitalha reviewed Jul 5, 2022

View reviewed changes

refactor: addressing the pr comments

9401507

naqvitalha approved these changes Jul 6, 2022

View reviewed changes

Merge branch 'main' into main

78e686e

naqvitalha merged commit 5c6fb9a into Shopify:main Jul 6, 2022

alantoa mentioned this pull request Aug 11, 2022

docs: update unsupported list #555

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow providing an external scrollview. #502

Allow providing an external scrollview. #502

gorhom commented Jul 3, 2022

nandorojo commented Jul 3, 2022

naqvitalha commented Jul 4, 2022

gorhom commented Jul 4, 2022

naqvitalha left a comment

naqvitalha Jul 5, 2022

naqvitalha Jul 5, 2022

gorhom Jul 6, 2022

naqvitalha Jul 5, 2022

naqvitalha Jul 5, 2022

naqvitalha commented Jul 6, 2022

gorhom commented Jul 6, 2022

naqvitalha left a comment

RoccoDocco commented Aug 29, 2023

sdfricke commented Nov 21, 2023

hirbod commented Nov 21, 2023

sdfricke commented Nov 22, 2023 •

edited

hirbod commented Nov 22, 2023

sdfricke commented Nov 22, 2023

hirbod commented Nov 22, 2023

sdfricke commented Nov 28, 2023 •

edited

		@@ -96,6 +96,14 @@ estimatedItemSize?: number;

		---

		### `renderScrollComponent`

Allow providing an external scrollview. #502

Allow providing an external scrollview. #502

Conversation

gorhom commented Jul 3, 2022

Description

Reviewers’ hat-rack 🎩

Screenshots or videos (if needed)

Before

After

Checklist

nandorojo commented Jul 3, 2022

naqvitalha commented Jul 4, 2022

gorhom commented Jul 4, 2022

naqvitalha left a comment

Choose a reason for hiding this comment

naqvitalha Jul 5, 2022

Choose a reason for hiding this comment

naqvitalha Jul 5, 2022

Choose a reason for hiding this comment

gorhom Jul 6, 2022

Choose a reason for hiding this comment

naqvitalha Jul 5, 2022

Choose a reason for hiding this comment

naqvitalha Jul 5, 2022

Choose a reason for hiding this comment

naqvitalha commented Jul 6, 2022

gorhom commented Jul 6, 2022

naqvitalha left a comment

Choose a reason for hiding this comment

RoccoDocco commented Aug 29, 2023

sdfricke commented Nov 21, 2023

hirbod commented Nov 21, 2023

sdfricke commented Nov 22, 2023 • edited

hirbod commented Nov 22, 2023

sdfricke commented Nov 22, 2023

hirbod commented Nov 22, 2023

sdfricke commented Nov 28, 2023 • edited

sdfricke commented Nov 22, 2023 •

edited

sdfricke commented Nov 28, 2023 •

edited