Flashlist Support

[andreibarabas]

Shopify recently open sourced their performant 60 FPS virtualised list, based on the native counterparts.

https://shopify.github.io/flash-list/

Since the API is similar to FlatList, we are doing an Adapter, but there are also some stuff that might require tweaks on the SDK side. For example, currently the infinite scrolling does not properly work with FlashList. Still investigating why that is

[andreibarabas]

What we discovered is that because of the way FlashList works, debouncing the loadMoreFinished actually hurts and breaks the pagination. Simply removing the debounce (here is the patch), solves the issue.

diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
index dec4243028c9fe9b5d3682998a831ba27dc0aa19..553e5a7ad383e11264f094c128d9c58ef6968076 100644
--- a/src/components/Channel/Channel.tsx
+++ b/src/components/Channel/Channel.tsx
@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
-import debounce from 'lodash/debounce';
+//import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import {
   ChannelState,
@@ -1364,16 +1364,16 @@ const ChannelWithContext = <
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
   const loadMoreFinished = useRef(
-    debounce(
+    //debounce(
       (updatedHasMore: boolean, newMessages: ChannelState<StreamChatGenerics>['messages']) => {
         setLoadingMore(false);
         setError(false);
         setHasMore(updatedHasMore);
         setMessages(newMessages);
       },
-      defaultDebounceInterval,
-      debounceOptions,
-    ),
+    //   defaultDebounceInterval,
+    //   debounceOptions,
+    // ),
   ).current;
 
   const loadMore: PaginatedMessageListContextValue<StreamChatGenerics>['loadMore'] = async (
@@ -1451,15 +1451,15 @@ const ChannelWithContext = <
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
   const loadMoreRecentFinished = useRef(
-    debounce(
+    //debounce(
       (newMessages: ChannelState<StreamChatGenerics>['messages']) => {
         setLoadingMoreRecent(false);
         setMessages(newMessages);
         setError(false);
       },
-      defaultDebounceInterval,
-      debounceOptions,
-    ),
+    //   defaultDebounceInterval,
+    //   debounceOptions,
+    // ),
   ).current;
 
   const editMessage: InputMessageInputContextValue<StreamChatGenerics>['editMessage'] = (
@@ -1513,7 +1513,7 @@ const ChannelWithContext = <
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
   const loadMoreThreadFinished = useRef(
-    debounce(
+    //debounce(
       (
         newThreadHasMore: boolean,
         updatedThreadMessages: ChannelState<StreamChatGenerics>['threads'][string],
@@ -1522,9 +1522,9 @@ const ChannelWithContext = <
         setThreadLoadingMore(false);
         setThreadMessages(updatedThreadMessages);
       },
-      defaultDebounceInterval,
-      debounceOptions,
-    ),
+    //   defaultDebounceInterval,
+    //   debounceOptions,
+    // ),
   ).current;
 
   const loadMoreThread: ThreadContextValue<StreamChatGenerics>['loadMoreThread'] = async () => {

Will continue to report back on issues / fixes we found in this Proof of Concept (POC) integration

[andreibarabas]

The fix to avoid empty component flickering no longer works with FlashList,

but a fix could be:

diff --git a/src/components/ChannelList/ChannelListMessenger.tsx b/src/components/ChannelList/ChannelListMessenger.tsx
index ce88b10dbd93ec84c4e8a251f102f15e9ccb8340..b6eea33d23fba3da8221e329fe9d04140eeb12ab 100644
--- a/src/components/ChannelList/ChannelListMessenger.tsx
+++ b/src/components/ChannelList/ChannelListMessenger.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 // RNGR's FlatList ist currently breaking the pull-to-refresh behaviour on Android
 // See https://github.com/software-mansion/react-native-gesture-handler/issues/598
-import { FlatList, RefreshControl, StyleSheet, View } from 'react-native';
+import { FlatList as FlatListDefault, RefreshControl, StyleSheet, View } from 'react-native';
 
 import type { Channel } from 'stream-chat';
 
@@ -101,6 +101,7 @@ const ChannelListMessengerWithContext = <
     refreshList,
     reloadList,
     setFlatListRef,
+    FlatList = FlatListDefault
   } = props;
 
   const {
@@ -120,7 +121,7 @@ const ChannelListMessengerWithContext = <
     if (!!loadingChannels !== loading) {
       setLoading(!!loadingChannels);
     }
-  }, [loading, loadingChannels]);
+  }, [channels]); //whenever the channels ref actually change, update the UI loading state with the usePaginatedChannels one. This will likely be obsolete once React 18 & Automatic Batching is adopted
 
   if (error && !refreshing && !loadingChannels && !channels?.length) {
     return (
diff --git a/src/components/ChannelList/hooks/usePaginatedChannels.ts b/src/components/ChannelList/hooks/usePaginatedChannels.ts
index cabe6cb90f4a5e42d59192b213ccb7447e24c776..21af756d635aad87f4a86fde4f804d7c27e7c322 100644
--- a/src/components/ChannelList/hooks/usePaginatedChannels.ts
+++ b/src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -47,7 +47,7 @@ export const usePaginatedChannels = <
   const [hasNextPage, setHasNextPage] = useState(true);
   const lastRefresh = useRef(Date.now());
   const isQueryingRef = useRef(false);
-  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>();
+  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>('reload'); //we will imediatelly call useEffect with reload, so at least save 1 rerender / flicker
   const isMountedRef = useIsMountedRef();
   const filtersRef = useRef<typeof filters | null>(null);
   const sortRef = useRef<typeof sort | null>(null);