@sendbird/uikit-react-native 2.1.0 → 2.2.0

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

@@ -19,14 +19,16 @@ import {
   getFileType,
   isMyMessage,
   messageKeyExtractor,
+  shouldRenderReaction,
   toMegabyte,
   useFreshCallback,
 } from '@sendbird/uikit-utils';
 
 import type { ChatFlatListRef } from '../../../components/ChatFlatList';
 import ChatFlatList from '../../../components/ChatFlatList';
+import { ReactionAddons } from '../../../components/ReactionAddons';
 import { DEPRECATION_WARNING } from '../../../constants';
-import { useLocalization, usePlatformService } from '../../../hooks/useContext';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
@@ -57,11 +59,12 @@ const GroupChannelMessageList = ({
   const scrollRef = useRef<ChatFlatListRef>(null);
   const [newMessagesInternalBuffer, setNewMessagesInternalBuffer] = useState(() => newMessagesFromMembers);
   const getMessagePressActions = useGetMessagePressActions({
+    channel,
+    currentUserId,
     onDeleteMessage,
+    onResendFailedMessage,
     onPressImageMessage,
     onPressMediaMessage,
-    currentUserId,
-    onResendFailedMessage,
   });
 
   const safeAreaLayout = { paddingLeft: left, paddingRight: right };
@@ -140,14 +143,20 @@ const GroupChannelMessageList = ({
 
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
 const useGetMessagePressActions = ({
+  channel,
+  currentUserId,
+  onResendFailedMessage,
+  onDeleteMessage,
   onPressImageMessage,
   onPressMediaMessage,
-  onDeleteMessage,
-  onResendFailedMessage,
-  currentUserId,
 }: Pick<
   GroupChannelProps['MessageList'],
-  'onDeleteMessage' | 'onResendFailedMessage' | 'currentUserId' | 'onPressImageMessage' | 'onPressMediaMessage'
+  | 'channel'
+  | 'currentUserId'
+  | 'onResendFailedMessage'
+  | 'onDeleteMessage'
+  | 'onPressImageMessage'
+  | 'onPressMediaMessage'
 >) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
@@ -155,7 +164,8 @@ const useGetMessagePressActions = ({
   const { openSheet } = useBottomSheet();
   const { alert } = useAlert();
   const { clipboardService, fileService } = usePlatformService();
-  const { setEditMessage } = useContext(GroupChannelContexts.Fragment);
+  const { features } = useSendbirdChat();
+  const { setMessageToEdit } = useContext(GroupChannelContexts.Fragment);
 
   const handleFailedMessage = (message: HandleableMessage) => {
     openSheet({
@@ -215,7 +225,7 @@ const useGetMessagePressActions = ({
           {
             icon: 'edit',
             title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_EDIT,
-            onPress: () => setEditMessage(msg),
+            onPress: () => setMessageToEdit(msg),
           },
           {
             icon: 'delete',
@@ -278,7 +288,14 @@ const useGetMessagePressActions = ({
     }
 
     if (sheetItems.length > 0) {
-      response.onLongPress = () => openSheet({ sheetItems });
+      response.onLongPress = () => {
+        openSheet({
+          sheetItems,
+          HeaderComponent: shouldRenderReaction(channel, features.reactionEnabled)
+            ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
+            : undefined,
+        });
+      };
     }
 
     if (msg.sendingStatus === 'failed') {

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: {
@@ -91,9 +98,24 @@ export interface GroupChannelProps {
   Input: {
     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/GroupChannelBannedUsersList.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { SendbirdRestrictedUser, useFreshCallback } from '@sendbird/uikit-utils';
+import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
 import type { GroupChannelBannedUsersProps } from '../types';
 
@@ -23,8 +23,9 @@ const GroupChannelBannedUsersList = ({
       renderItem={renderItem}
       contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
-      onEndReached={() => onLoadNext()}
+      onEndReached={onLoadNext}
       bounces={false}
+      keyExtractor={getUserUniqId}
     />
   );
 };

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/groupChannelMutedMembers/component/GroupChannelMutedMembersList.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { SendbirdRestrictedUser, useFreshCallback } from '@sendbird/uikit-utils';
+import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
 import type { GroupChannelMutedMembersProps } from '../types';
 
@@ -23,6 +23,7 @@ const GroupChannelMutedMembersList = ({
       contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
       bounces={false}
+      keyExtractor={getUserUniqId}
     />
   );
 };

package/src/domain/groupChannelNotifications/component/GroupChannelNotificationsHeader.tsx

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

package/src/domain/groupChannelNotifications/component/GroupChannelNotificationsView.tsx

@@ -0,0 +1,128 @@
+import React, { useContext } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+
+import { PushTriggerOption } from '@sendbird/chat';
+import { Divider, Icon, Switch, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { useForceUpdate } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../../hooks/useContext';
+import { GroupChannelNotificationsContexts } from '../module/moduleContext';
+
+const GroupChannelNotificationsView = () => {
+  const { channel } = useContext(GroupChannelNotificationsContexts.Fragment);
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const forceUpdate = useForceUpdate();
+
+  const turnedOnNotifications = channel.myPushTriggerOption !== PushTriggerOption.OFF;
+  const turnedOnNotificationsOptionAll = [PushTriggerOption.ALL, PushTriggerOption.DEFAULT].some(
+    (it) => it === channel.myPushTriggerOption,
+  );
+  const turnedOnNotificationsOptionMentionsOnly = channel.myPushTriggerOption === PushTriggerOption.MENTION_ONLY;
+
+  const toggleNotificationSwitch = async (val: boolean) => {
+    if (val) {
+      await channel.setMyPushTriggerOption(PushTriggerOption.ALL);
+    } else {
+      await channel.setMyPushTriggerOption(PushTriggerOption.OFF);
+    }
+    forceUpdate();
+  };
+
+  const onPressNotificationsOption = async (option: PushTriggerOption.ALL | PushTriggerOption.MENTION_ONLY) => {
+    await channel.setMyPushTriggerOption(option);
+    forceUpdate();
+  };
+
+  return (
+    <ScrollView bounces={false} contentContainerStyle={styles.container}>
+      <Bar
+        subtitle2
+        title={STRINGS.GROUP_CHANNEL_NOTIFICATIONS.MENU_NOTIFICATIONS}
+        description={STRINGS.GROUP_CHANNEL_NOTIFICATIONS.MENU_NOTIFICATIONS_DESC}
+        component={<Switch value={turnedOnNotifications} onChangeValue={toggleNotificationSwitch} />}
+      />
+      <Divider />
+      {turnedOnNotifications && (
+        <>
+          <Bar
+            body3
+            onPress={() => onPressNotificationsOption(PushTriggerOption.ALL)}
+            title={STRINGS.GROUP_CHANNEL_NOTIFICATIONS.MENU_NOTIFICATIONS_OPTION_ALL}
+            component={
+              <Icon
+                color={turnedOnNotificationsOptionAll ? colors.primary : colors.onBackground03}
+                icon={turnedOnNotificationsOptionAll ? 'radio-on' : 'radio-off'}
+                size={24}
+              />
+            }
+          />
+          <Divider />
+          <Bar
+            body3
+            onPress={() => onPressNotificationsOption(PushTriggerOption.MENTION_ONLY)}
+            title={STRINGS.GROUP_CHANNEL_NOTIFICATIONS.MENU_NOTIFICATIONS_OPTION_MENTION_ONLY}
+            component={
+              <Icon
+                color={turnedOnNotificationsOptionMentionsOnly ? colors.primary : colors.onBackground03}
+                icon={turnedOnNotificationsOptionMentionsOnly ? 'radio-on' : 'radio-off'}
+                size={24}
+              />
+            }
+          />
+          <Divider />
+        </>
+      )}
+    </ScrollView>
+  );
+};
+
+type BarProps = {
+  title: string;
+  onPress?: () => void;
+  description?: string;
+  component: React.ReactNode;
+  subtitle2?: boolean;
+  body3?: boolean;
+};
+const Bar = ({ title, onPress, description, component, subtitle2, body3 }: BarProps) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <Pressable onPress={onPress} style={styles.barContainer}>
+      <View style={styles.titleContainer}>
+        <Text body3={body3} subtitle2={subtitle2} numberOfLines={1} color={colors.onBackground01} style={styles.title}>
+          {title}
+        </Text>
+        <View>{component}</View>
+      </View>
+      {Boolean(description) && (
+        <Text body3 color={colors.onBackground02} style={styles.desc}>
+          {description}
+        </Text>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingHorizontal: 16,
+  },
+  barContainer: {
+    paddingVertical: 16,
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    flex: 1,
+    marginRight: 8,
+  },
+  desc: {
+    marginTop: 8,
+    flex: 1,
+  },
+});
+
+export default GroupChannelNotificationsView;

package/src/domain/groupChannelNotifications/index.ts

@@ -0,0 +1,4 @@
+export { default as GroupChannelNotificationsView } from './component/GroupChannelNotificationsView';
+export { default as GroupChannelNotificationsHeader } from './component/GroupChannelNotificationsHeader';
+export { default as createGroupChannelNotificationsModule } from './module/createGroupChannelNotificationsModule';
+export { GroupChannelNotificationsContextsProvider, GroupChannelNotificationsContexts } from './module/moduleContext';

package/src/domain/groupChannelNotifications/module/createGroupChannelNotificationsModule.tsx

@@ -0,0 +1,15 @@
+import GroupChannelNotificationsHeader from '../component/GroupChannelNotificationsHeader';
+import GroupChannelNotificationsView from '../component/GroupChannelNotificationsView';
+import type { GroupChannelNotificationsModule } from '../types';
+import { GroupChannelNotificationsContextsProvider } from './moduleContext';
+
+const createGroupChannelNotificationsModule = ({
+  Header = GroupChannelNotificationsHeader,
+  View = GroupChannelNotificationsView,
+  Provider = GroupChannelNotificationsContextsProvider,
+  ...module
+}: Partial<GroupChannelNotificationsModule> = {}): GroupChannelNotificationsModule => {
+  return { Header, View, Provider, ...module };
+};
+
+export default createGroupChannelNotificationsModule;

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

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