@sendbird/uikit-react-native 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,9 +41,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "1.0.0",
-    "@sendbird/uikit-react-native-foundation": "1.0.0",
-    "@sendbird/uikit-utils": "1.0.0"
+    "@sendbird/uikit-chat-hooks": "1.0.1",
+    "@sendbird/uikit-react-native-foundation": "1.0.1",
+    "@sendbird/uikit-utils": "1.0.1"
   },
   "devDependencies": {
     "@react-native-clipboard/clipboard": "^1.8.5",
@@ -51,8 +51,8 @@
     "@react-native-community/netinfo": "^9.3.0",
     "@react-native-firebase/app": "^14.4.0",
     "@react-native-firebase/messaging": "^14.4.0",
-    "@types/react": "17.0.2",
-    "@types/react-native": "^0.66.15",
+    "@types/react": "*",
+    "@types/react-native": "*",
     "date-fns": "^2.28.0",
     "expo-clipboard": "^2.1.1",
     "expo-document-picker": "^10.1.3",
@@ -150,5 +150,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "c95ed8b6819a446b1136d2849939df57c323ac23"
+  "gitHead": "9627ff7449d05287c4fbf868e8210bb0a4f8b352"
 }

package/src/InternalErrorBoundary.tsx

@@ -15,6 +15,7 @@ const DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {
 class InternalErrorBoundary extends React.PureComponent<{
   onError?: (props: ErrorBoundaryProps) => void;
   ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+  children?: React.ReactNode;
 }> {
   static defaultProps = {
     ErrorInfoComponent: DefaultErrorBoundaryComponent,

package/src/SendbirdUIKitContainer.tsx

@@ -34,8 +34,7 @@ export const SendbirdUIKit = Object.freeze({
   PLATFORM: Platform.OS.toLowerCase(),
 });
 
-export type SendbirdUIKitContainerProps = {
-  children?: React.ReactNode;
+export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   appId: string;
   platformServices: {
     file: FileServiceInterface;
@@ -63,7 +62,7 @@ export type SendbirdUIKitContainerProps = {
     onError?: (props: ErrorBoundaryProps) => void;
     ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
   };
-};
+}>;
 
 const SendbirdUIKitContainer = ({
   children,
@@ -160,7 +159,7 @@ const SendbirdUIKitContainer = ({
   );
 };
 
-const LocalizedDialogProvider: React.FC = ({ children }) => {
+const LocalizedDialogProvider = ({ children }: React.PropsWithChildren) => {
   const { STRINGS } = useLocalization();
   return (
     <DialogProvider

package/src/components/ChannelCover.tsx

@@ -12,7 +12,7 @@ type Props = {
   containerStyle?: StyleProp<ViewStyle>;
 };
 
-const ChannelCover: React.FC<Props> = ({ channel, ...avatarProps }) => {
+const ChannelCover = ({ channel, ...avatarProps }: Props) => {
   const { currentUser } = useSendbirdChat();
 
   // channel cover

package/src/components/ChatFlatList.tsx

@@ -48,7 +48,7 @@ const ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(
     }
   }, [onBottomReached, nextMessages, currentUserId]);
 
-  const _onScroll: Props['onScroll'] = useCallback(
+  const _onScroll = useCallback<NonNullable<Props['onScroll']>>(
     (event) => {
       const { contentOffset } = event.nativeEvent;
       if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {

package/src/components/MessageRenderer/AdminMessage/index.tsx

@@ -7,7 +7,7 @@ import type { SendbirdAdminMessage } from '@sendbird/uikit-utils';
 import type { MessageRendererInterface } from '../index';
 
 export type AdminMessageProps = MessageRendererInterface<SendbirdAdminMessage>;
-const AdminMessage: React.FC<AdminMessageProps> = ({ message, nextMessage }) => {
+const AdminMessage = ({ message, nextMessage }: AdminMessageProps) => {
   const { colors } = useUIKitTheme();
 
   const isNextAdmin = nextMessage?.isAdminMessage();

package/src/components/MessageRenderer/FileMessage/BaseFileMessage.tsx

@@ -8,12 +8,10 @@ import type { FileMessageProps } from './index';
 
 const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
 
-const BaseFileMessage: React.FC<FileMessageProps & { type: 'image' | 'audio' | 'video' | 'file' }> = ({
-  message,
-  variant,
-  pressed,
-  type,
-}) => {
+type Props = FileMessageProps & {
+  type: 'image' | 'audio' | 'video' | 'file';
+};
+const BaseFileMessage = ({ message, variant, pressed, type }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];

package/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -5,7 +5,7 @@ import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import type { FileMessageProps } from './index';
 
-const ImageFileMessage: React.FC<FileMessageProps> = ({ message }) => {
+const ImageFileMessage = ({ message }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
 

package/src/components/MessageRenderer/FileMessage/index.tsx

@@ -7,7 +7,7 @@ import BaseFileMessage from './BaseFileMessage';
 import ImageFileMessage from './ImageFileMessage';
 
 export type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;
-const FileMessage: React.FC<FileMessageProps> = (props) => {
+const FileMessage = (props: FileMessageProps) => {
   const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
 
   if (fileType === 'image') return <ImageFileMessage {...props} />;

package/src/components/MessageRenderer/MessageContainer.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 
-const MessageContainer: React.FC = ({ children }) => {
+const MessageContainer = ({ children }: React.PropsWithChildren) => {
   return <View style={styles.container}>{children}</View>;
 };
 

package/src/components/MessageRenderer/MessageDateSeparator.tsx

@@ -12,7 +12,7 @@ type Props = {
   prevMessage?: SendbirdMessage;
 };
 
-const MessageDateSeparator: React.FC<Props> = ({ message, prevMessage }) => {
+const MessageDateSeparator = ({ message, prevMessage }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);

package/src/components/MessageRenderer/MessageIncomingAvatar.tsx

@@ -4,8 +4,11 @@ import { View } from 'react-native';
 import { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
-type Props = { message: SendbirdMessage; grouping: boolean };
-const MessageIncomingAvatar: React.FC<Props> = ({ message, grouping }) => {
+type Props = {
+  message: SendbirdMessage;
+  grouping: boolean;
+};
+const MessageIncomingAvatar = ({ message, grouping }: Props) => {
   if (grouping) return <View style={styles.avatar} />;
   return (
     <View style={styles.avatar}>

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -6,8 +6,11 @@ import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
 import { useLocalization } from '../../hooks/useContext';
 
-type Props = { message: SendbirdMessage; grouping: boolean };
-const MessageIncomingSenderName: React.FC<Props> = ({ message, grouping }) => {
+type Props = {
+  message: SendbirdMessage;
+  grouping: boolean;
+};
+const MessageIncomingSenderName = ({ message, grouping }: Props) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
   if (grouping) return null;

package/src/components/MessageRenderer/MessageOutgoingStatus.tsx

@@ -14,7 +14,7 @@ import { useSendbirdChat } from '../../hooks/useContext';
 const SIZE = 16;
 
 type Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };
-const MessageOutgoingStatus: React.FC<Props> = ({ channel, message }) => {
+const MessageOutgoingStatus = ({ channel, message }: Props) => {
   if (!message.isUserMessage() && !message.isFileMessage()) return null;
 
   const handlerId = useUniqId('MessageOutgoingStatus');

package/src/components/MessageRenderer/MessageTime.tsx

@@ -6,8 +6,12 @@ import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
 import { useLocalization } from '../../hooks/useContext';
 
-type Props = { message: SendbirdMessage; grouping: boolean; style?: StyleProp<ViewStyle> };
-const MessageTime: React.FC<Props> = ({ message, grouping, style }) => {
+type Props = {
+  message: SendbirdMessage;
+  grouping: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+const MessageTime = ({ message, grouping, style }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   if (grouping) return null;

package/src/components/MessageRenderer/UnknownMessage/index.tsx

@@ -7,7 +7,7 @@ import { useLocalization } from '../../../hooks/useContext';
 import type { MessageRendererInterface } from '../index';
 
 export type UnknownMessageProps = MessageRendererInterface;
-const UnknownMessage: React.FC<UnknownMessageProps> = ({ message, variant, pressed }) => {
+const UnknownMessage = ({ message, variant, pressed }: UnknownMessageProps) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];

package/src/components/MessageRenderer/UserMessage/BaseUserMessage.tsx

@@ -6,7 +6,7 @@ import { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/
 import { useLocalization } from '../../../hooks/useContext';
 import type { UserMessageProps } from './index';
 
-const BaseUserMessage: React.FC<UserMessageProps> = ({ message, variant, pressed }) => {
+const BaseUserMessage = ({ message, variant, pressed }: UserMessageProps) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   const { STRINGS } = useLocalization();

package/src/components/MessageRenderer/UserMessage/OpenGraphUserMessage.tsx

@@ -15,8 +15,10 @@ import { conditionChaining } from '@sendbird/uikit-utils';
 import { useLocalization } from '../../../hooks/useContext';
 import type { UserMessageProps } from './index';
 
-type Props = UserMessageProps & { ogMetaData: Sendbird.OGMetaData };
-const OpenGraphUserMessage: React.FC<Props> = ({ message, variant, pressed, ogMetaData }) => {
+type Props = UserMessageProps & {
+  ogMetaData: Sendbird.OGMetaData;
+};
+const OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors, select, palette } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];

package/src/components/MessageRenderer/UserMessage/index.tsx

@@ -7,7 +7,7 @@ import BaseUserMessage from './BaseUserMessage';
 import OpenGraphUserMessage from './OpenGraphUserMessage';
 
 export type UserMessageProps = MessageRendererInterface<SendbirdUserMessage>;
-const UserMessage: React.FC<UserMessageProps> = (props) => {
+const UserMessage = (props: UserMessageProps) => {
   if (props.message.ogMetaData) {
     return <OpenGraphUserMessage {...props} ogMetaData={props.message.ogMetaData} />;
   }

package/src/components/NewMessagesButton.tsx

@@ -11,7 +11,7 @@ type Props = {
   visible: boolean;
   onPress: () => void;
 };
-const NewMessagesButton: React.FC<Props> = ({ newMessages, visible, onPress }) => {
+const NewMessagesButton = ({ newMessages, visible, onPress }: Props) => {
   const { STRINGS } = useLocalization();
   const { select, palette, colors } = useUIKitTheme();
   if (newMessages.length === 0 || !visible) return null;

package/src/components/ProviderLayout.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 
-const ProviderLayout: React.FC = ({ children }) => {
+const ProviderLayout = ({ children }: React.PropsWithChildren) => {
   const { colors } = useUIKitTheme();
   return <View style={[styles.view, { backgroundColor: colors.background }]}>{children}</View>;
 };

package/src/components/ScrollToBottomButton.tsx

@@ -7,7 +7,7 @@ type Props = {
   visible: boolean;
   onPress: () => void;
 };
-const ScrollToBottomButton: React.FC<Props> = ({ visible, onPress }) => {
+const ScrollToBottomButton = ({ visible, onPress }: Props) => {
   const { palette, select } = useUIKitTheme();
   return (
     <TouchableOpacity

package/src/components/TypedPlaceholder.tsx

@@ -16,7 +16,7 @@ type Props = {
     | 'loading';
   onPressRetry?: () => void;
 };
-const TypedPlaceholder: React.FC<Props> = ({ type, onPressRetry }) => {
+const TypedPlaceholder = ({ type, onPressRetry }: Props) => {
   const { STRINGS } = useLocalization();
   switch (type) {
     case 'no-banned-members':

package/src/components/UserActionBar.tsx

@@ -12,7 +12,7 @@ type Props = {
   disabled: boolean;
   onPressActionMenu?: () => void;
 };
-const UserActionBar: React.FC<Props> = ({ muted, uri, name, disabled, onPressActionMenu, label }) => {
+const UserActionBar = ({ muted, uri, name, disabled, onPressActionMenu, label }: Props) => {
   const { colors } = useUIKitTheme();
 
   const iconColor = conditionChaining([disabled], [colors.onBackground04, colors.onBackground01]);

package/src/components/UserSelectableBar.tsx

@@ -10,7 +10,7 @@ type Props = {
   selected: boolean;
   disabled: boolean;
 };
-const UserSelectableBar: React.FC<Props> = ({ uri, name, selected, disabled }) => {
+const UserSelectableBar = ({ uri, name, selected, disabled }: Props) => {
   const { colors } = useUIKitTheme();
 
   const iconColor = conditionChaining(

package/src/contexts/Localization.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import type { StringSet } from '../localization/StringSet.type';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   stringSet: StringSet;
-  children?: React.ReactNode;
-};
+}>;
 
 export type LocalizationContextType = {
   STRINGS: StringSet;

package/src/contexts/PlatformService.tsx

@@ -2,19 +2,14 @@ import React from 'react';
 
 import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from '../platform/types';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
-};
+}>;
 
 export const PlatformServiceContext = React.createContext<Props | null>(null);
-export const PlatformServiceProvider: React.FC<Props> = ({
-  children,
-  fileService,
-  clipboardService,
-  notificationService,
-}) => {
+export const PlatformServiceProvider = ({ children, fileService, clipboardService, notificationService }: Props) => {
   return (
     <PlatformServiceContext.Provider value={{ fileService, clipboardService, notificationService }}>
       {children}

package/src/contexts/SendbirdChat.tsx

@@ -7,13 +7,13 @@ import { useForceUpdate } from '@sendbird/uikit-utils';
 
 import type { FileType } from '../platform/types';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   sdkInstance: SendbirdChatSDK;
 
   enableAutoPushTokenRegistration: boolean;
   // enableChannelListTypingIndicator: boolean;
   // enableChannelListMessageReceiptStatus: boolean;
-};
+}>;
 
 type Context = {
   sdk: SendbirdChatSDK;
@@ -39,7 +39,7 @@ type Context = {
 };
 
 export const SendbirdChatContext = React.createContext<Context | null>(null);
-export const SendbirdChatProvider: React.FC<Props> = ({ children, sdkInstance, enableAutoPushTokenRegistration }) => {
+export const SendbirdChatProvider = ({ children, sdkInstance, enableAutoPushTokenRegistration }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
   const appFeatures = useAppFeatures(sdkInstance);

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

@@ -8,7 +8,7 @@ import { useLocalization } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
-const GroupChannelHeader: React.FC<GroupChannelProps['Header']> = ({ onPressHeaderLeft, onPressHeaderRight }) => {
+const GroupChannelHeader = ({ onPressHeaderLeft, onPressHeaderRight }: GroupChannelProps['Header']) => {
   const { headerTitle, channel } = useContext(GroupChannelContexts.Fragment);
   const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
   const { STRINGS } = useLocalization();

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

@@ -15,7 +15,7 @@ type EditInputProps = GroupChannelProps['Input'] & {
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const EditInput: React.FC<EditInputProps> = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }) => {
+const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }: EditInputProps) => {
   const { STRINGS } = useLocalization();
   const inputRef = useRef<RNTextInput>(null);
   const toast = useToast();

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

@@ -19,7 +19,7 @@ type SendInputProps = GroupChannelProps['Input'] & {
   setText: (val: string) => void;
   disabled: boolean;
 };
-const SendInput: React.FC<SendInputProps> = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }) => {
+const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }: SendInputProps) => {
   const { STRINGS } = useLocalization();
   const { openSheet } = useBottomSheet();
   const { fileService } = usePlatformService();

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

@@ -11,7 +11,7 @@ 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 GroupChannelInput = (props: GroupChannelProps['Input']) => {
   const { channel } = props;
 
   const { left, right, bottom } = useSafeAreaInsets();
@@ -65,7 +65,7 @@ const GroupChannelInput: React.FC<GroupChannelProps['Input']> = (props) => {
     </KeyboardAvoidingView>
   );
 };
-const SafeAreaBottom: React.FC<{ height: number }> = ({ height }) => {
+const SafeAreaBottom = ({ height }: { height: number }) => {
   return <View style={{ height }} />;
 };
 

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

@@ -30,7 +30,7 @@ import type { GroupChannelProps } from '../types';
 
 const HANDLE_NEXT_MSG_SEPARATELY = Platform.select({ default: true });
 
-const GroupChannelMessageList: React.FC<GroupChannelProps['MessageList']> = ({
+const GroupChannelMessageList = ({
   currentUserId,
   channel,
   messages,
@@ -46,7 +46,7 @@ const GroupChannelMessageList: React.FC<GroupChannelProps['MessageList']> = ({
   onPressImageMessage,
   flatListProps,
   enableMessageGrouping,
-}) => {
+}: GroupChannelProps['MessageList']) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const { left, right } = useSafeAreaInsets();

package/src/domain/groupChannel/types.ts

@@ -114,7 +114,7 @@ export interface GroupChannelContextsType {
   }>;
 }
 export interface GroupChannelModule {
-  Provider: React.FC<GroupChannelProps['Provider']>;
+  Provider: CommonComponent<GroupChannelProps['Provider']>;
   Header: CommonComponent<GroupChannelProps['Header']>;
   MessageList: CommonComponent<GroupChannelProps['MessageList']>;
   Input: CommonComponent<GroupChannelProps['Input']>;
@@ -122,4 +122,4 @@ export interface GroupChannelModule {
   StatusLoading: CommonComponent;
 }
 
-export type GroupChannelFragment = React.FC<GroupChannelProps['Fragment']>;
+export type GroupChannelFragment = CommonComponent<GroupChannelProps['Fragment']>;

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

@@ -5,15 +5,13 @@ 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 GroupChannelListHeader = (_: GroupChannelListProps['Header']) => {
   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>
+    <HeaderComponent title={fragment.headerTitle} right={<Icon icon={'create'} />} onPressRight={typeSelector.show} />
   );
 };
 

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

@@ -8,13 +8,13 @@ import { PASS, SendbirdGroupChannel, useFreshCallback } from '@sendbird/uikit-ut
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import type { GroupChannelListProps } from '../types';
 
-const GroupChannelListList: React.FC<GroupChannelListProps['List']> = ({
+const GroupChannelListList = ({
   renderGroupChannelPreview,
   groupChannels,
   onLoadNext,
   flatListProps,
   menuItemCreator = PASS,
-}) => {
+}: GroupChannelListProps['List']) => {
   const toast = useToast();
   const { openMenu } = useActionMenu();
   const { STRINGS } = useLocalization();

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

@@ -22,11 +22,11 @@ const TYPE_ICONS: Record<GroupChannelType, keyof typeof Icon.Assets> = {
   'BROADCAST': 'broadcast',
 };
 
-const GroupChannelListTypeSelector: React.FC<GroupChannelListProps['TypeSelector']> = ({
+const GroupChannelListTypeSelector = ({
   Header = DefaultHeader,
   skipTypeSelection,
   onSelectType,
-}) => {
+}: GroupChannelListProps['TypeSelector']) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
   const typeSelector = useContext(GroupChannelListContexts.TypeSelector);
@@ -82,11 +82,11 @@ const GroupChannelListTypeSelector: React.FC<GroupChannelListProps['TypeSelector
   );
 };
 
-const DefaultTypeIcon: React.FC<{ type: GroupChannelType }> = ({ type }) => {
+const DefaultTypeIcon = ({ type }: { type: GroupChannelType }) => {
   return <Icon size={24} icon={TYPE_ICONS[type]} containerStyle={styles.icon} />;
 };
 
-const DefaultTypeText: React.FC<{ type: GroupChannelType }> = ({ type }) => {
+const DefaultTypeText = ({ type }: { type: GroupChannelType }) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   return (

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

@@ -4,7 +4,7 @@ import { NOOP } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
 import { useLocalization } from '../../../hooks/useContext';
-import type { GroupChannelListContextsType } from '../types';
+import type { GroupChannelListContextsType, GroupChannelListModule } from '../types';
 
 export const GroupChannelListContexts: GroupChannelListContextsType = {
   Fragment: createContext({
@@ -18,7 +18,7 @@ export const GroupChannelListContexts: GroupChannelListContextsType = {
   }),
 };
 
-export const GroupChannelListContextsProvider: React.FC = ({ children }) => {
+export const GroupChannelListContextsProvider: GroupChannelListModule['Provider'] = ({ children }) => {
   const { STRINGS } = useLocalization();
 
   // Type selector

package/src/domain/groupChannelList/types.ts

@@ -80,7 +80,7 @@ export interface GroupChannelListContextsType {
   }>;
 }
 export interface GroupChannelListModule {
-  Provider: React.FC;
+  Provider: CommonComponent;
   Header: CommonComponent<GroupChannelListProps['Header']>;
   List: CommonComponent<GroupChannelListProps['List']>;
   TypeSelector: CommonComponent<GroupChannelListProps['TypeSelector']>;
@@ -88,5 +88,5 @@ export interface GroupChannelListModule {
   StatusLoading: CommonComponent;
 }
 
-export type GroupChannelListFragment = React.FC<GroupChannelListProps['Fragment']>;
+export type GroupChannelListFragment = CommonComponent<GroupChannelListProps['Fragment']>;
 export type GroupChannelType = 'GROUP' | 'SUPER_GROUP' | 'BROADCAST';

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

@@ -5,7 +5,7 @@ import { Icon, Text, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react
 import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
-const GroupChannelSettingsHeader: React.FC<GroupChannelSettingsProps['Header']> = ({ onPressHeaderLeft }) => {
+const GroupChannelSettingsHeader = ({ onPressHeaderLeft }: GroupChannelSettingsProps['Header']) => {
   const { colors } = useUIKitTheme();
   const { headerTitle, headerRight, onPressHeaderRight } = useContext(GroupChannelSettingsContexts.Fragment);
 

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

@@ -9,7 +9,7 @@ import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
-const GroupChannelSettingsInfo: React.FC<GroupChannelSettingsProps['Info']> = () => {
+const GroupChannelSettingsInfo = (_: GroupChannelSettingsProps['Info']) => {
   const { channel } = useContext(GroupChannelSettingsContexts.Fragment);
   const { currentUser } = useSendbirdChat();
   const { STRINGS } = useLocalization();

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

@@ -8,11 +8,11 @@ import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
-const GroupChannelSettingsMenu: React.FC<GroupChannelSettingsProps['Menu']> = ({
+const GroupChannelSettingsMenu = ({
   onPressMenuMembers,
   onPressMenuLeaveChannel,
   menuItemsCreator = (menu) => menu,
-}) => {
+}: GroupChannelSettingsProps['Menu']) => {
   const { sdk } = useSendbirdChat();
   const { channel } = useContext(GroupChannelSettingsContexts.Fragment);
   const { STRINGS } = useLocalization();