@sendbird/uikit-react-native 1.0.0-rc.1

package/src/domain/groupChannel/types.ts

@@ -0,0 +1,125 @@
+import type React from 'react';
+import type { FlatListProps } from 'react-native';
+
+import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
+import type {
+  SendbirdFileMessage,
+  SendbirdFileMessageParams,
+  SendbirdGroupChannel,
+  SendbirdMessage,
+  SendbirdUser,
+  SendbirdUserMessage,
+  SendbirdUserMessageParams,
+} from '@sendbird/uikit-utils';
+
+import type { FileType } from '../../platform/types';
+import type { CommonComponent } from '../../types';
+
+export interface GroupChannelProps {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onChannelDeleted: () => void;
+    onPressHeaderLeft: GroupChannelProps['Header']['onPressHeaderLeft'];
+    onPressHeaderRight: GroupChannelProps['Header']['onPressHeaderRight'];
+
+    onBeforeSendFileMessage?: (
+      params: SendbirdFileMessageParams,
+    ) => SendbirdFileMessageParams | Promise<SendbirdFileMessageParams>;
+    onBeforeSendUserMessage?: (
+      params: SendbirdUserMessageParams,
+    ) => SendbirdUserMessageParams | Promise<SendbirdUserMessageParams>;
+    onPressImageMessage?: GroupChannelProps['MessageList']['onPressImageMessage'];
+
+    renderMessage?: GroupChannelProps['MessageList']['renderMessage'];
+    renderNewMessagesButton?: GroupChannelProps['MessageList']['renderNewMessagesButton'];
+    renderScrollToBottomButton?: GroupChannelProps['MessageList']['renderScrollToBottomButton'];
+
+    enableTypingIndicator?: GroupChannelProps['Provider']['enableTypingIndicator'];
+    enableMessageGrouping?: GroupChannelProps['MessageList']['enableMessageGrouping'];
+
+    keyboardAvoidOffset?: GroupChannelProps['Provider']['keyboardAvoidOffset'];
+    flatListProps?: GroupChannelProps['MessageList']['flatListProps'];
+    sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
+    collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
+    queryCreator?: UseGroupChannelMessagesOptions['queryCreator'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: () => void;
+  };
+  MessageList: {
+    enableMessageGrouping: boolean;
+    currentUserId?: string;
+    channel: SendbirdGroupChannel;
+    messages: SendbirdMessage[];
+    nextMessages: SendbirdMessage[];
+    newMessagesFromMembers: SendbirdMessage[];
+    onTopReached: () => void;
+    onBottomReached: () => void;
+
+    onResendFailedMessage: (failedMessage: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
+    onDeleteMessage: (message: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
+    onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
+
+    renderMessage: (props: {
+      message: SendbirdMessage;
+      prevMessage?: SendbirdMessage;
+      nextMessage?: SendbirdMessage;
+      onPress?: () => void;
+      onLongPress?: () => void;
+      channel: GroupChannelProps['MessageList']['channel'];
+      currentUserId?: GroupChannelProps['MessageList']['currentUserId'];
+      enableMessageGrouping: GroupChannelProps['MessageList']['enableMessageGrouping'];
+    }) => React.ReactElement | null;
+    renderNewMessagesButton: null | CommonComponent<{
+      visible: boolean;
+      onPress: () => void;
+      newMessages: SendbirdMessage[];
+    }>;
+    renderScrollToBottomButton: null | CommonComponent<{
+      visible: boolean;
+      onPress: () => void;
+    }>;
+    flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
+  };
+  Input: {
+    channel: SendbirdGroupChannel;
+    onSendFileMessage: (file: FileType) => Promise<void>;
+    onSendUserMessage: (text: string) => Promise<void>;
+    onUpdateFileMessage: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;
+    onUpdateUserMessage: (editedText: string, message: SendbirdUserMessage) => Promise<void>;
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+    enableTypingIndicator: boolean;
+    keyboardAvoidOffset?: number;
+  };
+}
+
+/**
+ * Internal context for GroupChannel
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export interface GroupChannelContextsType {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdGroupChannel;
+    editMessage?: SendbirdUserMessage | SendbirdFileMessage;
+    setEditMessage: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+    keyboardAvoidOffset?: number;
+  }>;
+  TypingIndicator: React.Context<{
+    typingUsers: SendbirdUser[];
+  }>;
+}
+export interface GroupChannelModule {
+  Provider: React.FC<GroupChannelProps['Provider']>;
+  Header: CommonComponent<GroupChannelProps['Header']>;
+  MessageList: CommonComponent<GroupChannelProps['MessageList']>;
+  Input: CommonComponent<GroupChannelProps['Input']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+}
+
+export type GroupChannelFragment = React.FC<GroupChannelProps['Fragment']>;

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

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+
+import { Icon, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import { GroupChannelListContexts } from '../module/moduleContext';
+import type { GroupChannelListProps } from '../types';
+
+const GroupChannelListHeader: React.FC<GroupChannelListProps['Header']> = ({ children }) => {
+  const fragment = useContext(GroupChannelListContexts.Fragment);
+  const typeSelector = useContext(GroupChannelListContexts.TypeSelector);
+  const { HeaderComponent } = useHeaderStyle();
+
+  return (
+    <HeaderComponent title={fragment.headerTitle} right={<Icon icon={'create'} />} onPressRight={typeSelector.show}>
+      {children}
+    </HeaderComponent>
+  );
+};
+
+export default GroupChannelListHeader;

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

@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useActionMenu, useToast } from '@sendbird/uikit-react-native-foundation';
+import { PASS, SendbirdGroupChannel, useFreshCallback } from '@sendbird/uikit-utils';
+
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import type { GroupChannelListProps } from '../types';
+
+const GroupChannelListList: React.FC<GroupChannelListProps['List']> = ({
+  renderGroupChannelPreview,
+  groupChannels,
+  onLoadNext,
+  flatListProps,
+  menuItemCreator = PASS,
+}) => {
+  const toast = useToast();
+  const { openMenu } = useActionMenu();
+  const { STRINGS } = useLocalization();
+  const { sdk, currentUser } = useSendbirdChat();
+
+  const onLongPress = useFreshCallback((channel: SendbirdGroupChannel) => {
+    const action = channel.myPushTriggerOption === 'off' ? 'on' : 'off';
+    const menuItem = menuItemCreator({
+      title: STRINGS.GROUP_CHANNEL_LIST.DIALOG_CHANNEL_TITLE(currentUser?.userId ?? '', channel),
+      menuItems: [
+        {
+          title: STRINGS.GROUP_CHANNEL_LIST.DIALOG_CHANNEL_NOTIFICATION(channel),
+          onPress: async () => {
+            if (action === 'on') {
+              await channel.setMyPushTriggerOption('default');
+            } else {
+              await channel.setMyPushTriggerOption('off');
+            }
+          },
+          onError: () => {
+            toast.show(
+              action === 'on' ? STRINGS.TOAST.TURN_ON_NOTIFICATIONS_ERROR : STRINGS.TOAST.TURN_OFF_NOTIFICATIONS_ERROR,
+              'error',
+            );
+          },
+        },
+        {
+          title: STRINGS.GROUP_CHANNEL_LIST.DIALOG_CHANNEL_LEAVE,
+          onPress: async () => {
+            channel.leave().then(() => sdk.clearCachedMessages([channel.url]).catch());
+          },
+          onError: () => toast.show(STRINGS.TOAST.LEAVE_CHANNEL_ERROR, 'error'),
+        },
+      ],
+    });
+
+    openMenu(menuItem);
+  });
+
+  const renderItem: ListRenderItem<SendbirdGroupChannel> = useCallback(
+    ({ item }) => renderGroupChannelPreview?.(item, () => onLongPress(item)),
+    [renderGroupChannelPreview, onLongPress],
+  );
+
+  const { left, right } = useSafeAreaInsets();
+  return (
+    <FlatList
+      bounces={false}
+      data={groupChannels}
+      renderItem={renderItem}
+      onEndReached={onLoadNext}
+      {...flatListProps}
+      contentContainerStyle={[flatListProps?.contentContainerStyle, { paddingLeft: left, paddingRight: right }]}
+    />
+  );
+};
+
+export default GroupChannelListList;

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

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

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

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

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

@@ -0,0 +1,114 @@
+import React, { useContext, useEffect } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import {
+  Header as DefaultHeader,
+  Icon,
+  Modal,
+  Text,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../../hooks/useContext';
+import { GroupChannelListContexts } from '../module/moduleContext';
+import type { GroupChannelListProps, GroupChannelType } from '../types';
+
+const TYPES: GroupChannelType[] = ['GROUP', 'SUPER_GROUP', 'BROADCAST'];
+const TYPE_ICONS: Record<GroupChannelType, keyof typeof Icon.Assets> = {
+  'GROUP': 'chat',
+  'SUPER_GROUP': 'supergroup',
+  'BROADCAST': 'broadcast',
+};
+
+const GroupChannelListTypeSelector: React.FC<GroupChannelListProps['TypeSelector']> = ({
+  Header = DefaultHeader,
+  skipTypeSelection,
+  onSelectType,
+}) => {
+  const { statusBarTranslucent } = useHeaderStyle();
+  const { colors } = useUIKitTheme();
+  const typeSelector = useContext(GroupChannelListContexts.TypeSelector);
+  const { visible, hide } = typeSelector;
+  const createOnPressType = (type: GroupChannelType) => () => {
+    hide();
+    onSelectType(type);
+  };
+
+  useEffect(() => {
+    if (skipTypeSelection && visible) createOnPressType('GROUP')();
+  }, [skipTypeSelection, visible]);
+
+  if (skipTypeSelection) return null;
+
+  const renderButtons = () => (
+    <View style={styles.buttonArea}>
+      {TYPES.map((type) => {
+        return (
+          <TouchableOpacity key={type} activeOpacity={0.6} onPress={createOnPressType(type)} style={styles.typeButton}>
+            <DefaultTypeIcon type={type} />
+            <DefaultTypeText type={type} />
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+
+  const renderHeader = () => {
+    if (Header) {
+      return (
+        <Header
+          title={typeSelector.headerTitle}
+          right={<Icon icon={'close'} color={colors.onBackground01} />}
+          onPressRight={typeSelector.hide}
+        >
+          {renderButtons()}
+        </Header>
+      );
+    }
+
+    return (
+      <DefaultHeader title={null} right={null} left={null}>
+        {renderButtons()}
+      </DefaultHeader>
+    );
+  };
+
+  return (
+    <Modal visible={visible} onClose={hide} statusBarTranslucent={statusBarTranslucent}>
+      {renderHeader()}
+    </Modal>
+  );
+};
+
+const DefaultTypeIcon: React.FC<{ type: GroupChannelType }> = ({ type }) => {
+  return <Icon size={24} icon={TYPE_ICONS[type]} containerStyle={styles.icon} />;
+};
+
+const DefaultTypeText: React.FC<{ type: GroupChannelType }> = ({ type }) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  return (
+    <Text caption2 color={colors.onBackground01}>
+      {STRINGS.GROUP_CHANNEL_LIST[`TYPE_SELECTOR_${type}`]}
+    </Text>
+  );
+};
+
+const styles = createStyleSheet({
+  buttonArea: {
+    flexDirection: 'row',
+  },
+  typeButton: {
+    paddingVertical: 24,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginBottom: 8,
+  },
+});
+
+export default GroupChannelListTypeSelector;

package/src/domain/groupChannelList/index.ts

@@ -0,0 +1,7 @@
+export { default as GroupChannelListHeader } from './component/GroupChannelListHeader';
+export { default as GroupChannelListList } from './component/GroupChannelListList';
+export { default as GroupChannelListStatusEmpty } from './component/GroupChannelListStatusEmpty';
+export { default as GroupChannelListStatusLoading } from './component/GroupChannelListStatusLoading';
+export { default as GroupChannelListTypeSelector } from './component/GroupChannelListTypeSelector';
+export { default as createGroupChannelListModule } from './module/createGroupChannelListModule';
+export { GroupChannelListContextsProvider, GroupChannelListContexts } from './module/moduleContext';

package/src/domain/groupChannelList/module/createGroupChannelListModule.tsx

@@ -0,0 +1,21 @@
+import GroupChannelListHeader from '../component/GroupChannelListHeader';
+import GroupChannelListList from '../component/GroupChannelListList';
+import GroupChannelListStatusEmpty from '../component/GroupChannelListStatusEmpty';
+import GroupChannelListStatusLoading from '../component/GroupChannelListStatusLoading';
+import GroupChannelListTypeSelector from '../component/GroupChannelListTypeSelector';
+import type { GroupChannelListModule } from '../types';
+import { GroupChannelListContextsProvider } from './moduleContext';
+
+const createGroupChannelListModule = ({
+  Header = GroupChannelListHeader,
+  List = GroupChannelListList,
+  TypeSelector = GroupChannelListTypeSelector,
+  StatusLoading = GroupChannelListStatusLoading,
+  StatusEmpty = GroupChannelListStatusEmpty,
+  Provider = GroupChannelListContextsProvider,
+  ...module
+}: Partial<GroupChannelListModule> = {}): GroupChannelListModule => {
+  return { Header, List, TypeSelector, StatusLoading, StatusEmpty, Provider, ...module };
+};
+
+export default createGroupChannelListModule;

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

@@ -0,0 +1,40 @@
+import React, { createContext, useCallback, useState } from 'react';
+
+import { NOOP } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { GroupChannelListContextsType } from '../types';
+
+export const GroupChannelListContexts: GroupChannelListContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+  }),
+  TypeSelector: createContext({
+    headerTitle: '',
+    visible: Boolean(),
+    hide: NOOP,
+    show: NOOP,
+  }),
+};
+
+export const GroupChannelListContextsProvider: React.FC = ({ children }) => {
+  const { STRINGS } = useLocalization();
+
+  // Type selector
+  const [visible, setVisible] = useState(false);
+  const show = useCallback(() => setVisible(true), []);
+  const hide = useCallback(() => setVisible(false), []);
+
+  return (
+    <ProviderLayout>
+      <GroupChannelListContexts.TypeSelector.Provider
+        value={{ headerTitle: STRINGS.GROUP_CHANNEL_LIST.TYPE_SELECTOR_HEADER_TITLE, visible, show, hide }}
+      >
+        <GroupChannelListContexts.Fragment.Provider value={{ headerTitle: STRINGS.GROUP_CHANNEL_LIST.HEADER_TITLE }}>
+          {children}
+        </GroupChannelListContexts.Fragment.Provider>
+      </GroupChannelListContexts.TypeSelector.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelList/types.ts

@@ -0,0 +1,92 @@
+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 { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export interface GroupChannelListProps {
+  /** Props for `GroupChannelListFragment` **/
+  Fragment: {
+    /** Navigate to GroupChannelFragment **/
+    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;
+    /** Custom Query creator for channels query **/
+    queryCreator?: UseGroupChannelListOptions['queryCreator'];
+    /** Sort comparator for sort channels **/
+    sortComparator?: UseGroupChannelListOptions['sortComparator'];
+    /** FlatList props for GroupChannelList.List **/
+    flatListProps?: GroupChannelListProps['List']['flatListProps'];
+    /** Action menu item creator for onLongPress **/
+    menuItemCreator?: GroupChannelListProps['List']['menuItemCreator'];
+  };
+  /** Props for `GroupChannelListModule.Header` **/
+  Header: {};
+  /** Props for `GroupChannelListModule.List` **/
+  List: {
+    /** GroupChannels from SendbirdChat SDK **/
+    groupChannels: SendbirdGroupChannel[];
+    /** Method to render GroupChannel preview **/
+    renderGroupChannelPreview: (
+      channel: SendbirdGroupChannel,
+      onLongPressChannel: () => void,
+    ) => React.ReactElement | null;
+    /** Method to load more data, called with onEndReached of FlatList **/
+    onLoadNext: () => Promise<void>;
+    /** Prop from Fragment **/
+    flatListProps?: Omit<FlatListProps<SendbirdGroupChannel>, 'data' | 'renderItem'>;
+    /** Prop from Fragment **/
+    menuItemCreator?: (defaultMenuItem: ActionMenuItem) => ActionMenuItem;
+  };
+  /** 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` **/
+    onSelectType: (type: GroupChannelType) => void;
+  };
+}
+
+/**
+ * Internal context for GroupChannelList
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export interface GroupChannelListContextsType {
+  Fragment: React.Context<{
+    headerTitle: string;
+  }>;
+  TypeSelector: React.Context<{
+    visible: boolean;
+    show: () => void;
+    hide: () => void;
+    headerTitle: string;
+  }>;
+}
+export interface GroupChannelListModule {
+  Provider: React.FC;
+  Header: CommonComponent<GroupChannelListProps['Header']>;
+  List: CommonComponent<GroupChannelListProps['List']>;
+  TypeSelector: CommonComponent<GroupChannelListProps['TypeSelector']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+}
+
+export type GroupChannelListFragment = React.FC<GroupChannelListProps['Fragment']>;
+export type GroupChannelType = 'GROUP' | 'SUPER_GROUP' | 'BROADCAST';

package/src/domain/groupChannelSettings/component/GroupChannelSettingsHeader.tsx

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

package/src/domain/groupChannelSettings/component/GroupChannelSettingsInfo.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+
+import { Divider, Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { Logger, getGroupChannelTitle } from '@sendbird/uikit-utils';
+
+import ChannelCover from '../../../components/ChannelCover';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import { GroupChannelSettingsContexts } from '../module/moduleContext';
+import type { GroupChannelSettingsProps } from '../types';
+
+const GroupChannelSettingsInfo: React.FC<GroupChannelSettingsProps['Info']> = () => {
+  const { channel } = useContext(GroupChannelSettingsContexts.Fragment);
+  const { currentUser } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+
+  if (!currentUser) {
+    Logger.warn('Cannot render GroupChannelSettingsInfo, User is not connected');
+    return null;
+  }
+
+  return (
+    <View>
+      <View style={styles.userInfoContainer}>
+        <ChannelCover channel={channel} size={80} containerStyle={styles.avatarContainer} />
+        <Text h1 numberOfLines={1}>
+          {getGroupChannelTitle(
+            currentUser.userId,
+            channel,
+            STRINGS.LABELS.USER_NO_NAME,
+            STRINGS.LABELS.CHANNEL_NO_MEMBERS,
+          )}
+        </Text>
+      </View>
+      <Divider />
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: { flex: 1 },
+  userInfoContainer: { paddingVertical: 24, alignItems: 'center' },
+  avatarContainer: { marginBottom: 12 },
+  userIdContainer: { paddingVertical: 16 },
+  userIdLabel: { marginBottom: 4 },
+});
+export default GroupChannelSettingsInfo;