How can i add channel in existing channel when required in chat in sendbird react native?

how can i add channel in existing channel when required in chat in sendbird react native? Just like swiggy service if our bdm is attending user and he is not able solve user problen he want add the expert in that chat how can i achive that?

@Tyler

Hello @Vidhi_Tomar,

Could you please clarify this a bit? It sounds like you want to add another user to an existing channel to handle escalations. Is that correct?

yes i can! I have used sendbird chat sdk, and I want to customize the user list. For example if we have 10 users, and i am user x i want that when I create a group I want to see only 5 users there or if user y logins i want that user to only see 2 users (mapped users).

Hi @Vidhi_Tomar,

Thanks for clarifying. Listing the users is an ApplicationUserListQuery.

If you want to limit the user list query, you can define metadata key/value pairs on your users. From there, you can use those metadata keys and values to filter your query down further.

For example, let’s say I have a user with the key/value pair of role: expert. If I only want to show the users with the expert role, I would do the following:

const queryParams = {
    metaDataKeyFilter: 'role',
    metaDataValuesFilter: ['expert'],
};
const query = sb.createApplicationUserListQuery(queryParams);

const users = await query.next();

and how would I handle or filter user in frontend side?
Backend Developer of my team is saying he can define meta data in backend side u have to jsut filter It on frontend? Am i getting right? if yes please sugest how i will filter in my frontend side?

here is GroupChannelList



import {useNavigation, useRoute} from '@react-navigation/native';
import {
  useSendbirdChat,
  createGroupChannelListFragment,
  createGroupChannelCreateFragment,
  createGroupChannelFragment,
} from '@sendbird/uikit-react-native';
import {useGroupChannel} from '@sendbird/uikit-chat-hooks';

const GroupChannelListFragment = createGroupChannelListFragment();
export const GroupChannelListScreen = () => {
  const navigation = useNavigation();

  return (
    <GroupChannelListFragment
   
      renderIconButton={() => null}
      onPressCreateChannel={channelType => {
        // Navigate to GroupChannelCreate function.
        navigation.navigate('GroupChannelCreate', {channelType});
      }}
      onPressChannel={channel => {
        // Navigate to GroupChannel function.
        navigation.navigate('GroupChannel', {channelUrl: channel.url});
      }}
    />
  );
};

1 Like

@Ian please clearify

Hi @Vidhi_Tomar,

Yes, you would need to filter on the front end by providing a custom query parameter as previously mentioned. This modifies the query to only return the users with the associated metadata.

Since you are using the React Native UIKit, you would do this via the queryCreator prop on the GroupChannelInviteFragment.

See the docs here: Invite users | Chat React Native SDK | Sendbird Docs

thank you @Ian it worked me for me while we are testing our app now I have some doubts

  1. i am facing issue regarding your sdk react native permission module… while opening camera or gallery the modal open like this and ask user to go to setting directly
    Because of this my app got rejected in app store it should not ask directly to hot user’s settings
    I have already added the usage permission to my info.plist please give me a reference so i can resolved this issue!!

here is ss

  1. how can we give custom name to our group channel for example for fist channel I want set custom chat 1 and added one member and so on!

  2. when I creating group with 2 member do your sdk provide any type of notification so rest of two user can get notified that they have added to a group?

please give me reference or suggestion so we test our app!

@Ian @uday.bhaskar @Chinmaya_Gupta
URGENT URGENT URGENT

one more thing I am facing I want to give custom member list while inviting members by using
createGroupChannelInviteFragment I thing I dit all the thing rightly as u suggested me to use queryCreator and I have also implemented the same in groupCreateScreen by using prop queryCreator inn same way it is working fine but in GroupChannelInviteMembers it is throwing me an error … attaching the screenshot below

import React, { useEffect } from 'react';
import { createGroupChannelInviteFragment } from '@sendbird/uikit-react-native';
import { useGroupChannel, useSendbirdChat } from '@sendbird/uikit-react-native';
import { Pressable, View, Text } from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';

const GroupChannelInviteMembers = () => {
  const { currentUser } = useSendbirdChat();
  const MyUserInterface = {
    userId: currentUser.userId,
    userNickname: currentUser.nickname,
    userProfileUrl: '',
  };

  const navigation = useNavigation();
  const { params } = useRoute();
  const { sdk } = useSendbirdChat();
  const { channel } = useGroupChannel(sdk, params.channelUrl);

  if (!channel) return null;

  const GroupChannelInviteFragment = createGroupChannelInviteFragment(MyUserInterface);



  return (
    <>
      <GroupChannelInviteFragment
        onPressHeaderLeft={() => {
          navigation.goBack();
        }}
        onInviteMembers={(channel) => {
          navigation.navigate('GroupChannel', { channelUrl: channel.url });
        }}
        renderUser={(user, selectedUsers, setSelectedUsers) => {
          const selected = Boolean(selectedUsers.find((it) => it.userId === user.userId));
          return (
            <Pressable
              onPress={() => {
                if (selected) {
                  setSelectedUsers(selectedUsers.filter((it) => it.userId !== user.userId));
                } else {
                  setSelectedUsers([...selectedUsers, user]);
                }
              }}
            >
              <View style={{ backgroundColor: selected ? 'red' : 'white' }}>
                <Text>{user.userNickname}</Text>
              </View>
            </Pressable>
          );
        }}
       queryCreator = {() => {
          return new CustomQuery({
            async next() {
              // Implement your custom query logic here
              return [];
            },
            hasNext() {
              // Implement your hasNext logic here
              return false;
            },
            isLoading() {
              // Implement your isLoading logic here
              return false;
            },
          });
        }}
      />
    </>
  );
};

export default GroupChannelInviteMembers;

It looks like you’re missing the channel. Please reference the open source repo.

2 Likes

For future issues, we ask that you kindly open new posts or support case for every unique issue.

it seems like u forgot to answer the previous query I raised so here is new topic @Tyler