WIP: Web support #16

vishalnarkhede · 2021-05-24T09:49:25Z

Using react-virtuoso to power web support for infinite scrollable list, keeping the same API as FlatList
https://codesandbox.io/s/rnw-support-infinite-scroll-3i4q3?file=/src/MessageListExample.tsx

kidroca · 2021-06-15T21:34:31Z

src/BidirectionalFlatList.tsx

+              behavior: animated ? 'smooth' : 'auto',
+              index: 0,
+            });
+          } else {


This can be switched to

const index = inverted ? 0 : vData.length - 1; virtuosoRef.current?.scrollToIndex({ behavior: animated ? 'smooth' : 'auto', index, });

Thanks , I will check it out. Planning to publish beta on this next week :) Please let me know if you find more things.
PR needs some testing and some cleanup which will happen early next week :)

kidroca

I've tried this out over the weekend and put some thoughts here

No hard feelings, but at the moment this web implementation is noticeably slower than the web implementation from react-native-web Flatlist

I've tried playing around with overscan but it doesn't seem to affect the issue

It looks like Virtuoso is the bottleneck though I'm not 100% certain

kidroca · 2021-06-19T10:51:48Z

package.json

+    "react-dom": "^17.0.2",
    "react-native": "0.63.4",
    "react-native-builder-bob": "^0.17.1",
+    "react-virtuoso": "^1.6.0",


react-virtuoso should probably be listed in dependencies or peerDependencies

kidroca · 2021-06-19T11:35:45Z

src/BidirectionalFlatList.tsx

+      () => ({
+        flashScrollIndicators: () => null,
+        getNativeScrollRef: () => null,
+        getScrollableNode: () => null,


I think this can return scrollerRef.current - getScrollableNode: () => scrollerRef.current

Unfortunately it will be available on the 2nd render, so the parent component that uses BidirectionalFlatList won't have it during componentDidMount or useEffect(() => {}, [])

With the original FlatList getScrollableNode would return the node for componentDidMount

kidroca · 2021-06-19T11:42:06Z

src/BidirectionalFlatList.tsx

+        <Virtuoso<T>
+          components={{
+            Footer,
+            Header,
+          }}
+          firstItemIndex={firstItemIndex.current}
+          initialTopMostItemIndex={
+            inverted
+              ? vData.length - 1 - initialScrollIndex
+              : initialScrollIndex
+          }
+          itemContent={itemContent}
+          onScroll={handleScroll}
+          overscan={300}
+          ref={virtuosoRef}
+          // @ts-ignore
+          scrollerRef={(ref) => (scrollerRef.current = ref)}
+          totalCount={vData.length}
+        />


This portion is pretty much repeated and can be extracted to a const

const VirtuozoNode = ( <Virtuoso<T> components={{}} ... /> ); if (!onRefresh) { return VirtuozoNode; } return ( <Animated.View> <Animated.View> <ActivityIndicator /> </Animated.View> {VirtuozoNode} </Animated.View> )

kidroca · 2021-06-19T13:35:58Z

src/BidirectionalFlatList.tsx

-        <View style={styles.indicatorContainer}>
-          <ActivityIndicator size={'small'} color={activityIndicatorColor} />
-        </View>
+        <Virtuoso<T>


FlatList has getItemLayout prop to aid rendering
Virtuoso has itemSize but it's called with an html element: https://virtuoso.dev/virtuoso-api-reference/ (see itemSize)

I don't see a way to make use of getItemLayout with Virtuoso

FlatList.getItemLayout -> is called with data, index and returns { length, offset, index }

Virtuoso.itemSize -> is called with domNode and returns a number (height or width of the item)

does this mean that Virtuoso have to first render the items and then update the size ?

For web it might be impossible to implement getItemLayout when Virtuoso is used for virtualization

Other libraries like react-virtual provide a compatible interface

You can do something like:

estimateSize = index => { const size = props.getItemLayout(props.data, index); return size.length; }

kidroca · 2021-06-19T14:13:26Z

src/BidirectionalFlatList.tsx

+          }
+          itemContent={itemContent}
+          onScroll={handleScroll}
+          overscan={300}


This can be something like

overscan={(scrollerRef.current?.offsetHeight * props.windowSize) || 300}

As per https://reactnative.dev/docs/virtualizedlist#windowsize this is how many screens of data to pre-render
And per https://virtuoso.dev/virtuoso-api-reference/ overscan is in px

Not sure if windowSize has to be halved though

for 21 react-native FlatList would add 10 pages up and 10 down

would Virtuoso do the same or add 21 pages up and 21 pages down?

kidroca · 2021-06-21T08:37:30Z

src/BidirectionalFlatList.tsx

+    }, [onRefresh]);
+
+    if (!vData?.length || vData?.length === 0) {
+      return <ListEmptyComponent />;


It seems that this does not have a default and crashes when vData is empty

Perhaps it can just return null when ListEmptyComponent is not defined
or have a default ListEmptyComponent

kidroca · 2021-06-21T11:40:26Z

src/BidirectionalFlatList.tsx

+    const startReached = async () => {
+      if (
+        !onStartReached ||
+        prependingItems.current ||
+        onStartReachedInProgress ||
+        (inverted && !onEndReached) ||
+        (!inverted && !onStartReached)
+      ) {
+        return;


For some reason both startReached and endReached are not always triggered, even when there is more data to be loaded

I think it has to do with the count of items rendered
For some chats scrolling to the past (on inverted list) triggers onEndReached and loads older messages, for others it isn't getting picked up
We're using an inverted list so that's where I've test the most, but I did swap it for non-inverted and it seemed it worked better

vishalnarkhede · 2021-07-17T10:35:09Z

I've tried this out over the weekend and put some thoughts here

No hard feelings, but at the moment this web implementation is noticeably slower than the web implementation from react-native-web Flatlist

I've tried playing around with overscan but it doesn't seem to affect the issue

It looks like Virtuoso is the bottleneck though I'm not 100% certain

Hey @kidroca can you share some screen-recording? Just to understand !!

…Stream/react-native-bidirectional-infinite-scroll into vishal/web-support-onrefresh

szado · 2024-05-27T18:12:21Z

@vishalnarkhede do you plan to finish web support? Is this package still being developed?

vishalnarkhede added 4 commits April 10, 2021 16:37

feat: adding web support

a782467

0.4.0-dev.0

3fd3c39

onrefresh functionality

25e1fa8

fixing inverted prop

4e423b3

vishalnarkhede changed the base branch from vishal/web-support to main May 24, 2021 14:12

vishalnarkhede changed the title ~~Vishal/web support onrefresh~~ WIP: Web support May 24, 2021

fixing inverted prop

4527cc2

vishalnarkhede linked an issue May 29, 2021 that may be closed by this pull request

Does it work on web? #9

Open

marcaaron mentioned this pull request Jun 15, 2021

Implement bidirectional scrolling in ecash Expensify/App#2985

Closed

kidroca reviewed Jun 15, 2021

View reviewed changes

kidroca reviewed Jun 21, 2021

View reviewed changes

vishalnarkhede added 5 commits July 17, 2021 12:40

cleanup and pull-to-refresh action (experimental)

8cc2c03

Merge branch 'vishal/web-support-onrefresh' of https://github.com/Get…

4e44376

…Stream/react-native-bidirectional-infinite-scroll into vishal/web-support-onrefresh

fixing lint issue

34fe943

fixing conflict resolution issues

0378595

0.4.0-dev.1

c1f1876

vishalnarkhede force-pushed the vishal/web-support-onrefresh branch from e685877 to c1f1876 Compare July 19, 2021 07:43

WIP: Web support #16

Are you sure you want to change the base?

WIP: Web support #16

Uh oh!

Conversation

vishalnarkhede commented May 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kidroca left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vishalnarkhede commented Jul 17, 2021

Uh oh!

szado commented May 27, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vishalnarkhede commented May 24, 2021 •

edited

Loading