perf: MessageList livestreaming improvements (#3244)

* fix: add RAF coalescing

* fix: correct import

* fix: livestreaming mode MVCP

* perf: throttle certain channel preview updates to avoid stressing the state update queue

* fix: goToMessage behaviour

* feat: add message pruning capabilities

* perf: only register animated values when STR is enabled

* chore: extract message bubble

* chore: add menu option

* chore: add menu option for pruning a well

* fix: variable dynamic size message items

* fix: flashlist mvcp disjoint set bug

* fix: memoize message bubble components to be in line with previous behaviour

* fix: save a render cycle through restructuring

* fix: remove redundant check

* Revert "fix: remove redundant check"

This reverts commit 8dd98f7.

* Revert "fix: save a render cycle through restructuring"

This reverts commit 38ca199.

* fix: experiment with scrollToIndex

* fix: styles since upgrade

* fix: scroll to bottom not always working

* fix: api rename

* chore: flashlist bump

* fix: stutter when scrolling to message

* fix: infinite scroll bug

* chore: bump stream-chat-js

* chore: add package.json as well

* fix: remove console.log

Author: isekovanic

examples/SampleApp/App.tsx

@@ -59,6 +59,11 @@ import type { LocalMessage, StreamChat, TextComposerMiddleware } from 'stream-ch
 import { Toast } from './src/components/ToastComponent/Toast';
 import { useClientNotificationsToastHandler } from './src/hooks/useClientNotificationsToastHandler';
 import AsyncStore from './src/utils/AsyncStore.ts';
+import {
+  MessageListImplementationConfigItem,
+  MessageListModeConfigItem,
+  MessageListPruningConfigItem,
+} from './src/components/SecretMenu.tsx';
 
 init({ data });
 
@@ -91,7 +96,15 @@ const Stack = createStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createStackNavigator<UserSelectorParamList>();
 const App = () => {
   const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
-  const [messageListImplementation, setMessageListImplementation] = useState<'flashlist' | 'flatlist' | null>(null);
+  const [messageListImplementation, setMessageListImplementation] = useState<
+    MessageListImplementationConfigItem['id'] | undefined
+  >(undefined);
+  const [messageListMode, setMessageListMode] = useState<
+    MessageListModeConfigItem['mode'] | undefined
+  >(undefined);
+  const [messageListPruning, setMessageListPruning] = useState<
+    MessageListPruningConfigItem['value'] | undefined
+  >(undefined);
   const colorScheme = useColorScheme();
   const streamChatTheme = useStreamChatTheme();
 
@@ -133,14 +146,26 @@ const App = () => {
         }
       }
     });
-    const getMessageListImplementation = async () => {
-      const storedValue = await AsyncStore.getItem(
+    const getMessageListConfig = async () => {
+      const messageListImplementationStoredValue = await AsyncStore.getItem(
         '@stream-rn-sampleapp-messagelist-implementation',
-        { id: 'flashlist' }
+        { id: 'flatlist' },
       );
-      setMessageListImplementation(storedValue?.id as ('flashlist' | 'flatlist'));
-    }
-    getMessageListImplementation();
+      const messageListModeStoredValue = await AsyncStore.getItem(
+        '@stream-rn-sampleapp-messagelist-mode',
+        { mode: 'default' },
+      );
+      const messageListPruningStoredValue = await AsyncStore.getItem(
+        '@stream-rn-sampleapp-messagelist-pruning',
+        { value: undefined },
+      );
+      setMessageListImplementation(
+        messageListImplementationStoredValue?.id as MessageListImplementationConfigItem['id'],
+      );
+      setMessageListMode(messageListModeStoredValue?.mode as MessageListModeConfigItem['mode']);
+      setMessageListPruning(messageListPruningStoredValue?.value as MessageListPruningConfigItem['value']);
+    };
+    getMessageListConfig();
     return () => {
       unsubscribeOnNotificationOpen();
       unsubscribeForegroundEvent();
@@ -172,7 +197,7 @@ const App = () => {
     });
   }, [chatClient]);
 
-  if (!messageListImplementation) {
+  if (!messageListImplementation || !messageListMode) {
     return;
   }
 
@@ -194,7 +219,17 @@ const App = () => {
             dark: colorScheme === 'dark',
           }}
         >
-          <AppContext.Provider value={{ chatClient, loginUser, logout, switchUser, messageListImplementation }}>
+          <AppContext.Provider
+            value={{
+              chatClient,
+              loginUser,
+              logout,
+              switchUser,
+              messageListImplementation,
+              messageListMode,
+              messageListPruning,
+            }}
+          >
             {isConnecting && !chatClient ? (
               <LoadingScreen />
             ) : chatClient ? (

examples/SampleApp/package.json

@@ -37,7 +37,7 @@
     "@react-navigation/drawer": "7.4.1",
     "@react-navigation/native": "^7.1.10",
     "@react-navigation/stack": "^7.3.3",
-    "@shopify/flash-list": "^2.0.3",
+    "@shopify/flash-list": "^2.1.0",
     "emoji-mart": "^5.6.0",
     "lodash.mergewith": "^4.6.2",
     "react": "19.1.0",