Channel list data is inconsistent

Sendbird Chat UIKit React Native
,
1

[Problem/Question]

// ChannelFlatList : 

const ChannelFlatList: GroupChannelListModule["List"] = (props) => {
  const { sdk } = useSendbirdChat();

  const { groupChannels } = useGroupChannelList(
    sdk,
    userDetails.userID,
  );
}

// ChannelListHeader : 

const ChannelListHeader: GroupChannelListModule["Header"] = () => {
  const { sdk } = useSendbirdChat();

  const { groupChannels } = useGroupChannelList(sdk, userDetails.userID);
// here the groups channel list is not same as the ChannelFlatList. FYI, this list is always correct.

}

This is strange, I could not find anything as well, while we are using the same sdk and same userId. This is occurring randomly.

Also, there are two options called queryCreator and collectionCreator. I could not find anything on the docs that explains these two options. This might solve the existing issue. Can you please help me understand how it works. Ideally i want to filter out the channels and render those in the channel list component.

  const { sdk } = useSendbirdChat();
  const [filteredChannels, setFilteredChannels] = useState<GroupChannel[]>([]);
  const { groupChannels } = useGroupChannelList(sdk, userDetails.userID,{
   queryCreator: ?? or collectionCreator:??
   });

// instead of the below code, I want to use collection creator.
  useEffect(() => {
    if (groupChannels) {
      const filtered = groupChannels.filter((channel) => {
        return !channel.lastMessage || channel.lastMessage.messageType === "admin";
      });
      setFilteredChannels(filtered);
    }
  
  }, [groupChannels]);

[UIKit Version]
“@sendbird/chat”: “^4.10.6”,
“@sendbird/uikit-react-native”: “^3.3.0”,

[Frequency]
random

2

Hello @Sumit_Dey

Here is how to apply filters to the data source:

const GroupChannelListFragment = createGroupChannelListFragment();
const GroupChannelListScreen = () => {
  const { sdk } = useSendbirdChat();

  return (
    <GroupChannelListFragment
      collectionCreator={() => {
        const filter = new GroupChannelFilter();
        filter.myMemberStateFilter = MyMemberStateFilter.JOINED;
        return sdk.groupChannel.createGroupChannelCollection({ filter });
      }}
    />
  );
};

The useGroupChannelList hook does not share data through Context or similar means. As two different data sources are created, there is a possibility of the data being different.

Each module’s component primarily handles the UI, and in the Fragment, data is injected into the module through a data source like useGroupChannelList.

If you wish to reconfigure the Fragment itself, it is advisable to use the data source at a higher level, where the module is rendered, rather than in the module’s component.

import { createExampleModule } from '@sendbird/uikit-react-native';

const Module = createExampleModule();
const MyExampleFragment = () => {
  const { dataList } = useExampleDataSource();

  return <Module.Provider>
    <MyComponent dataSource={dataList} />
    <Module.Component dataSource={dataList} />
  </Module.Provider>
}