@sendbird/uikit-react-native 2.2.0 → 2.4.0

package/src/domain/openChannelBannedUsers/module/createOpenChannelBannedUsersModule.tsx

@@ -0,0 +1,21 @@
+import OpenChannelBannedUsersHeader from '../component/OpenChannelBannedUsersHeader';
+import OpenChannelBannedUsersList from '../component/OpenChannelBannedUsersList';
+import OpenChannelBannedUsersStatusEmpty from '../component/OpenChannelBannedUsersStatusEmpty';
+import OpenChannelBannedUsersStatusError from '../component/OpenChannelBannedUsersStatusError';
+import OpenChannelBannedUsersStatusLoading from '../component/OpenChannelBannedUsersStatusLoading';
+import type { OpenChannelBannedUsersModule } from '../types';
+import { OpenChannelBannedUsersContextsProvider } from './moduleContext';
+
+const createOpenChannelBannedUsersModule = ({
+  Header = OpenChannelBannedUsersHeader,
+  List = OpenChannelBannedUsersList,
+  StatusLoading = OpenChannelBannedUsersStatusLoading,
+  StatusEmpty = OpenChannelBannedUsersStatusEmpty,
+  StatusError = OpenChannelBannedUsersStatusError,
+  Provider = OpenChannelBannedUsersContextsProvider,
+  ...module
+}: Partial<OpenChannelBannedUsersModule> = {}): OpenChannelBannedUsersModule => {
+  return { Header, List, Provider, StatusEmpty, StatusLoading, StatusError, ...module };
+};
+
+export default createOpenChannelBannedUsersModule;

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

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

package/src/domain/openChannelBannedUsers/types.ts

@@ -0,0 +1,50 @@
+import type React from 'react';
+
+import type { SendbirdOpenChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type OpenChannelBannedUsersProps = {
+  Fragment: {
+    channel: SendbirdOpenChannel;
+    onPressHeaderLeft: OpenChannelBannedUsersProps['Header']['onPressHeaderLeft'];
+    renderUser?: OpenChannelBannedUsersProps['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: SendbirdOpenChannel;
+  };
+};
+
+/**
+ * Internal context for OpenChannelBannedUsers
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type OpenChannelBannedUsersContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdOpenChannel;
+  }>;
+};
+export interface OpenChannelBannedUsersModule {
+  Provider: CommonComponent<OpenChannelBannedUsersProps['Provider']>;
+  Header: CommonComponent<OpenChannelBannedUsersProps['Header']>;
+  List: CommonComponent<OpenChannelBannedUsersProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<OpenChannelBannedUsersProps['StatusError']>;
+}
+
+export type OpenChannelBannedUsersFragment = CommonComponent<OpenChannelBannedUsersProps['Fragment']>;

package/src/domain/openChannelCreate/component/OpenChannelCreateHeader.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+
+import { Icon, Text, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { ifThenOr } from '@sendbird/uikit-utils';
+
+import { OpenChannelCreateContexts } from '../module/moduleContext';
+import type { OpenChannelCreateProps } from '../types';
+
+const OpenChannelCreateHeader = ({
+  onPressHeaderLeft,
+  onPressHeaderRight,
+  shouldActivateHeaderRight,
+}: OpenChannelCreateProps['Header']) => {
+  const { headerTitle, headerRight } = useContext(OpenChannelCreateContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+  const { colors } = useUIKitTheme();
+
+  const isHeaderRightActive = shouldActivateHeaderRight();
+
+  return (
+    <HeaderComponent
+      title={headerTitle}
+      left={<Icon icon={'arrow-left'} />}
+      onPressLeft={onPressHeaderLeft}
+      right={
+        <Text button color={ifThenOr(isHeaderRightActive, colors.primary, colors.onBackground04)}>
+          {headerRight}
+        </Text>
+      }
+      onPressRight={ifThenOr(isHeaderRightActive, onPressHeaderRight)}
+    />
+  );
+};
+
+export default OpenChannelCreateHeader;

package/src/domain/openChannelCreate/component/OpenChannelCreateProfileInput.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+
+import {
+  Avatar,
+  BottomSheetItem,
+  Box,
+  PressBox,
+  TextInput,
+  createStyleSheet,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import Icon from '@sendbird/uikit-react-native-foundation/src/components/Icon';
+import { ifThenOr, useSafeAreaPadding } from '@sendbird/uikit-utils';
+
+import { useLocalization, usePlatformService } from '../../../hooks/useContext';
+import SBUError from '../../../libs/SBUError';
+import SBUUtils from '../../../libs/SBUUtils';
+import type { OpenChannelCreateProps } from '../types';
+
+const OpenChannelCreateProfileInput = ({
+  channelName,
+  channelCoverFile,
+  onChangeChannelName,
+  onChangeChannelCoverFile,
+}: OpenChannelCreateProps['ProfileInput']) => {
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { palette, colors, typography } = useUIKitTheme();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
+
+  const { STRINGS } = useLocalization();
+  const { fileService } = usePlatformService();
+
+  const onPressPhotoButton = () => {
+    const sheetItems: BottomSheetItem['sheetItems'] = [
+      {
+        title: STRINGS.OPEN_CHANNEL_CREATE.DIALOG_IMAGE_MENU_CAMERA,
+        onPress: async () => {
+          const mediaFile = await fileService.openCamera({
+            mediaType: 'photo',
+            onOpenFailure: (error) => {
+              if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                alert({
+                  title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                  message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                    STRINGS.LABELS.PERMISSION_CAMERA,
+                    STRINGS.LABELS.PERMISSION_APP_NAME,
+                  ),
+                  buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                });
+              } else {
+                toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+              }
+            },
+          });
+
+          if (mediaFile) onChangeChannelCoverFile(mediaFile);
+        },
+      },
+      {
+        title: STRINGS.OPEN_CHANNEL_CREATE.DIALOG_IMAGE_MENU_PHOTO_LIBRARY,
+        onPress: async () => {
+          const mediaFiles = await fileService.openMediaLibrary({
+            selectionLimit: 1,
+            mediaType: 'photo',
+            onOpenFailure: (error) => {
+              if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                alert({
+                  title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                  message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                    STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+                    STRINGS.LABELS.PERMISSION_APP_NAME,
+                  ),
+                  buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                });
+              } else {
+                toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+              }
+            },
+          });
+          if (mediaFiles?.[0]) onChangeChannelCoverFile(mediaFiles[0]);
+        },
+      },
+    ];
+
+    if (channelCoverFile) {
+      sheetItems.unshift({
+        title: STRINGS.OPEN_CHANNEL_CREATE.DIALOG_IMAGE_MENU_REMOVE,
+        titleColor: colors.error,
+        onPress: () => {
+          onChangeChannelCoverFile(undefined);
+        },
+      });
+    }
+
+    openSheet({ sheetItems });
+  };
+
+  return (
+    <Box
+      flexDirection={'row'}
+      paddingVertical={16}
+      paddingLeft={16 + safeArea.paddingLeft}
+      paddingRight={16 + safeArea.paddingRight}
+    >
+      <PressBox onPress={onPressPhotoButton} style={styles.coverButton} activeOpacity={0.8}>
+        {ifThenOr(
+          Boolean(channelCoverFile),
+          <Avatar size={72} uri={channelCoverFile?.uri} />,
+          <Avatar.Icon size={72} icon={'camera'} />,
+        )}
+      </PressBox>
+      <Box borderBottomColor={colors.onBackground04} style={styles.inputContainer}>
+        <TextInput
+          placeholder={STRINGS.OPEN_CHANNEL_CREATE.PLACEHOLDER}
+          style={[typography.subtitle1, styles.input, { backgroundColor: palette.transparent }]}
+          value={channelName}
+          onChangeText={onChangeChannelName}
+        />
+
+        {channelName.length > 0 && (
+          <PressBox onPress={() => onChangeChannelName('')} style={styles.removeButtonContainer}>
+            <Icon color={colors.onBackground03} size={22} icon={'remove'} />
+          </PressBox>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  coverButton: {
+    marginRight: 20,
+  },
+  inputContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+  },
+  removeButtonContainer: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    marginLeft: 8,
+  },
+});
+
+export default OpenChannelCreateProfileInput;

package/src/domain/openChannelCreate/component/OpenChannelCreateStatusLoading.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const OpenChannelCreateStatusLoading = () => {
+  return <TypedPlaceholder type={'loading'} />;
+};
+
+export default OpenChannelCreateStatusLoading;

package/src/domain/openChannelCreate/index.ts

@@ -0,0 +1,5 @@
+export { default as OpenChannelCreateHeader } from './component/OpenChannelCreateHeader';
+export { default as OpenChannelCreateProfileInput } from './component/OpenChannelCreateProfileInput';
+export { default as OpenChannelCreateStatusLoading } from './component/OpenChannelCreateStatusLoading';
+export { default as createOpenChannelCreateModule } from './module/createOpenChannelCreateModule';
+export { OpenChannelCreateContextsProvider, OpenChannelCreateContexts } from './module/moduleContext';

package/src/domain/openChannelCreate/module/createOpenChannelCreateModule.tsx

@@ -0,0 +1,17 @@
+import OpenChannelCreateHeader from '../component/OpenChannelCreateHeader';
+import OpenChannelCreateProfileInput from '../component/OpenChannelCreateProfileInput';
+import OpenChannelCreateStatusLoading from '../component/OpenChannelCreateStatusLoading';
+import type { OpenChannelCreateModule } from '../types';
+import { OpenChannelCreateContextsProvider } from './moduleContext';
+
+const createOpenChannelCreateModule = ({
+  Header = OpenChannelCreateHeader,
+  ProfileInput = OpenChannelCreateProfileInput,
+  Provider = OpenChannelCreateContextsProvider,
+  StatusLoading = OpenChannelCreateStatusLoading,
+  ...module
+}: Partial<OpenChannelCreateModule> = {}): OpenChannelCreateModule => {
+  return { Header, ProfileInput, Provider, StatusLoading, ...module };
+};
+
+export default createOpenChannelCreateModule;

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

@@ -0,0 +1,28 @@
+import React, { createContext } from 'react';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { OpenChannelCreateContextsType, OpenChannelCreateModule } from '../types';
+
+export const OpenChannelCreateContexts: OpenChannelCreateContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    headerRight: '',
+  }),
+};
+
+export const OpenChannelCreateContextsProvider: OpenChannelCreateModule['Provider'] = ({ children }) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <OpenChannelCreateContexts.Fragment.Provider
+        value={{
+          headerTitle: STRINGS.OPEN_CHANNEL_CREATE.HEADER_TITLE,
+          headerRight: STRINGS.OPEN_CHANNEL_CREATE.HEADER_RIGHT,
+        }}
+      >
+        {children}
+      </OpenChannelCreateContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/openChannelCreate/types.ts

@@ -0,0 +1,45 @@
+import type React from 'react';
+
+import type { OnBeforeHandler, SendbirdOpenChannel, SendbirdOpenChannelCreateParams } from '@sendbird/uikit-utils';
+
+import type { FileType } from '../../platform/types';
+import type { CommonComponent } from '../../types';
+
+export type OpenChannelCreateProps = {
+  Fragment: {
+    onPressHeaderLeft: OpenChannelCreateProps['Header']['onPressHeaderLeft'];
+    onCreateChannel: (channel: SendbirdOpenChannel) => void;
+    onBeforeCreateChannel?: OnBeforeHandler<SendbirdOpenChannelCreateParams>;
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: () => void;
+    shouldActivateHeaderRight: () => boolean;
+  };
+  ProfileInput: {
+    channelName: string;
+    onChangeChannelName: (val: OpenChannelCreateProps['ProfileInput']['channelName']) => void;
+    channelCoverFile: FileType | undefined;
+    onChangeChannelCoverFile: (val: OpenChannelCreateProps['ProfileInput']['channelCoverFile']) => void;
+  };
+};
+
+/**
+ * Internal context for OpenChannelCreate
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type OpenChannelCreateContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    headerRight: string;
+  }>;
+};
+export interface OpenChannelCreateModule {
+  Provider: CommonComponent;
+  Header: CommonComponent<OpenChannelCreateProps['Header']>;
+  ProfileInput: CommonComponent<OpenChannelCreateProps['ProfileInput']>;
+  StatusLoading: CommonComponent;
+}
+
+export type OpenChannelCreateFragment = CommonComponent<OpenChannelCreateProps['Fragment']>;

package/src/domain/openChannelList/component/OpenChannelListHeader.tsx

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+
+import { Icon, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import { OpenChannelListContexts } from '../module/moduleContext';
+import type { OpenChannelListProps } from '../types';
+
+const OpenChannelListHeader = ({ onPressHeaderRight }: OpenChannelListProps['Header']) => {
+  const { headerTitle } = useContext(OpenChannelListContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+  return <HeaderComponent title={headerTitle} right={<Icon icon={'create'} />} onPressRight={onPressHeaderRight} />;
+};
+
+export default OpenChannelListHeader;

package/src/domain/openChannelList/component/OpenChannelListList.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { SendbirdOpenChannel, getChannelUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { OpenChannelListProps } from '../types';
+
+const OpenChanelListList = ({
+  openChannels,
+  onLoadNext,
+  flatListProps,
+  renderOpenChannelPreview,
+  refreshing,
+  onRefresh,
+}: OpenChannelListProps['List']) => {
+  const renderItem: ListRenderItem<SendbirdOpenChannel> = useFreshCallback(({ item }) =>
+    renderOpenChannelPreview?.({ channel: item }),
+  );
+
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <FlatList
+      refreshing={refreshing}
+      data={openChannels}
+      renderItem={renderItem}
+      onEndReached={onLoadNext}
+      onRefresh={onRefresh}
+      {...flatListProps}
+      contentContainerStyle={[flatListProps?.contentContainerStyle, { paddingLeft: left, paddingRight: right }]}
+      keyExtractor={getChannelUniqId}
+    />
+  );
+};
+
+export default OpenChanelListList;

package/src/domain/openChannelList/component/OpenChannelListStatusEmpty.tsx

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

package/src/domain/openChannelList/component/OpenChannelListStatusError.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { OpenChannelListModule } from '../types';
+
+const OpenChannelListStatusError: OpenChannelListModule['StatusError'] = ({ onPressRetry }) => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'error-wrong'} onPressRetry={onPressRetry} />
+    </Box>
+  );
+};
+
+export default OpenChannelListStatusError;

package/src/domain/openChannelList/component/OpenChannelListStatusLoading.tsx

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

package/src/domain/openChannelList/index.ts

@@ -0,0 +1,7 @@
+export { default as OpenChannelListHeader } from './component/OpenChannelListHeader';
+export { default as OpenChannelListList } from './component/OpenChannelListList';
+export { default as OpenChannelListStatusEmpty } from './component/OpenChannelListStatusEmpty';
+export { default as OpenChannelListStatusLoading } from './component/OpenChannelListStatusLoading';
+export { default as OpenChannelListStatusError } from './component/OpenChannelListStatusError';
+export { default as createOpenChannelListModule } from './module/createOpenChannelListModule';
+export { OpenChannelListContextsProvider, OpenChannelListContexts } from './module/moduleContext';

package/src/domain/openChannelList/module/createOpenChannelListModule.tsx

@@ -0,0 +1,21 @@
+import OpenChannelListHeader from '../component/OpenChannelListHeader';
+import OpenChannelListList from '../component/OpenChannelListList';
+import OpenChannelListStatusEmpty from '../component/OpenChannelListStatusEmpty';
+import OpenChannelListStatusError from '../component/OpenChannelListStatusError';
+import OpenChannelListStatusLoading from '../component/OpenChannelListStatusLoading';
+import type { OpenChannelListModule } from '../types';
+import { OpenChannelListContextsProvider } from './moduleContext';
+
+const createOpenChannelListModule = ({
+  Header = OpenChannelListHeader,
+  List = OpenChannelListList,
+  StatusLoading = OpenChannelListStatusLoading,
+  StatusEmpty = OpenChannelListStatusEmpty,
+  StatusError = OpenChannelListStatusError,
+  Provider = OpenChannelListContextsProvider,
+  ...module
+}: Partial<OpenChannelListModule> = {}): OpenChannelListModule => {
+  return { Header, List, Provider, StatusEmpty, StatusLoading, StatusError, ...module };
+};
+
+export default createOpenChannelListModule;

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

@@ -0,0 +1,22 @@
+import React, { createContext } from 'react';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { OpenChannelListContextsType, OpenChannelListModule } from '../types';
+
+export const OpenChannelListContexts: OpenChannelListContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+  }),
+};
+
+export const OpenChannelListContextsProvider: OpenChannelListModule['Provider'] = ({ children }) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <OpenChannelListContexts.Fragment.Provider value={{ headerTitle: STRINGS.OPEN_CHANNEL_LIST.HEADER_TITLE }}>
+        {children}
+      </OpenChannelListContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/openChannelList/types.ts

@@ -0,0 +1,63 @@
+import type React from 'react';
+import type { FlatListProps } from 'react-native';
+
+import type { UseOpenChannelListOptions } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type OpenChannelListProps = {
+  Fragment: {
+    /** Handler for navigating to OpenChannelFragment **/
+    onPressChannel: (channel: SendbirdOpenChannel) => void;
+    /** Handler for navigating to OpenChannelCreateFragment **/
+    onPressCreateChannel: () => void;
+    /** Method for rendering open channel preview **/
+    renderOpenChannelPreview?: OpenChannelListProps['List']['renderOpenChannelPreview'];
+    /** Method for creating a custom query of open channel list **/
+    queryCreator?: UseOpenChannelListOptions['queryCreator'];
+    /** Props for FlatList component, it passed to OpenChannelList.List **/
+    flatListProps?: OpenChannelListProps['List']['flatListProps'];
+  };
+  Header: {
+    onPressHeaderRight: () => void;
+  };
+  List: {
+    /** OpenChannels from SendbirdChat SDK **/
+    openChannels: SendbirdOpenChannel[];
+    /** Method for rendering a preview of each open channel **/
+    renderOpenChannelPreview: (props: { channel: SendbirdOpenChannel }) => React.ReactElement | null;
+    /** Handler for loading the next batch of open channels **/
+    onLoadNext: () => Promise<void>;
+    /** Props for the FlatList component, passed to the OpenChannelList.List **/
+    flatListProps?: Omit<FlatListProps<SendbirdOpenChannel>, 'data' | 'renderItem'>;
+    /** Props for the indicates if the FlatList is currently being refreshed  **/
+    refreshing: boolean;
+    /** Handler for refreshing the list of open channels **/
+    onRefresh: () => void;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+};
+
+/**
+ * Internal context for OpenChannelList
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type OpenChannelListContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+  }>;
+};
+export interface OpenChannelListModule {
+  Provider: CommonComponent;
+  Header: CommonComponent<OpenChannelListProps['Header']>;
+  List: CommonComponent<OpenChannelListProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<OpenChannelListProps['StatusError']>;
+}
+
+export type OpenChannelListFragment = CommonComponent<OpenChannelListProps['Fragment']>;

package/src/domain/openChannelModeration/component/OpenChannelModerationHeader.tsx

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