@sendbird/uikit-react-native 2.0.1 → 2.0.2

package/lib/module/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '2.0.1';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAhB;AACA,eAAeA,OAAf"}
+{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '2.0.2';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAhB;AACA,eAAeA,OAAf"}

package/lib/typescript/src/components/UserActionBar.d.ts

@@ -1,10 +1,12 @@
+import type { GestureResponderEvent } from 'react-native';
 declare type Props = {
     uri: string;
     name: string;
     label?: string;
     muted: boolean;
     disabled: boolean;
-    onPressActionMenu?: () => void;
+    onPressActionMenu?: (ev: GestureResponderEvent) => void;
+    onPressAvatar?: (ev: GestureResponderEvent) => void;
 };
-declare const UserActionBar: ({ muted, uri, name, disabled, onPressActionMenu, label }: Props) => JSX.Element;
+declare const UserActionBar: ({ muted, uri, name, disabled, label, onPressActionMenu, onPressAvatar }: Props) => JSX.Element;
 export default UserActionBar;

package/lib/typescript/src/containers/SendbirdUIKitContainer.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { HeaderStyleContextType, UIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
+import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
 import type { StringSet } from '../localization/StringSet.type';
 import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface } from '../platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "2.0.1";
+    VERSION: "2.0.2";
     PLATFORM: string;
 }>;
 export declare type SendbirdUIKitContainerProps = React.PropsWithChildren<{
@@ -36,10 +36,14 @@ export declare type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     toast?: {
         dismissTimeout?: number;
     };
+    profileCard?: {
+        onCreateChannel: (channel: SendbirdGroupChannel) => void;
+        onBeforeCreateChannel?: (channelParams: SendbirdGroupChannelCreateParams, users: SendbirdUser[] | SendbirdMember[]) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+    };
     errorBoundary?: {
         onError?: (props: ErrorBoundaryProps) => void;
         ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
     };
 }>;
-declare const SendbirdUIKitContainer: ({ children, appId, chatOptions, platformServices, localization, styles, toast, errorBoundary, }: SendbirdUIKitContainerProps) => JSX.Element;
+declare const SendbirdUIKitContainer: ({ children, appId, chatOptions, platformServices, localization, styles, toast, profileCard, errorBoundary, }: SendbirdUIKitContainerProps) => JSX.Element;
 export default SendbirdUIKitContainer;

package/lib/typescript/src/contexts/ProfileCardCtx.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+declare type OnCreateChannel = (channel: SendbirdGroupChannel) => void;
+declare type OnBeforeCreateChannel = (channelParams: SendbirdGroupChannelCreateParams, users: SendbirdUser[] | SendbirdMember[]) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+export declare type ProfileCardContextType = {
+    show(user: SendbirdUser | SendbirdMember): void;
+    hide(): void;
+};
+declare type Props = React.PropsWithChildren<{
+    onCreateChannel?: OnCreateChannel;
+    onBeforeCreateChannel?: OnBeforeCreateChannel;
+}>;
+export declare const ProfileCardContext: React.Context<ProfileCardContextType | null>;
+export declare const ProfileCardProvider: ({ children, onCreateChannel, onBeforeCreateChannel }: Props) => JSX.Element;
+export {};

package/lib/typescript/src/domain/groupChannelList/types.d.ts

@@ -19,6 +19,8 @@ export interface GroupChannelListProps {
         }>>;
         /** Method to render GroupChannel preview **/
         renderGroupChannelPreview?: (channel: SendbirdGroupChannel, onLongPressChannel: () => void) => React.ReactElement | null;
+        /** Skip type selection, When this is set to true 'channelType' only receive 'GROUP' type **/
+        skipTypeSelection?: boolean;
         /** Custom Query creator for channels query **/
         queryCreator?: UseGroupChannelListOptions['queryCreator'];
         /** Custom Collection creator for group channel collection **/

package/lib/typescript/src/hooks/useContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const useLocalization: () => import("../contexts/Localization").LocalizationContextType;
+export declare const useLocalization: () => import("../contexts/LocalizationCtx").LocalizationContextType;
 export declare const usePlatformService: () => {
     fileService: import("..").FileServiceInterface;
     clipboardService: import("..").ClipboardServiceInterface;
@@ -24,3 +24,4 @@ export declare const useSendbirdChat: () => {
         reactionEnabled: boolean;
     };
 };
+export declare const useProfileCard: () => import("../contexts/ProfileCardCtx").ProfileCardContextType;

package/lib/typescript/src/index.d.ts

@@ -17,13 +17,14 @@ export { default as createGroupChannelInviteFragment } from './fragments/createG
 export { default as createGroupChannelListFragment } from './fragments/createGroupChannelListFragment';
 export { default as createGroupChannelMembersFragment } from './fragments/createGroupChannelMembersFragment';
 /** Context **/
-export { SendbirdChatContext, SendbirdChatProvider } from './contexts/SendbirdChat';
-export { PlatformServiceContext, PlatformServiceProvider } from './contexts/PlatformService';
-export { LocalizationContext, LocalizationProvider } from './contexts/Localization';
+export { SendbirdChatContext, SendbirdChatProvider } from './contexts/SendbirdChatCtx';
+export { PlatformServiceContext, PlatformServiceProvider } from './contexts/PlatformServiceCtx';
+export { ProfileCardContext, ProfileCardProvider } from './contexts/ProfileCardCtx';
+export { LocalizationContext, LocalizationProvider } from './contexts/LocalizationCtx';
 /** Hooks **/
 export { default as useConnection } from './hooks/useConnection';
 export { default as usePushTokenRegistration } from './hooks/usePushTokenRegistration';
-export { useLocalization, usePlatformService, useSendbirdChat } from './hooks/useContext';
+export { useLocalization, usePlatformService, useSendbirdChat, useProfileCard } from './hooks/useContext';
 /** Localization **/
 export { default as StringSetEn } from './localization/StringSet.en';
 export { createBaseStringSet } from './localization/StringSet.type';

package/lib/typescript/src/localization/StringSet.type.d.ts

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns';
-import type { PartialDeep, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';
+import type { PartialDeep, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';
 /**
  * StringSet interface
  * Do not configure over 3 depths (for overrides easy)
@@ -148,6 +148,11 @@ export interface StringSet {
         TURN_OFF_NOTIFICATIONS_ERROR: string;
         LEAVE_CHANNEL_ERROR: string;
     };
+    PROFILE_CARD: {
+        BUTTON_MESSAGE: string;
+        BODY_LABEL: string;
+        BODY: (user: SendbirdUser | SendbirdMember) => string;
+    };
 }
 declare type StringSetCreateOptions = {
     dateLocale: Locale;

package/lib/typescript/src/platform/createFileService.native.d.ts

@@ -1,4 +1,4 @@
-import type CameraRoll from '@react-native-community/cameraroll';
+import type { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import type * as DocumentPicker from 'react-native-document-picker';
 import type * as FileAccess from 'react-native-file-access';
 import type * as ImagePicker from 'react-native-image-picker';

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "2.0.1";
+declare const VERSION = "2.0.2";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,13 +41,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "2.0.1",
-    "@sendbird/uikit-react-native-foundation": "2.0.1",
-    "@sendbird/uikit-utils": "2.0.1"
+    "@sendbird/uikit-chat-hooks": "2.0.2",
+    "@sendbird/uikit-react-native-foundation": "2.0.2",
+    "@sendbird/uikit-utils": "2.0.2"
   },
   "devDependencies": {
+    "@react-native-camera-roll/camera-roll": "^5.0.4",
     "@react-native-clipboard/clipboard": "^1.8.5",
-    "@react-native-community/cameraroll": "^4.1.2",
     "@react-native-community/netinfo": "^9.3.0",
     "@react-native-firebase/app": "^14.4.0",
     "@react-native-firebase/messaging": "^14.4.0",
@@ -79,8 +79,8 @@
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
+    "@react-native-camera-roll/camera-roll": ">=5.0.0",
     "@react-native-clipboard/clipboard": ">=1.8.5",
-    "@react-native-community/cameraroll": ">=4.1.2",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
     "@sendbird/chat": "^4.0.13",
@@ -103,10 +103,10 @@
     "react-native-video": ">=5.2.0"
   },
   "peerDependenciesMeta": {
-    "@react-native-clipboard/clipboard": {
+    "@react-native-camera-roll/camera-roll": {
       "optional": true
     },
-    "@react-native-community/cameraroll": {
+    "@react-native-clipboard/clipboard": {
       "optional": true
     },
     "@react-native-firebase/messaging": {
@@ -171,5 +171,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "3c00c29c86778ab2775049a22e03a2b5cce01d87"
+  "gitHead": "95323825da753f20b931b4a8b7e187cd8dc6284e"
 }

package/src/components/MessageRenderer/MessageIncomingAvatar.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
-import { View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 import { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
+import { useProfileCard } from '../../hooks/useContext';
+
 type Props = {
   message: SendbirdMessage;
   grouping: boolean;
 };
 const MessageIncomingAvatar = ({ message, grouping }: Props) => {
+  const { show } = useProfileCard();
   if (grouping) return <View style={styles.avatar} />;
   return (
     <View style={styles.avatar}>
-      {(message.isFileMessage() || message.isUserMessage()) && <Avatar size={26} uri={message.sender?.profileUrl} />}
+      {(message.isFileMessage() || message.isUserMessage()) && (
+        <Pressable onPress={() => show(message.sender)}>
+          <Avatar size={26} uri={message.sender?.profileUrl} />
+        </Pressable>
+      )}
     </View>
   );
 };

package/src/components/UserActionBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { Pressable, TouchableOpacity, View } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
 import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
@@ -8,18 +9,23 @@ type Props = {
   uri: string;
   name: string;
   label?: string;
+
   muted: boolean;
   disabled: boolean;
-  onPressActionMenu?: () => void;
+
+  onPressActionMenu?: (ev: GestureResponderEvent) => void;
+  onPressAvatar?: (ev: GestureResponderEvent) => void;
 };
-const UserActionBar = ({ muted, uri, name, disabled, onPressActionMenu, label }: Props) => {
+const UserActionBar = ({ muted, uri, name, disabled, label, onPressActionMenu, onPressAvatar }: Props) => {
   const { colors } = useUIKitTheme();
 
   const iconColor = conditionChaining([disabled], [colors.onBackground04, colors.onBackground01]);
 
   return (
     <View style={styles.container}>
-      <Avatar muted={muted} size={36} uri={uri} containerStyle={styles.avatar} />
+      <Pressable onPress={onPressAvatar} style={styles.avatar}>
+        <Avatar muted={muted} size={36} uri={uri} />
+      </Pressable>
       <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>
         <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
           {name}

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -89,10 +89,24 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
     return undefined;
   });
 
+  const customCover = useIIFE(() => {
+    if (channel.isBroadcast) {
+      return (
+        <Icon
+          icon={'broadcast'}
+          size={32}
+          color={colors.onBackgroundReverse01}
+          containerStyle={[styles.broadcastCover, { backgroundColor: colors.secondary }]}
+        />
+      );
+    }
+    return <ChannelCover channel={channel} size={56} />;
+  });
+
   return (
     <Pressable delayLongPress={DEFAULT_LONG_PRESS_DELAY} onPress={onPress} onLongPress={onLongPress}>
       <GroupChannelPreview
-        customCover={<ChannelCover channel={channel} size={56} />}
+        customCover={customCover}
         coverUrl={channel.coverUrl}
         title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}
         titleCaptionLeft={titleCaptionIcon}
@@ -102,6 +116,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         badgeCount={channel.unreadMessageCount}
         memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
         frozen={channel.isFrozen}
+        broadcast={channel.isBroadcast}
         notificationOff={channel.myPushTriggerOption === 'off'}
       />
     </Pressable>
@@ -112,6 +127,10 @@ const styles = createStyleSheet({
   titleCaptionIcon: {
     marginRight: 4,
   },
+  broadcastCover: {
+    padding: 12,
+    borderRadius: 28,
+  },
 });
 
 export default GroupChannelPreviewContainer;

package/src/containers/SendbirdUIKitContainer.tsx

@@ -14,11 +14,18 @@ import {
   ToastProvider,
   UIKitThemeProvider,
 } from '@sendbird/uikit-react-native-foundation';
-import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-
-import { LocalizationProvider } from '../contexts/Localization';
-import { PlatformServiceProvider } from '../contexts/PlatformService';
-import { SendbirdChatProvider } from '../contexts/SendbirdChat';
+import type {
+  SendbirdChatSDK,
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCreateParams,
+  SendbirdMember,
+  SendbirdUser,
+} from '@sendbird/uikit-utils';
+
+import { LocalizationProvider } from '../contexts/LocalizationCtx';
+import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
+import { ProfileCardProvider } from '../contexts/ProfileCardCtx';
+import { SendbirdChatProvider } from '../contexts/SendbirdChatCtx';
 import { useLocalization } from '../hooks/useContext';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import StringSetEn from '../localization/StringSet.en';
@@ -69,6 +76,13 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   toast?: {
     dismissTimeout?: number;
   };
+  profileCard?: {
+    onCreateChannel: (channel: SendbirdGroupChannel) => void;
+    onBeforeCreateChannel?: (
+      channelParams: SendbirdGroupChannelCreateParams,
+      users: SendbirdUser[] | SendbirdMember[],
+    ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+  };
   errorBoundary?: {
     onError?: (props: ErrorBoundaryProps) => void;
     ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
@@ -83,6 +97,7 @@ const SendbirdUIKitContainer = ({
   localization,
   styles,
   toast,
+  profileCard,
   errorBoundary,
 }: SendbirdUIKitContainerProps) => {
   const unsubscribes = useRef<(() => void)[]>([]).current;
@@ -163,7 +178,12 @@ const SendbirdUIKitContainer = ({
               >
                 <LocalizedDialogProvider>
                   <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
+                    <ProfileCardProvider
+                      onCreateChannel={profileCard?.onCreateChannel}
+                      onBeforeCreateChannel={profileCard?.onBeforeCreateChannel}
+                    >
+                      <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
+                    </ProfileCardProvider>
                   </ToastProvider>
                 </LocalizedDialogProvider>
               </HeaderStyleProvider>

package/src/contexts/ProfileCardCtx.tsx

@@ -0,0 +1,125 @@
+import React, { useContext, useState } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Modal, OutlinedButton, ProfileCard, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import type {
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCreateParams,
+  SendbirdMember,
+  SendbirdUser,
+} from '@sendbird/uikit-utils';
+import { Logger, PASS, useIIFE } from '@sendbird/uikit-utils';
+
+import { LocalizationContext } from '../contexts/LocalizationCtx';
+import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
+
+type OnCreateChannel = (channel: SendbirdGroupChannel) => void;
+type OnBeforeCreateChannel = (
+  channelParams: SendbirdGroupChannelCreateParams,
+  users: SendbirdUser[] | SendbirdMember[],
+) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+
+export type ProfileCardContextType = {
+  show(user: SendbirdUser | SendbirdMember): void;
+  hide(): void;
+};
+
+type Props = React.PropsWithChildren<{
+  onCreateChannel?: OnCreateChannel;
+  onBeforeCreateChannel?: OnBeforeCreateChannel;
+}>;
+
+export const ProfileCardContext = React.createContext<ProfileCardContextType | null>(null);
+export const ProfileCardProvider = ({ children, onCreateChannel, onBeforeCreateChannel = PASS }: Props) => {
+  const chatContext = useContext(SendbirdChatContext);
+  const localizationContext = useContext(LocalizationContext);
+  const { bottom, left, right } = useSafeAreaInsets();
+
+  const [user, setUser] = useState<SendbirdUser | SendbirdMember>();
+  const [visible, setVisible] = useState(false);
+
+  const show: ProfileCardContextType['show'] = (user) => {
+    setUser(user);
+    setVisible(true);
+  };
+
+  const hide: ProfileCardContextType['hide'] = () => {
+    setVisible(false);
+  };
+
+  if (!chatContext) throw new Error('SendbirdChatContext is not provided');
+  if (!localizationContext) throw new Error('LocalizationContext is not provided');
+
+  const profileCardButton = useIIFE(() => {
+    const isMe = chatContext.currentUser && user?.userId === chatContext.currentUser.userId;
+    if (isMe) return undefined;
+
+    const onPressMessageButton = async () => {
+      if (user) {
+        const params: SendbirdGroupChannelCreateParams = {
+          invitedUserIds: [user.userId],
+          name: '',
+          coverUrl: '',
+          isDistinct: false,
+        };
+
+        if (chatContext.currentUser) params.operatorUserIds = [chatContext.currentUser.userId];
+        const processedParams = await onBeforeCreateChannel(params, [user]);
+
+        hide();
+        const channel = await chatContext.sdk.groupChannel.createChannel(processedParams);
+
+        if (onCreateChannel) {
+          onCreateChannel(channel);
+        } else {
+          Logger.warn(
+            'Please set `onCreateChannel` before message to user from profile card, see `profileCard` prop in the `SendbirdUIKitContainer` props',
+          );
+        }
+      }
+    };
+
+    return (
+      <OutlinedButton onPress={onPressMessageButton}>
+        {localizationContext.STRINGS.PROFILE_CARD.BUTTON_MESSAGE}
+      </OutlinedButton>
+    );
+  });
+
+  return (
+    <ProfileCardContext.Provider value={{ show, hide }}>
+      {children}
+      <Modal
+        type={'slide'}
+        onClose={hide}
+        onDismiss={() => setUser(undefined)}
+        visible={visible && Boolean(user)}
+        backgroundStyle={styles.modal}
+      >
+        {user && (
+          <ProfileCard
+            containerStyle={[
+              styles.profileCardContainer,
+              { paddingLeft: left, paddingRight: right, paddingBottom: bottom },
+            ]}
+            uri={user.profileUrl}
+            username={user.nickname || localizationContext.STRINGS.LABELS.USER_NO_NAME}
+            bodyLabel={localizationContext.STRINGS.PROFILE_CARD.BODY_LABEL}
+            body={localizationContext.STRINGS.PROFILE_CARD.BODY(user)}
+            button={profileCardButton}
+          />
+        )}
+      </Modal>
+    </ProfileCardContext.Provider>
+  );
+};
+
+const styles = createStyleSheet({
+  modal: {
+    justifyContent: 'flex-end',
+  },
+  profileCardContainer: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+});

package/src/contexts/{SendbirdChat.tsx → SendbirdChatCtx.tsx}

@@ -87,7 +87,7 @@ export const SendbirdChatProvider = ({
 
   const markAsDeliveredWithChannel: Context['markAsDeliveredWithChannel'] = useCallback(
     (channel: SendbirdGroupChannel) => {
-      if (appFeatures.deliveryReceiptEnabled) confirmAndMarkAsDelivered(sdkInstance, channel);
+      if (appFeatures.deliveryReceiptEnabled) confirmAndMarkAsDelivered([channel]);
     },
     [sdkInstance, appFeatures.deliveryReceiptEnabled],
   );

package/src/domain/groupChannelList/types.ts

@@ -23,8 +23,8 @@ export interface GroupChannelListProps {
       channel: SendbirdGroupChannel,
       onLongPressChannel: () => void,
     ) => React.ReactElement | null;
-    // /** Skip type selection, When this is set to true 'channelType' only receive 'GROUP' type **/
-    // skipTypeSelection?: boolean;
+    /** Skip type selection, When this is set to true 'channelType' only receive 'GROUP' type **/
+    skipTypeSelection?: boolean;
     /** Custom Query creator for channels query **/
     queryCreator?: UseGroupChannelListOptions['queryCreator'];
     /** Custom Collection creator for group channel collection **/

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
-import { NOOP, PASS, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
+import { NOOP, PASS, SendbirdGroupChannel, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
 
 import MessageRenderer from '../components/MessageRenderer';
 import NewMessagesButton from '../components/NewMessagesButton';
@@ -119,17 +119,27 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             onPressMediaMessage={onPressMediaMessage}
             flatListProps={memoizedFlatListProps}
           />
-          <GroupChannelModule.Input
-            channel={activeChannel}
-            onSendFileMessage={onSendFileMessage}
-            onSendUserMessage={onSendUserMessage}
-            onUpdateFileMessage={onUpdateFileMessage}
-            onUpdateUserMessage={onUpdateUserMessage}
-          />
+          {shouldRenderInput(channel) && (
+            <GroupChannelModule.Input
+              channel={activeChannel}
+              onSendFileMessage={onSendFileMessage}
+              onSendUserMessage={onSendUserMessage}
+              onUpdateFileMessage={onUpdateFileMessage}
+              onUpdateUserMessage={onUpdateUserMessage}
+            />
+          )}
         </StatusComposition>
       </GroupChannelModule.Provider>
     );
   };
 };
 
+function shouldRenderInput(channel: SendbirdGroupChannel) {
+  if (channel.isBroadcast) {
+    return channel.myRole === 'operator';
+  }
+
+  return true;
+}
+
 export default createGroupChannelFragment;

package/src/fragments/createGroupChannelListFragment.tsx

@@ -23,7 +23,7 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
     queryCreator,
     collectionCreator,
     renderGroupChannelPreview,
-    // skipTypeSelection = true,
+    skipTypeSelection = false,
     flatListProps = {},
     menuItemCreator = PASS,
   }) => {
@@ -78,8 +78,7 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
           />
         </StatusComposition>
         <GroupChannelListModule.TypeSelector
-          // NOTE: not included in first iteration
-          skipTypeSelection
+          skipTypeSelection={skipTypeSelection}
           Header={TypeSelectorHeader}
           onSelectType={onPressCreateChannel}
         />