@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/domain/groupChannelList/types.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { FlatListProps } from 'react-native';
 
 import type { UseGroupChannelListOptions } from '@sendbird/uikit-chat-hooks';
-import type { ActionMenuItem, BaseHeaderProps } from '@sendbird/uikit-react-native-foundation';
+import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -14,17 +14,13 @@ export interface GroupChannelListProps {
     onPressChannel: (channel: SendbirdGroupChannel) => void;
     /** Navigate to GroupChannelCreateFragment **/
     onPressCreateChannel: (channelType: GroupChannelType) => void;
-    /** Custom Header for TypeSelector, Only replace header component not a module **/
-    TypeSelectorHeader?: null | CommonComponent<
-      BaseHeaderProps<{ title: string; right: React.ReactElement; onPressRight: () => void }>
-    >;
     /** 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;
+    /** 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 **/
@@ -55,8 +51,6 @@ export interface GroupChannelListProps {
   };
   /** Props for `GroupChannelListModule.TypeSelector` **/
   TypeSelector: {
-    /** Prop from Fragment `Fragment.TypeSelectorHeader` **/
-    Header: GroupChannelListProps['Fragment']['TypeSelectorHeader'];
     /** Prop from Fragment `Fragment.skipTypeSelection` **/
     skipTypeSelection: boolean;
     /** Method called when type is selected, call `Fragment.onPressCreateChannel` **/

package/src/domain/groupChannelModeration/component/GroupChannelModerationHeader.tsx

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

package/src/domain/groupChannelModeration/component/GroupChannelModerationMenu.tsx

@@ -0,0 +1,84 @@
+import React, { useContext, useState } from 'react';
+import { View } from 'react-native';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import { Icon, MenuBar, Switch, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../../hooks/useContext';
+import { GroupChannelModerationContexts } from '../module/moduleContext';
+import type { GroupChannelModerationProps } from '../types';
+
+const GroupChannelModerationMenu = ({
+  onPressMenuBannedUsers,
+  onPressMenuMutedMembers,
+  onPressMenuOperators,
+  menuItemsCreator = (menu) => menu,
+}: GroupChannelModerationProps['Menu']) => {
+  const { channel } = useContext(GroupChannelModerationContexts.Fragment);
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  const [isFrozen, setIsFrozen] = useState(() => channel.isFrozen);
+
+  const toggleFreeze = async () => {
+    if (channel.isFrozen) {
+      await channel.unfreeze();
+    } else {
+      await channel.freeze();
+    }
+
+    setIsFrozen(channel.isFrozen);
+  };
+
+  const menuItems: MenuBarProps[] = menuItemsCreator([
+    {
+      icon: 'operator',
+      name: STRINGS.GROUP_CHANNEL_MODERATION.MENU_OPERATORS,
+      onPress: () => onPressMenuOperators(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'mute',
+      visible: !channel.isBroadcast,
+      name: STRINGS.GROUP_CHANNEL_MODERATION.MENU_MUTED_MEMBERS,
+      onPress: () => onPressMenuMutedMembers(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'ban',
+      name: STRINGS.GROUP_CHANNEL_MODERATION.MENU_BANNED_USERS,
+      onPress: () => onPressMenuBannedUsers(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'freeze',
+      visible: !channel.isBroadcast,
+      name: STRINGS.GROUP_CHANNEL_MODERATION.MENU_FREEZE_CHANNEL,
+      actionItem: <Switch value={isFrozen} onChangeValue={toggleFreeze} />,
+      onPress: toggleFreeze,
+    },
+  ]);
+
+  return (
+    <View>
+      {menuItems.map((menu) => {
+        return (
+          <MenuBar
+            key={menu.name}
+            onPress={menu.onPress}
+            name={menu.name}
+            disabled={menu.disabled}
+            visible={menu.visible}
+            icon={menu.icon}
+            iconColor={menu.iconColor}
+            iconBackgroundColor={menu.iconBackgroundColor}
+            actionLabel={menu.actionLabel}
+            actionItem={menu.actionItem}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default GroupChannelModerationMenu;

package/src/domain/groupChannelModeration/index.ts

@@ -0,0 +1,4 @@
+export { default as GroupChannelModerationHeader } from './component/GroupChannelModerationHeader';
+export { default as GroupChannelModerationMenu } from './component/GroupChannelModerationMenu';
+export { default as createGroupChannelModerationModule } from './module/createGroupChannelModerationModule';
+export { GroupChannelModerationContextsProvider, GroupChannelModerationContexts } from './module/moduleContext';

package/src/domain/groupChannelModeration/module/createGroupChannelModerationModule.tsx

@@ -0,0 +1,15 @@
+import GroupChannelModerationHeader from '../component/GroupChannelModerationHeader';
+import GroupChannelModerationMenu from '../component/GroupChannelModerationMenu';
+import type { GroupChannelModerationModule } from '../types';
+import { GroupChannelModerationContextsProvider } from './moduleContext';
+
+const createGroupChannelModerationModule = ({
+  Header = GroupChannelModerationHeader,
+  Menu = GroupChannelModerationMenu,
+  Provider = GroupChannelModerationContextsProvider,
+  ...module
+}: Partial<GroupChannelModerationModule> = {}): GroupChannelModerationModule => {
+  return { Header, Menu, Provider, ...module };
+};
+
+export default createGroupChannelModerationModule;

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

@@ -0,0 +1,33 @@
+import React, { createContext } from 'react';
+
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { GroupChannelModerationContextsType, GroupChannelModerationModule } from '../types';
+
+export const GroupChannelModerationContexts: GroupChannelModerationContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+  }),
+};
+
+export const GroupChannelModerationContextsProvider: GroupChannelModerationModule['Provider'] = ({
+  children,
+  channel,
+}) => {
+  // const [visible, setVisible] = useState(false);
+
+  const { STRINGS } = useLocalization();
+
+  return (
+    <ProviderLayout>
+      <GroupChannelModerationContexts.Fragment.Provider
+        value={{ headerTitle: STRINGS.GROUP_CHANNEL_MODERATION.HEADER_TITLE, channel }}
+      >
+        {children}
+      </GroupChannelModerationContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelModeration/types.ts

@@ -0,0 +1,48 @@
+import type React from 'react';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type GroupChannelModerationProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelModerationProps['Header']['onPressHeaderLeft'];
+    onPressMenuOperators: GroupChannelModerationProps['Menu']['onPressMenuOperators'];
+    onPressMenuMutedMembers: GroupChannelModerationProps['Menu']['onPressMenuMutedMembers'];
+    onPressMenuBannedUsers: GroupChannelModerationProps['Menu']['onPressMenuBannedUsers'];
+    menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  Menu: {
+    onPressMenuOperators: () => void;
+    onPressMenuMutedMembers: () => void;
+    onPressMenuBannedUsers: () => void;
+    menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelModeration
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelModerationContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdGroupChannel;
+  }>;
+};
+export interface GroupChannelModerationModule {
+  Provider: CommonComponent<GroupChannelModerationProps['Provider']>;
+  Header: CommonComponent<GroupChannelModerationProps['Header']>;
+  Menu: CommonComponent<GroupChannelModerationProps['Menu']>;
+}
+
+export type GroupChannelModerationFragment = CommonComponent<GroupChannelModerationProps['Fragment']>;

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersHeader.tsx

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

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersList.tsx

@@ -0,0 +1,31 @@
+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 { GroupChannelMutedMembersProps } from '../types';
+
+const GroupChannelMutedMembersList = ({
+  renderUser,
+  mutedMembers,
+  ListEmptyComponent,
+}: GroupChannelMutedMembersProps['List']) => {
+  const renderItem: ListRenderItem<SendbirdRestrictedUser> = useFreshCallback(({ item }) =>
+    renderUser?.({ user: item }),
+  );
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <FlatList
+      data={mutedMembers}
+      renderItem={renderItem}
+      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      ListEmptyComponent={ListEmptyComponent}
+      bounces={false}
+      keyExtractor={getUserUniqId}
+    />
+  );
+};
+
+export default GroupChannelMutedMembersList;

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersStatusEmpty.tsx

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

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersStatusError.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { GroupChannelMutedMembersModule } from '../types';
+
+const GroupChannelMutedMembersStatusError: GroupChannelMutedMembersModule['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 GroupChannelMutedMembersStatusError;

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersStatusLoading.tsx

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

package/src/domain/groupChannelMutedMembers/index.ts

@@ -0,0 +1,7 @@
+export { default as GroupChannelMutedMembersList } from './component/GroupChannelMutedMembersList';
+export { default as GroupChannelMutedMembersHeader } from './component/GroupChannelMutedMembersHeader';
+export { default as GroupChannelMutedMembersStatusEmpty } from './component/GroupChannelMutedMembersStatusEmpty';
+export { default as GroupChannelMutedMembersStatusError } from './component/GroupChannelMutedMembersStatusError';
+export { default as GroupChannelMutedMembersStatusLoading } from './component/GroupChannelMutedMembersStatusLoading';
+export { default as createGroupChannelMutedMembersModule } from './module/createGroupChannelMutedMembersModule';
+export { GroupChannelMutedMembersContextsProvider, GroupChannelMutedMembersContexts } from './module/moduleContext';

package/src/domain/groupChannelMutedMembers/module/createGroupChannelMutedMembersModule.tsx

@@ -0,0 +1,21 @@
+import GroupChannelMutedMembersHeader from '../component/GroupChannelMutedMembersHeader';
+import GroupChannelMutedMembersList from '../component/GroupChannelMutedMembersList';
+import GroupChannelMutedMembersStatusEmpty from '../component/GroupChannelMutedMembersStatusEmpty';
+import GroupChannelMutedMembersStatusError from '../component/GroupChannelMutedMembersStatusError';
+import GroupChannelMutedMembersStatusLoading from '../component/GroupChannelMutedMembersStatusLoading';
+import type { GroupChannelMutedMembersModule } from '../types';
+import { GroupChannelMutedMembersContextsProvider } from './moduleContext';
+
+const createGroupChannelMutedMembersModule = ({
+  Header = GroupChannelMutedMembersHeader,
+  List = GroupChannelMutedMembersList,
+  StatusEmpty = GroupChannelMutedMembersStatusEmpty,
+  StatusError = GroupChannelMutedMembersStatusError,
+  StatusLoading = GroupChannelMutedMembersStatusLoading,
+  Provider = GroupChannelMutedMembersContextsProvider,
+  ...module
+}: Partial<GroupChannelMutedMembersModule> = {}): GroupChannelMutedMembersModule => {
+  return { Header, List, Provider, StatusEmpty, StatusError, StatusLoading, ...module };
+};
+
+export default createGroupChannelMutedMembersModule;

package/src/domain/groupChannelMutedMembers/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 { GroupChannelMutedMembersContextsType, GroupChannelMutedMembersModule } from '../types';
+
+export const GroupChannelMutedMembersContexts: GroupChannelMutedMembersContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+  }),
+};
+
+export const GroupChannelMutedMembersContextsProvider: GroupChannelMutedMembersModule['Provider'] = ({
+  channel,
+  children,
+}) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <GroupChannelMutedMembersContexts.Fragment.Provider
+        value={{ headerTitle: STRINGS.GROUP_CHANNEL_MUTED_MEMBERS.HEADER_TITLE, channel }}
+      >
+        {children}
+      </GroupChannelMutedMembersContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelMutedMembers/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 GroupChannelMutedMembersProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelMutedMembersProps['Header']['onPressHeaderLeft'];
+    renderUser?: GroupChannelMutedMembersProps['List']['renderUser'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  List: {
+    renderUser: (props: { user: SendbirdRestrictedUser }) => React.ReactElement | null;
+    onLoadNext: () => void;
+    mutedMembers: SendbirdRestrictedUser[];
+    ListEmptyComponent?: React.ReactElement;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelMutedMembers
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelMutedMembersContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdGroupChannel;
+  }>;
+};
+export interface GroupChannelMutedMembersModule {
+  Provider: CommonComponent<GroupChannelMutedMembersProps['Provider']>;
+  Header: CommonComponent<GroupChannelMutedMembersProps['Header']>;
+  List: CommonComponent<GroupChannelMutedMembersProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<GroupChannelMutedMembersProps['StatusError']>;
+}
+
+export type GroupChannelMutedMembersFragment = CommonComponent<GroupChannelMutedMembersProps['Fragment']>;

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>
+  );
+};