feat: add prop for helping multiple channel list implementation (#1951)

* feat: add guide

* feat: add a prop for passing a custom channal list filtering function

* chore: update yarn locks of example apps

* chore: update yarn locks of example apps

* fix: prettier warnings

Author: santhoshvai

docusaurus/docs/reactnative/guides/multiple_channel_lists.mdx

@@ -0,0 +1,23 @@
+---
+id: multiple channel lists
+sidebar_position: 12
+title: Multiple Channel Lists
+---
+
+This example will focus on the specific use case where there are two `ChannelList` components in the same application.
+
+The event listeners of both lists, let's say A and B, will pick up all `new.message` events for every channel, regardless of which list the `message` is sent in. If a message is sent in list B, the event listener in list A will also pick up the new `message` and bump the impacted `channel` to the top of the list. This is not the desired result for multiple lists, but there is a correct way to handle the routing of these messages.
+
+## channelRenderFilterFn prop
+
+The reason that a channel will automatically be bumped to the top of a list even though it's not part of the list is due to the default behavior. The ChannelList components will retrieve a channel from `client.activeChannels` if the channel doesn't already exist.
+
+By using the `channelRenderFilterFn` prop we can apply custom filtering logic to the list of channels that are rendered. Since we have access to the entire channel object, we can filter on type, custom fields, or others.
+
+```tsx
+const customChannelFilterFunction = (channels: Channel[]) => {
+  return channels.filter(/** your custom filter logic */);
+};
+
+<ChannelList channelRenderFilterFn={customChannelFilterFunction} filters={filters} />;
+```

examples/ExpoMessaging/yarn.lock

@@ -6665,10 +6665,10 @@ [email protected]:
   version "0.0.0"
   uid ""
 
-[email protected].0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.0.tgz#a226a1f9d629d1f3e212df1f2a46312c544bc0bb"
-  integrity sha512-goG9dyDpVopspGt3gq31ILkwEzdolo0+CdhcpVeGmOB2CZ0tF9X78uByrj4/7VsqpCkC0hi4uMSEsERM3DZdbg==
+[email protected].1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.1.tgz#c496feb6905e391505adca37c2eef25712a6e6d7"
+  integrity sha512-3zWEaoOHNpGAHy7qEI1PFqdx3dq3oHSpEs+PBrHYuUi8Xj7NisKWYkXkK3sa0BSn0hwcduSMZmNGOO9oo9lj2g==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

examples/SampleApp/yarn.lock

@@ -7598,10 +7598,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-[email protected].0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.0.tgz#a226a1f9d629d1f3e212df1f2a46312c544bc0bb"
-  integrity sha512-goG9dyDpVopspGt3gq31ILkwEzdolo0+CdhcpVeGmOB2CZ0tF9X78uByrj4/7VsqpCkC0hi4uMSEsERM3DZdbg==
+[email protected].1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.1.tgz#c496feb6905e391505adca37c2eef25712a6e6d7"
+  integrity sha512-3zWEaoOHNpGAHy7qEI1PFqdx3dq3oHSpEs+PBrHYuUi8Xj7NisKWYkXkK3sa0BSn0hwcduSMZmNGOO9oo9lj2g==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

examples/TypeScriptMessaging/yarn.lock

@@ -7161,10 +7161,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.0.tgz#a226a1f9d629d1f3e212df1f2a46312c544bc0bb"
-  integrity sha512-goG9dyDpVopspGt3gq31ILkwEzdolo0+CdhcpVeGmOB2CZ0tF9X78uByrj4/7VsqpCkC0hi4uMSEsERM3DZdbg==
+[email protected].1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.1.tgz#c496feb6905e391505adca37c2eef25712a6e6d7"
+  integrity sha512-3zWEaoOHNpGAHy7qEI1PFqdx3dq3oHSpEs+PBrHYuUi8Xj7NisKWYkXkK3sa0BSn0hwcduSMZmNGOO9oo9lj2g==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

package/expo-package/yarn.lock

@@ -2998,10 +2998,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-[email protected].0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.0.tgz#a226a1f9d629d1f3e212df1f2a46312c544bc0bb"
-  integrity sha512-goG9dyDpVopspGt3gq31ILkwEzdolo0+CdhcpVeGmOB2CZ0tF9X78uByrj4/7VsqpCkC0hi4uMSEsERM3DZdbg==
+[email protected].1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.1.tgz#c496feb6905e391505adca37c2eef25712a6e6d7"
+  integrity sha512-3zWEaoOHNpGAHy7qEI1PFqdx3dq3oHSpEs+PBrHYuUi8Xj7NisKWYkXkK3sa0BSn0hwcduSMZmNGOO9oo9lj2g==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

package/native-package/yarn.lock

@@ -4403,10 +4403,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.0.tgz#a226a1f9d629d1f3e212df1f2a46312c544bc0bb"
-  integrity sha512-goG9dyDpVopspGt3gq31ILkwEzdolo0+CdhcpVeGmOB2CZ0tF9X78uByrj4/7VsqpCkC0hi4uMSEsERM3DZdbg==
+[email protected].1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.9.1.tgz#c496feb6905e391505adca37c2eef25712a6e6d7"
+  integrity sha512-3zWEaoOHNpGAHy7qEI1PFqdx3dq3oHSpEs+PBrHYuUi8Xj7NisKWYkXkK3sa0BSn0hwcduSMZmNGOO9oo9lj2g==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"

package/src/components/ChannelList/ChannelList.tsx

@@ -61,6 +61,10 @@ export type ChannelListProps<
     | 'numberOfSkeletons'
   >
 > & {
+  /** Optional function to filter channels prior to rendering the list. Do not use any complex logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
+  channelRenderFilterFn?: (
+    channels: Array<Channel<StreamChatGenerics>>,
+  ) => Array<Channel<StreamChatGenerics>>;
   /**
    * Object containing channel query filters
    *
@@ -236,6 +240,7 @@ export const ChannelList = <
 ) => {
   const {
     additionalFlatListProps = {},
+    channelRenderFilterFn,
     EmptyStateIndicator = EmptyStateIndicatorDefault,
     FooterLoadingIndicator = ChannelListFooterLoadingIndicator,
     filters = DEFAULT_FILTERS,
@@ -365,7 +370,7 @@ export const ChannelList = <
 
   const channelsContext = useCreateChannelsContext({
     additionalFlatListProps,
-    channels,
+    channels: channelRenderFilterFn ? channelRenderFilterFn(channels ?? []) : channels,
     EmptyStateIndicator,
     error,
     FooterLoadingIndicator,