@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx

@@ -0,0 +1,173 @@
+import React, { useContext } from 'react';
+import { Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  Avatar,
+  Divider,
+  Icon,
+  Text,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import useKeyboardStatus from '../../../hooks/useKeyboardStatus';
+import useMentionSuggestion from '../../../hooks/useMentionSuggestion';
+import { GroupChannelContexts } from '../module/moduleContext';
+import type { GroupChannelProps } from '../types';
+
+const GroupChannelSuggestedMentionList = ({
+  text,
+  selection,
+  inputHeight,
+  bottomInset,
+  onPressToMention,
+  mentionedUsers,
+}: GroupChannelProps['SuggestedMentionList']) => {
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const { channel } = useContext(GroupChannelContexts.Fragment);
+  const { mentionManager } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { topInset } = useHeaderStyle();
+  const { left, right } = useSafeAreaInsets();
+
+  const keyboard = useKeyboardStatus();
+
+  const { members, reset, searchStringRange, searchLimited } = useMentionSuggestion({
+    text,
+    selection,
+    channel,
+    mentionedUsers,
+  });
+
+  const isLandscape = screenWidth > screenHeight;
+  const isShortened = isLandscape && keyboard.visible;
+  const canRenderMembers = members.length > 0;
+  const maxHeight = isShortened ? screenHeight - (topInset + inputHeight + keyboard.height) : styles.suggestion.height;
+
+  const renderLimitGuide = () => {
+    return (
+      <View style={[styles.searchLimited, { borderTopColor: colors.onBackground04 }]}>
+        <Icon icon={'info'} size={20} containerStyle={{ marginRight: 4 }} color={colors.onBackground02} />
+        <Text body3 color={colors.onBackground02}>
+          {STRINGS.GROUP_CHANNEL.MENTION_LIMITED(mentionManager.config.mentionLimit)}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderMembers = () => {
+    return (
+      <View>
+        {members.map((member) => {
+          return (
+            <Pressable
+              onPress={() => {
+                onPressToMention(member, searchStringRange);
+                reset();
+              }}
+              key={member.userId}
+              style={styles.userContainer}
+            >
+              <Avatar size={28} uri={member.profileUrl} containerStyle={styles.userAvatar} />
+              <View style={styles.userInfo}>
+                <Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
+                  {member.nickname || STRINGS.LABELS.USER_NO_NAME}
+                </Text>
+                <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
+                  {member.userId}
+                </Text>
+                <Divider style={{ position: 'absolute', bottom: 0 }} />
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  };
+
+  return (
+    <Pressable
+      onPress={reset}
+      pointerEvents={canRenderMembers ? 'auto' : 'none'}
+      style={[styles.container, { bottom: inputHeight + bottomInset }]}
+    >
+      <ScrollView
+        bounces={false}
+        keyboardDismissMode={'none'}
+        keyboardShouldPersistTaps={'always'}
+        style={[
+          styles.scrollView,
+          {
+            maxHeight,
+            backgroundColor: colors.background,
+            bottom: keyboard.bottomSpace,
+          },
+          canRenderMembers && {
+            borderTopWidth: 1,
+            borderTopColor: colors.onBackground04,
+          },
+        ]}
+        contentContainerStyle={{ paddingLeft: left, paddingRight: right }}
+      >
+        {conditionChaining([searchLimited, canRenderMembers], [renderLimitGuide(), renderMembers(), null])}
+      </ScrollView>
+    </Pressable>
+  );
+};
+
+const styles = createStyleSheet({
+  suggestion: {
+    height: 196,
+  },
+  container: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+  },
+  scrollView: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  userContainer: {
+    paddingLeft: 16,
+    flexDirection: 'row',
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  userAvatar: {
+    marginRight: 16,
+  },
+  userInfo: {
+    flexDirection: 'row',
+    flex: 1,
+  },
+  userNickname: {
+    flexShrink: 1,
+    lineHeight: 44,
+    textAlignVertical: 'center',
+    marginRight: 6,
+  },
+  userId: {
+    lineHeight: 44,
+    textAlignVertical: 'center',
+    minWidth: 32,
+    flexShrink: 1,
+    marginRight: 16,
+  },
+  searchLimited: {
+    borderTopWidth: 1,
+    paddingHorizontal: 16,
+    height: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+export default GroupChannelSuggestedMentionList;

package/src/domain/groupChannel/index.ts

@@ -1,6 +1,7 @@
 export { default as GroupChannelHeader } from './component/GroupChannelHeader';
 export { default as GroupChannelMessageList } from './component/GroupChannelMessageList';
 export { default as GroupChannelInput } from './component/GroupChannelInput';
+export { default as GroupChannelSuggestedMentionList } from './component/GroupChannelSuggestedMentionList';
 export { default as GroupChannelStatusEmpty } from './component/GroupChannelStatusEmpty';
 export { default as GroupChannelStatusLoading } from './component/GroupChannelStatusLoading';
 export { default as createGroupChannelModule } from './module/createGroupChannelModule';

package/src/domain/groupChannel/module/createGroupChannelModule.tsx

@@ -3,6 +3,7 @@ import GroupChannelInput from '../component/GroupChannelInput';
 import GroupChannelMessageList from '../component/GroupChannelMessageList';
 import GroupChannelStatusEmpty from '../component/GroupChannelStatusEmpty';
 import GroupChannelStatusLoading from '../component/GroupChannelStatusLoading';
+import GroupChannelSuggestedMentionList from '../component/GroupChannelSuggestedMentionList';
 import type { GroupChannelModule } from '../types';
 import { GroupChannelContextsProvider } from './moduleContext';
 
@@ -10,12 +11,22 @@ const createGroupChannelModule = ({
   Header = GroupChannelHeader,
   MessageList = GroupChannelMessageList,
   Input = GroupChannelInput,
+  SuggestedMentionList = GroupChannelSuggestedMentionList,
   StatusLoading = GroupChannelStatusLoading,
   StatusEmpty = GroupChannelStatusEmpty,
   Provider = GroupChannelContextsProvider,
   ...module
 }: Partial<GroupChannelModule> = {}): GroupChannelModule => {
-  return { Header, MessageList, Input, StatusEmpty, StatusLoading, Provider, ...module };
+  return {
+    Header,
+    MessageList,
+    Input,
+    SuggestedMentionList,
+    StatusEmpty,
+    StatusLoading,
+    Provider,
+    ...module,
+  };
 };
 
 export default createGroupChannelModule;

package/src/domain/groupChannel/module/moduleContext.tsx

@@ -19,7 +19,7 @@ export const GroupChannelContexts: GroupChannelContextsType = {
   Fragment: createContext({
     headerTitle: '',
     channel: {} as SendbirdGroupChannel,
-    setEditMessage: NOOP,
+    setMessageToEdit: NOOP,
   }),
   TypingIndicator: createContext({
     typingUsers: [] as SendbirdUser[],
@@ -39,7 +39,7 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   const { currentUser, sdk } = useSendbirdChat();
 
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
-  const [editMessage, setEditMessage] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+  const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
 
   useChannelHandler(sdk, `GroupChannelContextsProvider_${id}`, {
     onTypingStatusUpdated(eventChannel) {
@@ -55,8 +55,8 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
         value={{
           headerTitle: STRINGS.GROUP_CHANNEL.HEADER_TITLE(currentUser?.userId ?? '', channel),
           channel,
-          editMessage,
-          setEditMessage,
+          messageToEdit,
+          setMessageToEdit,
           keyboardAvoidOffset,
         }}
       >

package/src/domain/groupChannel/types.ts

@@ -6,6 +6,7 @@ import type {
   SendbirdFileMessage,
   SendbirdFileMessageCreateParams,
   SendbirdGroupChannel,
+  SendbirdMember,
   SendbirdMessage,
   SendbirdUser,
   SendbirdUserMessage,
@@ -13,7 +14,13 @@ import type {
 } from '@sendbird/uikit-utils';
 
 import type { FileType } from '../../platform/types';
-import type { CommonComponent } from '../../types';
+import type { CommonComponent, MentionedUser, Range } from '../../types';
+
+type UserMessageMentionParams = Required<{
+  messageTemplate: SendbirdUserMessageCreateParams['mentionedMessageTemplate'];
+  userIds: SendbirdUserMessageCreateParams['mentionedUserIds'];
+  type: SendbirdUserMessageCreateParams['mentionType'];
+}>;
 
 export interface GroupChannelProps {
   Fragment: {
@@ -89,11 +96,26 @@ export interface GroupChannelProps {
     onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
   };
   Input: {
-    channel: SendbirdGroupChannel;
+    shouldRenderInput: boolean;
     onSendFileMessage: (file: FileType) => Promise<void>;
-    onSendUserMessage: (text: string) => Promise<void>;
+    onSendUserMessage: (text: string, mention?: UserMessageMentionParams) => Promise<void>;
     onUpdateFileMessage: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;
-    onUpdateUserMessage: (editedText: string, message: SendbirdUserMessage) => Promise<void>;
+    onUpdateUserMessage: (
+      editedText: string,
+      message: SendbirdUserMessage,
+      mention?: UserMessageMentionParams,
+    ) => Promise<void>;
+    SuggestedMentionList: (props: GroupChannelProps['SuggestedMentionList']) => JSX.Element | null;
+  };
+
+  SuggestedMentionList: {
+    text: string;
+    selection: Range;
+    topInset: number;
+    bottomInset: number;
+    inputHeight: number;
+    onPressToMention: (user: SendbirdMember, searchStringRange: Range) => void;
+    mentionedUsers: MentionedUser[];
   };
   Provider: {
     channel: SendbirdGroupChannel;
@@ -111,8 +133,8 @@ export interface GroupChannelContextsType {
   Fragment: React.Context<{
     headerTitle: string;
     channel: SendbirdGroupChannel;
-    editMessage?: SendbirdUserMessage | SendbirdFileMessage;
-    setEditMessage: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+    messageToEdit?: SendbirdUserMessage | SendbirdFileMessage;
+    setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
     keyboardAvoidOffset?: number;
   }>;
   TypingIndicator: React.Context<{
@@ -124,6 +146,7 @@ export interface GroupChannelModule {
   Header: CommonComponent<GroupChannelProps['Header']>;
   MessageList: CommonComponent<GroupChannelProps['MessageList']>;
   Input: CommonComponent<GroupChannelProps['Input']>;
+  SuggestedMentionList: CommonComponent<GroupChannelProps['SuggestedMentionList']>;
   StatusEmpty: CommonComponent;
   StatusLoading: CommonComponent;
 }

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersHeader.tsx

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+
+import { Icon, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import { GroupChannelBannedUsersContexts } from '../module/moduleContext';
+import type { GroupChannelBannedUsersProps } from '../types';
+
+const GroupChannelBannedUsersHeader = ({ onPressHeaderLeft }: GroupChannelBannedUsersProps['Header']) => {
+  const { headerTitle } = useContext(GroupChannelBannedUsersContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+  return <HeaderComponent title={headerTitle} left={<Icon icon={'arrow-left'} />} onPressLeft={onPressHeaderLeft} />;
+};
+
+export default GroupChannelBannedUsersHeader;

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersList.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { GroupChannelBannedUsersProps } from '../types';
+
+const GroupChannelBannedUsersList = ({
+  renderUser,
+  bannedUsers,
+  onLoadNext,
+  ListEmptyComponent,
+}: GroupChannelBannedUsersProps['List']) => {
+  const renderItem: ListRenderItem<SendbirdRestrictedUser> = useFreshCallback(({ item }) =>
+    renderUser?.({ user: item }),
+  );
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <FlatList
+      data={bannedUsers}
+      renderItem={renderItem}
+      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      ListEmptyComponent={ListEmptyComponent}
+      onEndReached={onLoadNext}
+      bounces={false}
+      keyExtractor={getUserUniqId}
+    />
+  );
+};
+
+export default GroupChannelBannedUsersList;

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersStatusEmpty.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const GroupChannelBannedUsersStatusEmpty = () => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'no-banned-users'} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default GroupChannelBannedUsersStatusEmpty;

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersStatusError.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { GroupChannelBannedUsersModule } from '../types';
+
+const GroupChannelBannedUsersStatusError: GroupChannelBannedUsersModule['StatusError'] = ({ onPressRetry }) => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'error-wrong'} onPressRetry={onPressRetry} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default GroupChannelBannedUsersStatusError;

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersStatusLoading.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const GroupChannelBannedUsersStatusLoading = () => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'loading'} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default GroupChannelBannedUsersStatusLoading;

package/src/domain/groupChannelBannedUsers/index.ts

@@ -0,0 +1,6 @@
+export { default as GroupChannelBannedUsersList } from './component/GroupChannelBannedUsersList';
+export { default as GroupChannelBannedUsersHeader } from './component/GroupChannelBannedUsersHeader';
+export { default as GroupChannelBannedUsersStatusLoading } from './component/GroupChannelBannedUsersStatusLoading';
+export { default as GroupChannelBannedUsersStatusEmpty } from './component/GroupChannelBannedUsersStatusEmpty';
+export { default as createGroupChannelBannedUsersModule } from './module/createGroupChannelBannedUsersModule';
+export { GroupChannelBannedUsersContextsProvider, GroupChannelBannedUsersContexts } from './module/moduleContext';

package/src/domain/groupChannelBannedUsers/module/createGroupChannelBannedUsersModule.tsx

@@ -0,0 +1,21 @@
+import GroupChannelBannedUsersHeader from '../component/GroupChannelBannedUsersHeader';
+import GroupChannelBannedUsersList from '../component/GroupChannelBannedUsersList';
+import GroupChannelBannedUsersStatusEmpty from '../component/GroupChannelBannedUsersStatusEmpty';
+import GroupChannelBannedUsersStatusError from '../component/GroupChannelBannedUsersStatusError';
+import GroupChannelBannedUsersStatusLoading from '../component/GroupChannelBannedUsersStatusLoading';
+import type { GroupChannelBannedUsersModule } from '../types';
+import { GroupChannelBannedUsersContextsProvider } from './moduleContext';
+
+const createGroupChannelBannedUsersModule = ({
+  Header = GroupChannelBannedUsersHeader,
+  List = GroupChannelBannedUsersList,
+  StatusLoading = GroupChannelBannedUsersStatusLoading,
+  StatusEmpty = GroupChannelBannedUsersStatusEmpty,
+  StatusError = GroupChannelBannedUsersStatusError,
+  Provider = GroupChannelBannedUsersContextsProvider,
+  ...module
+}: Partial<GroupChannelBannedUsersModule> = {}): GroupChannelBannedUsersModule => {
+  return { Header, List, Provider, StatusEmpty, StatusLoading, StatusError, ...module };
+};
+
+export default createGroupChannelBannedUsersModule;

package/src/domain/groupChannelBannedUsers/module/moduleContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext } from 'react';
+
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { GroupChannelBannedUsersContextsType, GroupChannelBannedUsersModule } from '../types';
+
+export const GroupChannelBannedUsersContexts: GroupChannelBannedUsersContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+  }),
+};
+
+export const GroupChannelBannedUsersContextsProvider: GroupChannelBannedUsersModule['Provider'] = ({
+  channel,
+  children,
+}) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <GroupChannelBannedUsersContexts.Fragment.Provider
+        value={{ headerTitle: STRINGS.GROUP_CHANNEL_BANNED_USERS.HEADER_TITLE, channel }}
+      >
+        {children}
+      </GroupChannelBannedUsersContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelBannedUsers/types.ts

@@ -0,0 +1,50 @@
+import type React from 'react';
+
+import type { SendbirdGroupChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type GroupChannelBannedUsersProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelBannedUsersProps['Header']['onPressHeaderLeft'];
+    renderUser?: GroupChannelBannedUsersProps['List']['renderUser'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  List: {
+    renderUser: (props: { user: SendbirdRestrictedUser }) => React.ReactElement | null;
+    bannedUsers: SendbirdRestrictedUser[];
+    ListEmptyComponent?: React.ReactElement;
+    onLoadNext: () => Promise<void>;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelBannedUsers
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelBannedUsersContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdGroupChannel;
+  }>;
+};
+export interface GroupChannelBannedUsersModule {
+  Provider: CommonComponent<GroupChannelBannedUsersProps['Provider']>;
+  Header: CommonComponent<GroupChannelBannedUsersProps['Header']>;
+  List: CommonComponent<GroupChannelBannedUsersProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<GroupChannelBannedUsersProps['StatusError']>;
+}
+
+export type GroupChannelBannedUsersFragment = CommonComponent<GroupChannelBannedUsersProps['Fragment']>;

package/src/domain/groupChannelList/component/GroupChannelListList.tsx

@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { PushTriggerOption } from '@sendbird/chat';
 import { useActionMenu, useToast } from '@sendbird/uikit-react-native-foundation';
-import { PASS, SendbirdGroupChannel, useFreshCallback } from '@sendbird/uikit-utils';
+import { PASS, SendbirdGroupChannel, getChannelUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import type { GroupChannelListProps } from '../types';
@@ -69,6 +69,7 @@ const GroupChannelListList = ({
       onEndReached={onLoadNext}
       {...flatListProps}
       contentContainerStyle={[flatListProps?.contentContainerStyle, { paddingLeft: left, paddingRight: right }]}
+      keyExtractor={getChannelUniqId}
     />
   );
 };

package/src/domain/groupChannelList/component/GroupChannelListTypeSelector.tsx

@@ -1,8 +1,7 @@
 import React, { useContext, useEffect } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { Platform, TouchableOpacity, View } from 'react-native';
 
 import {
-  Header as DefaultHeader,
   Icon,
   Modal,
   Text,
@@ -11,7 +10,7 @@ import {
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
 
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelListContexts } from '../module/moduleContext';
 import type { GroupChannelListProps, GroupChannelType } from '../types';
 
@@ -21,16 +20,15 @@ const TYPE_ICONS: Record<GroupChannelType, keyof typeof Icon.Assets> = {
   'SUPER_GROUP': 'supergroup',
   'BROADCAST': 'broadcast',
 };
+const STATUS_BAR_TOP_INSET_AS: 'margin' | 'padding' = Platform.select({ android: 'margin', default: 'padding' });
 
-const GroupChannelListTypeSelector = ({
-  Header = DefaultHeader,
-  skipTypeSelection,
-  onSelectType,
-}: GroupChannelListProps['TypeSelector']) => {
-  const { statusBarTranslucent } = useHeaderStyle();
+const GroupChannelListTypeSelector = ({ skipTypeSelection, onSelectType }: GroupChannelListProps['TypeSelector']) => {
+  const { statusBarTranslucent, HeaderComponent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
+  const { features } = useSendbirdChat();
   const typeSelector = useContext(GroupChannelListContexts.TypeSelector);
   const { visible, hide } = typeSelector;
+
   const createOnPressType = (type: GroupChannelType) => () => {
     hide();
     onSelectType(type);
@@ -42,42 +40,38 @@ const GroupChannelListTypeSelector = ({
 
   if (skipTypeSelection) return null;
 
-  const renderButtons = () => (
-    <View style={styles.buttonArea}>
-      {TYPES.map((type) => {
-        return (
-          <TouchableOpacity key={type} activeOpacity={0.6} onPress={createOnPressType(type)} style={styles.typeButton}>
-            <DefaultTypeIcon type={type} />
-            <DefaultTypeText type={type} />
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  );
-
-  const renderHeader = () => {
-    if (Header) {
-      return (
-        <Header
-          title={typeSelector.headerTitle}
-          right={<Icon icon={'close'} color={colors.onBackground01} />}
-          onPressRight={typeSelector.hide}
-        >
-          {renderButtons()}
-        </Header>
-      );
-    }
-
-    return (
-      <DefaultHeader title={null} right={null} left={null}>
-        {renderButtons()}
-      </DefaultHeader>
-    );
-  };
-
   return (
     <Modal visible={visible} onClose={hide} statusBarTranslucent={statusBarTranslucent}>
-      {renderHeader()}
+      <HeaderComponent
+        title={typeSelector.headerTitle}
+        right={<Icon icon={'close'} color={colors.onBackground01} />}
+        onPressRight={typeSelector.hide}
+        statusBarTopInsetAs={STATUS_BAR_TOP_INSET_AS}
+      >
+        <View style={styles.buttonArea}>
+          {TYPES.map((type) => {
+            if (type === 'SUPER_GROUP' && !features.superGroupChannelEnabled) {
+              return null;
+            }
+
+            if (type === 'BROADCAST' && !features.broadcastChannelEnabled) {
+              return null;
+            }
+
+            return (
+              <TouchableOpacity
+                key={type}
+                activeOpacity={0.6}
+                onPress={createOnPressType(type)}
+                style={styles.typeButton}
+              >
+                <DefaultTypeIcon type={type} />
+                <DefaultTypeText type={type} />
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </HeaderComponent>
     </Modal>
   );
 };