@sendbird/uikit-react-native 1.0.0-rc.4 → 1.0.2

package/lib/typescript/src/domain/groupChannelSettings/component/GroupChannelSettingsMenu.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { GroupChannelSettingsProps } from '../types';
-declare const GroupChannelSettingsMenu: React.FC<GroupChannelSettingsProps['Menu']>;
+declare const GroupChannelSettingsMenu: ({ onPressMenuMembers, onPressMenuLeaveChannel, menuItemsCreator, }: GroupChannelSettingsProps['Menu']) => JSX.Element;
 export default GroupChannelSettingsMenu;

package/lib/typescript/src/domain/groupChannelSettings/module/moduleContext.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
-import type { GroupChannelSettingsContextsType, GroupChannelSettingsProps } from '../types';
+import type { GroupChannelSettingsContextsType, GroupChannelSettingsModule } from '../types';
 export declare const GroupChannelSettingsContexts: GroupChannelSettingsContextsType;
-export declare const GroupChannelSettingsContextsProvider: React.FC<GroupChannelSettingsProps['Provider']>;
+export declare const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['Provider'];

package/lib/typescript/src/domain/groupChannelSettings/types.d.ts

@@ -37,9 +37,9 @@ export interface GroupChannelSettingsContextsType {
     }>;
 }
 export interface GroupChannelSettingsModule {
-    Provider: React.FC<GroupChannelSettingsProps['Provider']>;
+    Provider: CommonComponent<GroupChannelSettingsProps['Provider']>;
     Header: CommonComponent<GroupChannelSettingsProps['Header']>;
     Info: CommonComponent<GroupChannelSettingsProps['Info']>;
     Menu: CommonComponent<GroupChannelSettingsProps['Menu']>;
 }
-export declare type GroupChannelSettingsFragment = React.FC<GroupChannelSettingsProps['Fragment']>;
+export declare type GroupChannelSettingsFragment = CommonComponent<GroupChannelSettingsProps['Fragment']>;

package/lib/typescript/src/domain/groupChannelUserList/types.d.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdGroupChannelParams } from '@sendbird/uikit-utils';
+import type { CommonComponent } from '../../types';
 import type { GroupChannelType } from '../groupChannelList/types';
 import type { UserListProps } from '../userList/types';
 declare type UserIds = string[];
@@ -16,7 +16,7 @@ export interface GroupChannelCreateProps<User> {
         renderUser?: UserListProps<User>['List']['renderUser'];
     };
 }
-export declare type GroupChannelCreateFragment<User> = React.FC<GroupChannelCreateProps<User>['Fragment']>;
+export declare type GroupChannelCreateFragment<User> = CommonComponent<GroupChannelCreateProps<User>['Fragment']>;
 export interface GroupChannelInviteProps<User> {
     Fragment: {
         channel: SendbirdGroupChannel;
@@ -28,7 +28,7 @@ export interface GroupChannelInviteProps<User> {
         sortComparator?: UseUserListOptions<User>['sortComparator'];
     };
 }
-export declare type GroupChannelInviteFragment<User> = React.FC<GroupChannelInviteProps<User>['Fragment']>;
+export declare type GroupChannelInviteFragment<User> = CommonComponent<GroupChannelInviteProps<User>['Fragment']>;
 export interface GroupChannelMembersProps<User> {
     Fragment: {
         channel: SendbirdGroupChannel;
@@ -38,5 +38,5 @@ export interface GroupChannelMembersProps<User> {
         renderUser?: UserListProps<User>['List']['renderUser'];
     };
 }
-export declare type GroupChannelMembersFragment<User> = React.FC<GroupChannelMembersProps<User>['Fragment']>;
+export declare type GroupChannelMembersFragment<User> = CommonComponent<GroupChannelMembersProps<User>['Fragment']>;
 export {};

package/lib/typescript/src/domain/userList/component/UserListStatusEmpty.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const UserListStatusEmpty: () => JSX.Element;
 export default UserListStatusEmpty;

package/lib/typescript/src/domain/userList/component/UserListStatusLoading.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const UserListStatusLoading: () => JSX.Element;
 export default UserListStatusLoading;

package/lib/typescript/src/domain/userList/module/moduleContext.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
-import type { UserListContextsType, UserListProps } from '../types';
+import type { UserListContextsType, UserListModule } from '../types';
 export declare const UserListContexts: UserListContextsType<unknown>;
-export declare const UserListContextsProvider: React.FC<UserListProps<any>['Provider']>;
+export declare const UserListContextsProvider: UserListModule<any>['Provider'];

package/lib/typescript/src/domain/userList/types.d.ts

@@ -47,7 +47,7 @@ export interface UserListContextsType<User> {
     }>;
 }
 export interface UserListModule<User> {
-    Provider: React.FC<UserListProps<User>['Provider']>;
+    Provider: CommonComponent<UserListProps<User>['Provider']>;
     Header: CommonComponent<UserListProps<User>['Header']>;
     List: CommonComponent<UserListProps<User>['List']>;
     StatusEmpty: CommonComponent;

package/lib/typescript/src/hooks/useContext.d.ts

@@ -5,6 +5,8 @@ export declare const usePlatformService: () => {
     fileService: import("..").FileServiceInterface;
     clipboardService: import("..").ClipboardServiceInterface;
     notificationService: import("..").NotificationServiceInterface;
+} & {
+    children?: React.ReactNode;
 };
 export declare const useSendbirdChat: () => {
     sdk: import("sendbird").SendBirdInstance;

package/lib/typescript/src/platform/createFileService.expo.d.ts

@@ -1,7 +1,7 @@
-import type ExpoDocumentPicker from 'expo-document-picker';
-import type ExpoFs from 'expo-file-system';
-import type ExpoImagePicker from 'expo-image-picker';
-import type ExpoMediaLibrary from 'expo-media-library';
+import type * as ExpoDocumentPicker from 'expo-document-picker';
+import type * as ExpoFs from 'expo-file-system';
+import type * as ExpoImagePicker from 'expo-image-picker';
+import type * as ExpoMediaLibrary from 'expo-media-library';
 import type { FileServiceInterface } from './types';
 declare const createExpoFileService: ({ imagePickerModule, documentPickerModule, mediaLibraryModule, fsModule, }: {
     imagePickerModule: typeof ExpoImagePicker;

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "1.0.0-rc.4";
+declare const VERSION = "1.0.2";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.2",
   "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-rc.4",
-    "@sendbird/uikit-react-native-foundation": "1.0.0-rc.4",
-    "@sendbird/uikit-utils": "1.0.0-rc.4"
+    "@sendbird/uikit-chat-hooks": "1.0.2",
+    "@sendbird/uikit-react-native-foundation": "1.0.2",
+    "@sendbird/uikit-utils": "1.0.2"
   },
   "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": "d5044c5fd0a2e25c0d3ab426094c679f49c84d1c"
+  "gitHead": "257ece5f957e03ff5c08b79780b33d9d19adc5de"
 }

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,
@@ -99,7 +98,7 @@ const SendbirdUIKitContainer = ({
       sdk.addExtension('device-os-platform', SendbirdUIKit.PLATFORM);
     }
 
-    if (NetInfo.addEventListener) {
+    if (NetInfo?.addEventListener) {
       const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
         const unsubscribe = NetInfo.addEventListener((state) => {
           const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
@@ -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} />
   );
 };