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

package/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Platform, TouchableOpacity, View } from 'react-native';
+
+import {
+  Icon,
+  TextInput,
+  createStyleSheet,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+import { useLocalization, usePlatformService } from '../../../../hooks/useContext';
+import type { GroupChannelProps } from '../../types';
+
+type SendInputProps = GroupChannelProps['Input'] & {
+  text: string;
+  setText: (val: string) => void;
+  disabled: boolean;
+};
+const SendInput: React.FC<SendInputProps> = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }) => {
+  const { STRINGS } = useLocalization();
+  const { openSheet } = useBottomSheet();
+  const { fileService } = usePlatformService();
+  const { colors } = useUIKitTheme();
+  const toast = useToast();
+
+  const onPressSend = () => {
+    onSendUserMessage(text).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+    setText('');
+  };
+  const onPressAttachment = () => {
+    openSheet({
+      sheetItems: [
+        {
+          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA,
+          icon: 'camera',
+          onPress: async () => {
+            const photo = await fileService.openCamera({
+              mediaType: 'photo',
+              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+            });
+
+            if (photo) {
+              onSendFileMessage(photo).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            }
+          },
+        },
+        {
+          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY,
+          icon: 'photo',
+          onPress: async () => {
+            const photo = await fileService.openMediaLibrary({
+              selectionLimit: 1,
+              mediaType: 'all',
+              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+            });
+
+            if (photo && photo[0]) {
+              onSendFileMessage(photo[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            }
+          },
+        },
+        {
+          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES,
+          icon: 'document',
+          onPress: async () => {
+            const file = await fileService.openDocument({
+              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
+            });
+
+            if (file) {
+              onSendFileMessage(file).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            }
+          },
+        },
+      ],
+    });
+  };
+
+  return (
+    <View style={styles.sendInputContainer}>
+      <TouchableOpacity onPress={onPressAttachment} disabled={disabled}>
+        <Icon
+          color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+          icon={'add'}
+          size={24}
+          containerStyle={styles.iconAttach}
+        />
+      </TouchableOpacity>
+      <TextInput
+        multiline
+        editable={!disabled}
+        value={text}
+        onChangeText={setText}
+        style={styles.input}
+        placeholder={conditionChaining(
+          [disabled],
+          [STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED, STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE],
+        )}
+      />
+      {Boolean(text.trim()) && (
+        <TouchableOpacity onPress={onPressSend} disabled={disabled}>
+          <Icon
+            color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+            icon={'send'}
+            size={24}
+            containerStyle={styles.iconSend}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  sendInputContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    minHeight: 36,
+    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
+    borderRadius: 20,
+  },
+  iconAttach: {
+    marginRight: 8,
+    padding: 4,
+  },
+  iconSend: {
+    marginLeft: 4,
+    padding: 4,
+  },
+});
+
+export default SendInput;

package/src/domain/groupChannel/component/GroupChannelInput/index.tsx

@@ -0,0 +1,72 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { groupChannelChatUnavailable, useIIFE } from '@sendbird/uikit-utils';
+
+import { GroupChannelContexts } from '../../module/moduleContext';
+import type { GroupChannelProps } from '../../types';
+import EditInput from './EditInput';
+import SendInput from './SendInput';
+
+const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
+const GroupChannelInput: React.FC<GroupChannelProps['Input']> = (props) => {
+  const { channel } = props;
+
+  const { left, right, bottom } = useSafeAreaInsets();
+  const { colors } = useUIKitTheme();
+  const { editMessage, setEditMessage, keyboardAvoidOffset = 0 } = useContext(GroupChannelContexts.Fragment);
+
+  const [text, setText] = useState('');
+  const textTmpRef = useRef('');
+  const disabled = groupChannelChatUnavailable(channel);
+
+  useEffect(() => {
+    if (text.length === 0) channel.endTyping();
+    else channel.startTyping();
+  }, [text]);
+
+  useEffect(() => {
+    if (disabled) {
+      textTmpRef.current = text;
+      setText('');
+    } else {
+      setText(textTmpRef.current);
+    }
+  }, [disabled]);
+
+  const inputMode = useIIFE(() => {
+    if (!editMessage) return 'send';
+    if (editMessage.isFileMessage()) return 'send';
+    return 'edit';
+  });
+
+  return (
+    <KeyboardAvoidingView
+      keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
+      behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
+    >
+      <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
+        <View style={{ justifyContent: 'center', width: '100%' }}>
+          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} disabled={disabled} />}
+          {inputMode === 'edit' && editMessage && (
+            <EditInput
+              {...props}
+              text={text}
+              setText={setText}
+              editMessage={editMessage}
+              setEditMessage={setEditMessage}
+            />
+          )}
+        </View>
+        <SafeAreaBottom height={bottom} />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+const SafeAreaBottom: React.FC<{ height: number }> = ({ height }) => {
+  return <View style={{ height }} />;
+};
+
+export default React.memo(GroupChannelInput);

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

@@ -0,0 +1,308 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Linking, ListRenderItem, Platform, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
+import {
+  ChannelFrozenBanner,
+  createStyleSheet,
+  useAlert,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdFileMessage, SendbirdMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import {
+  Logger,
+  getAvailableUriFromFileMessage,
+  getFileExtension,
+  getFileType,
+  isMyMessage,
+  messageKeyExtractor,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
+
+import type { ChatFlatListRef } from '../../../components/ChatFlatList';
+import ChatFlatList from '../../../components/ChatFlatList';
+import { useLocalization, usePlatformService } from '../../../hooks/useContext';
+import { GroupChannelContexts } from '../module/moduleContext';
+import type { GroupChannelProps } from '../types';
+
+const HANDLE_NEXT_MSG_SEPARATELY = Platform.select({ default: true });
+
+const GroupChannelMessageList: React.FC<GroupChannelProps['MessageList']> = ({
+  currentUserId,
+  channel,
+  messages,
+  renderMessage,
+  nextMessages,
+  newMessagesFromMembers,
+  onBottomReached,
+  onTopReached,
+  renderNewMessagesButton,
+  renderScrollToBottomButton,
+  onResendFailedMessage,
+  onDeleteMessage,
+  onPressImageMessage,
+  flatListProps,
+  enableMessageGrouping,
+}) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { left, right } = useSafeAreaInsets();
+  const [scrollLeaveBottom, setScrollLeaveBottom] = useState(false);
+  const scrollRef = useRef<ChatFlatListRef>(null);
+  const [newMessagesInternalBuffer, setNewMessagesInternalBuffer] = useState(() => newMessagesFromMembers);
+  const getMessagePressActions = useGetMessagePressActions({
+    onDeleteMessage,
+    onPressImageMessage,
+    currentUserId,
+    onResendFailedMessage,
+  });
+
+  const safeAreaLayout = { paddingLeft: left, paddingRight: right };
+
+  const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
+    const { onPress, onLongPress } = getMessagePressActions(item);
+    return renderMessage({
+      message: item,
+      prevMessage: messages[index + 1],
+      nextMessage: messages[index - 1],
+      onPress,
+      onLongPress,
+      enableMessageGrouping,
+      channel,
+      currentUserId,
+    });
+  });
+
+  if (!HANDLE_NEXT_MSG_SEPARATELY) {
+    useEffect(() => {
+      if (newMessagesInternalBuffer.length !== 0) {
+        setNewMessagesInternalBuffer((prev) => prev.concat(newMessagesFromMembers));
+      }
+      onBottomReached();
+    }, [newMessagesFromMembers]);
+  }
+
+  const onLeaveScrollBottom = useCallback((val: boolean) => {
+    if (!HANDLE_NEXT_MSG_SEPARATELY) setNewMessagesInternalBuffer([]);
+    setScrollLeaveBottom(val);
+  }, []);
+
+  return (
+    <View style={[{ flex: 1, backgroundColor: colors.background }, safeAreaLayout]}>
+      {channel.isFrozen && (
+        <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.GROUP_CHANNEL.LIST_BANNER_FROZEN} />
+      )}
+      <ChatFlatList
+        nextMessages={nextMessages}
+        onBottomReached={onBottomReached}
+        onTopReached={onTopReached}
+        onLeaveScrollBottom={onLeaveScrollBottom}
+        currentUserId={currentUserId}
+        {...flatListProps}
+        listKey={`group-channel-messages-${channel.url}`}
+        ref={scrollRef}
+        data={messages}
+        renderItem={renderItem}
+        keyExtractor={messageKeyExtractor}
+        contentContainerStyle={[
+          // { minHeight: '100%', justifyContent: 'flex-end' },
+          channel.isFrozen && styles.frozenListPadding,
+          flatListProps?.contentContainerStyle,
+        ]}
+      />
+      {renderNewMessagesButton && (
+        <View style={[styles.newMsgButton, safeAreaLayout]}>
+          {renderNewMessagesButton({
+            visible: scrollLeaveBottom,
+            onPress: () => scrollRef.current?.scrollToBottom(false),
+            newMessages: !HANDLE_NEXT_MSG_SEPARATELY ? newMessagesInternalBuffer : newMessagesFromMembers,
+          })}
+        </View>
+      )}
+      {renderScrollToBottomButton && (
+        <View pointerEvents={scrollLeaveBottom ? 'auto' : 'none'} style={[styles.scrollButton, safeAreaLayout]}>
+          {renderScrollToBottomButton({
+            visible: scrollLeaveBottom,
+            onPress: () => scrollRef.current?.scrollToBottom(false),
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+const toMegabyte = (byte: number) => byte / 1024 / 1024;
+const useGetMessagePressActions = ({
+  onPressImageMessage,
+  onDeleteMessage,
+  onResendFailedMessage,
+  currentUserId,
+}: Pick<
+  GroupChannelProps['MessageList'],
+  'onDeleteMessage' | 'onResendFailedMessage' | 'onPressImageMessage' | 'currentUserId'
+>) => {
+  const { colors } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
+  const { clipboardService, fileService } = usePlatformService();
+  const { setEditMessage } = useContext(GroupChannelContexts.Fragment);
+
+  const handleFailedMessage = (message: HandleableMessage) => {
+    openSheet({
+      sheetItems: [
+        {
+          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_FAILED_RETRY,
+          onPress: () =>
+            onResendFailedMessage(message).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error')),
+        },
+        {
+          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_FAILED_REMOVE,
+          titleColor: colors.ui.dialog.default.none.destructive,
+          onPress: () => confirmDelete(message),
+        },
+      ],
+    });
+  };
+  const confirmDelete = (message: HandleableMessage) => {
+    alert({
+      title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,
+      buttons: [
+        {
+          text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,
+        },
+        {
+          text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,
+          style: 'destructive',
+          onPress: () => onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error')),
+        },
+      ],
+    });
+  };
+
+  return (msg: SendbirdMessage) => {
+    if (!msg.isUserMessage() && !msg.isFileMessage()) {
+      return { onPress: undefined, onLongPress: undefined };
+    }
+
+    const sheetItems: BottomSheetItem['sheetItems'] = [];
+    const response: { onPress?: () => void; onLongPress?: () => void } = {
+      onPress: undefined,
+      onLongPress: undefined,
+    };
+
+    if (msg.isUserMessage()) {
+      sheetItems.push({
+        icon: 'copy',
+        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_COPY,
+        onPress: () => {
+          clipboardService.setString(msg.message || '');
+          toast.show(STRINGS.TOAST.COPY_OK, 'success');
+        },
+      });
+
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push(
+          {
+            icon: 'edit',
+            title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_EDIT,
+            onPress: () => setEditMessage(msg),
+          },
+          {
+            icon: 'delete',
+            title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE,
+            onPress: () => confirmDelete(msg),
+          },
+        );
+      }
+    }
+
+    if (msg.isFileMessage()) {
+      sheetItems.push({
+        icon: 'download',
+        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_SAVE,
+        onPress: async () => {
+          if (toMegabyte(msg.size) > 4) {
+            toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+          }
+
+          fileService
+            .save({ fileUrl: msg.url, fileName: msg.name, fileType: msg.type })
+            .then((response) => {
+              toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+              Logger.log('File saved to', response);
+            })
+            .catch((err) => {
+              toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+              Logger.log('File save failure', err);
+            });
+        },
+      });
+
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push({
+          icon: 'delete',
+          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE,
+          onPress: () => confirmDelete(msg),
+        });
+      }
+
+      const fileType = getFileType(msg.type || getFileExtension(msg.name));
+      if (fileType === 'image') {
+        response.onPress = () => onPressImageMessage?.(msg, getAvailableUriFromFileMessage(msg));
+      } else {
+        response.onPress = () => Linking.openURL(msg.url).catch();
+      }
+    }
+
+    if (sheetItems.length > 0) {
+      response.onLongPress = () => openSheet({ sheetItems });
+    }
+
+    if (msg.sendingStatus === 'failed') {
+      response.onLongPress = () => handleFailedMessage(msg);
+      response.onPress = () => {
+        onResendFailedMessage(msg).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+      };
+    }
+
+    if (msg.sendingStatus === 'pending') {
+      response.onLongPress = undefined;
+      response.onPress = undefined;
+    }
+
+    return response;
+  };
+};
+
+const styles = createStyleSheet({
+  frozenBanner: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 8,
+    left: 8,
+    right: 8,
+  },
+  frozenListPadding: {
+    paddingBottom: 32,
+  },
+  newMsgButton: {
+    position: 'absolute',
+    zIndex: 999,
+    bottom: 10,
+    alignSelf: 'center',
+  },
+  scrollButton: {
+    position: 'absolute',
+    zIndex: 998,
+    bottom: 10,
+    right: 16,
+  },
+});
+
+export default React.memo(GroupChannelMessageList);

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

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

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

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

package/src/domain/groupChannel/index.ts

@@ -0,0 +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 GroupChannelStatusEmpty } from './component/GroupChannelStatusEmpty';
+export { default as GroupChannelStatusLoading } from './component/GroupChannelStatusLoading';
+export { default as createGroupChannelModule } from './module/createGroupChannelModule';
+export { GroupChannelContextsProvider, GroupChannelContexts } from './module/moduleContext';

package/src/domain/groupChannel/module/createGroupChannelModule.tsx

@@ -0,0 +1,21 @@
+import GroupChannelHeader from '../component/GroupChannelHeader';
+import GroupChannelInput from '../component/GroupChannelInput';
+import GroupChannelMessageList from '../component/GroupChannelMessageList';
+import GroupChannelStatusEmpty from '../component/GroupChannelStatusEmpty';
+import GroupChannelStatusLoading from '../component/GroupChannelStatusLoading';
+import type { GroupChannelModule } from '../types';
+import { GroupChannelContextsProvider } from './moduleContext';
+
+const createGroupChannelModule = ({
+  Header = GroupChannelHeader,
+  MessageList = GroupChannelMessageList,
+  Input = GroupChannelInput,
+  StatusLoading = GroupChannelStatusLoading,
+  StatusEmpty = GroupChannelStatusEmpty,
+  Provider = GroupChannelContextsProvider,
+  ...module
+}: Partial<GroupChannelModule> = {}): GroupChannelModule => {
+  return { Header, MessageList, Input, StatusEmpty, StatusLoading, Provider, ...module };
+};
+
+export default createGroupChannelModule;

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

@@ -0,0 +1,76 @@
+import React, { createContext, useState } from 'react';
+
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import {
+  NOOP,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdUser,
+  SendbirdUserMessage,
+  isDifferentChannel,
+  useUniqId,
+} from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
+import type { GroupChannelContextsType, GroupChannelModule } from '../types';
+
+export const GroupChannelContexts: GroupChannelContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+    setEditMessage: NOOP,
+  }),
+  TypingIndicator: createContext({
+    typingUsers: [] as SendbirdUser[],
+  }),
+};
+
+export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
+  children,
+  channel,
+  enableTypingIndicator,
+  keyboardAvoidOffset = 0,
+}) => {
+  if (!channel) throw new Error('GroupChannel is not provided to GroupChannelModule');
+
+  const id = useUniqId('GroupChannelContextsProvider');
+  const { STRINGS } = useLocalization();
+  const { currentUser, sdk } = useSendbirdChat();
+
+  const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
+  const [editMessage, setEditMessage] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+
+  useChannelHandler(
+    sdk,
+    `GroupChannelContextsProvider_${id}`,
+    {
+      onTypingStatusUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        if (!enableTypingIndicator) return;
+
+        const usersWithoutMe = eventChannel.getTypingUsers().filter((u) => u.userId !== currentUser?.userId);
+        setTypingUsers(usersWithoutMe);
+      },
+    },
+    [channel, currentUser?.userId, enableTypingIndicator],
+  );
+
+  return (
+    <ProviderLayout>
+      <GroupChannelContexts.Fragment.Provider
+        value={{
+          headerTitle: STRINGS.GROUP_CHANNEL.HEADER_TITLE(currentUser?.userId ?? '', channel),
+          channel,
+          editMessage,
+          setEditMessage,
+          keyboardAvoidOffset,
+        }}
+      >
+        <GroupChannelContexts.TypingIndicator.Provider value={{ typingUsers }}>
+          {children}
+        </GroupChannelContexts.TypingIndicator.Provider>
+      </GroupChannelContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};