@sendbird/uikit-react-native 1.0.0 → 1.1.0

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

@@ -1,19 +1,23 @@
-import React from 'react';
-import { LocalizationContextType } from '../contexts/Localization';
-export declare const useLocalization: () => LocalizationContextType;
+/// <reference types="react" />
+export declare const useLocalization: () => import("../contexts/Localization").LocalizationContextType;
 export declare const usePlatformService: () => {
     fileService: import("..").FileServiceInterface;
     clipboardService: import("..").ClipboardServiceInterface;
     notificationService: import("..").NotificationServiceInterface;
+    mediaService?: import("../platform/types").MediaServiceInterface | undefined;
+} & {
+    children?: import("react").ReactNode;
 };
 export declare const useSendbirdChat: () => {
     sdk: import("sendbird").SendBirdInstance;
     currentUser?: import("sendbird").User | undefined;
-    setCurrentUser: React.Dispatch<React.SetStateAction<import("sendbird").User | undefined>>;
+    setCurrentUser: import("react").Dispatch<import("react").SetStateAction<import("sendbird").User | undefined>>;
     updateCurrentUserInfo: (nickname: string, profile?: string | import("..").FileType | undefined) => Promise<import("sendbird").User>;
     markAsDeliveredWithChannel: (channel: import("sendbird").GroupChannel) => void;
     features: {
         autoPushTokenRegistrationEnabled: boolean;
+        channelListTypingIndicatorEnabled: boolean;
+        channelListMessageReceiptStatusEnabled: boolean;
         deliveryReceiptEnabled: boolean;
         broadcastChannelEnabled: boolean;
         superGroupChannelEnabled: boolean;

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

@@ -1,6 +1,7 @@
 export { default as MessageRenderer } from './components/MessageRenderer';
 export { default as ChannelCover } from './components/ChannelCover';
 export { default as ChatFlatList } from './components/ChatFlatList';
+export { default as FileViewer } from './components/FileViewer';
 export { default as NewMessagesButton } from './components/NewMessagesButton';
 export { default as ProviderLayout } from './components/ProviderLayout';
 export { default as ScrollToBottomButton } from './components/ScrollToBottomButton';
@@ -31,9 +32,11 @@ export type { StringSet } from './localization/StringSet.type';
 export { default as createNativeFileService } from './platform/createFileService.native';
 export { default as createNativeClipboardService } from './platform/createClipboardService.native';
 export { default as createNativeNotificationService } from './platform/createNotificationService.native';
+export { default as createNativeMediaService } from './platform/createMediaService.native';
 export { default as createExpoFileService } from './platform/createFileService.expo';
 export { default as createExpoClipboardService } from './platform/createClipboardService.expo';
 export { default as createExpoNotificationService } from './platform/createNotificationService.expo';
+export { default as createExpoMediaService } from './platform/createMediaService.expo';
 export type { FileServiceInterface, ClipboardServiceInterface, FilePickerServiceInterface, FileSystemServiceInterface, SaveOptions, OpenDocumentOptions, OpenCameraOptions, OpenMediaLibraryOptions, OpenResultListener, DownloadedPath, Unsubscribe, FilePickerResponse, FileType, NotificationServiceInterface, } from './platform/types';
 /** Domain **/
 export * from './domain/groupChannel';

package/lib/typescript/src/localization/StringSet.type.d.ts

@@ -107,6 +107,10 @@ export interface StringSet {
         CHANNEL_NO_MEMBERS: string;
         TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
     };
+    FILE_VIEWER: {
+        TITLE: (message: SendbirdFileMessage) => string;
+        SUBTITLE: (message: SendbirdFileMessage) => string;
+    };
     PLACEHOLDER: {
         NO_BANNED_MEMBERS: string;
         NO_USERS: string;

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/platform/createMediaService.expo.d.ts

@@ -0,0 +1,9 @@
+import type * as ExpoAV from 'expo-av';
+import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
+import type { MediaServiceInterface } from './types';
+declare type Modules = {
+    avModule: typeof ExpoAV;
+    thumbnailModule: typeof ExpoVideoThumbnail;
+};
+declare const createExpoMediaService: ({ avModule, thumbnailModule }: Modules) => MediaServiceInterface;
+export default createExpoMediaService;

package/lib/typescript/src/platform/createMediaService.native.d.ts

@@ -0,0 +1,9 @@
+import type * as CreateThumbnail from 'react-native-create-thumbnail';
+import type Video from 'react-native-video';
+import type { MediaServiceInterface } from './types';
+declare type Modules = {
+    VideoComponent: typeof Video;
+    thumbnailModule: typeof CreateThumbnail;
+};
+declare const createNativeMediaService: ({ VideoComponent, thumbnailModule }: Modules) => MediaServiceInterface;
+export default createNativeMediaService;

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

@@ -1,4 +1,4 @@
-import type ExpoNotification from 'expo-notifications';
+import type * as ExpoNotification from 'expo-notifications';
 import type { NotificationServiceInterface } from './types';
 declare const createExpoNotificationService: (messagingModule: typeof ExpoNotification) => NotificationServiceInterface;
 export default createExpoNotificationService;

package/lib/typescript/src/platform/types.d.ts

@@ -29,7 +29,7 @@ export interface OpenMediaLibraryOptions extends OpenResultListener {
 }
 export interface OpenCameraOptions extends OpenResultListener {
     cameraType?: 'front' | 'back';
-    mediaType?: 'photo' | 'video';
+    mediaType?: 'photo' | 'video' | 'all';
 }
 export declare type OpenDocumentOptions = OpenResultListener;
 export interface SaveOptions {
@@ -45,3 +45,22 @@ export interface FilePickerServiceInterface {
 export interface FileSystemServiceInterface {
     save(options?: SaveOptions): Promise<DownloadedPath | null>;
 }
+interface VideoProps {
+    source: {
+        uri: string;
+    } | number;
+    resizeMode?: 'cover' | 'contain' | 'stretch';
+    onLoad?: () => void;
+}
+interface GetVideoThumbnailOptions {
+    url: string;
+    timeMills?: number;
+    quality?: number;
+}
+export interface MediaServiceInterface {
+    VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;
+    getVideoThumbnail(options: GetVideoThumbnailOptions): Promise<{
+        path: string;
+    } | null>;
+}
+export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "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.1.0",
+    "@sendbird/uikit-react-native-foundation": "1.1.0",
+    "@sendbird/uikit-utils": "1.1.0"
   },
   "devDependencies": {
     "@react-native-clipboard/clipboard": "^1.8.5",
@@ -51,26 +51,31 @@
     "@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": "*",
+    "@types/react-native-video": "^5.0.14",
     "date-fns": "^2.28.0",
+    "expo-av": "^12.0.4",
     "expo-clipboard": "^2.1.1",
     "expo-document-picker": "^10.1.3",
     "expo-file-system": "^13.1.4",
     "expo-image-picker": "^12.0.2",
     "expo-media-library": "^14.0.1",
     "expo-notifications": "^0.14.1",
+    "expo-video-thumbnails": "^6.4.0",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
     "js-convert-case": "^4.2.0",
     "react": "17.0.2",
     "react-native": "0.66.4",
     "react-native-builder-bob": "^0.18.0",
+    "react-native-create-thumbnail": "^1.5.1",
     "react-native-document-picker": "^8.0.0",
     "react-native-file-access": "^2.4.3",
     "react-native-image-picker": "^4.7.1",
     "react-native-permissions": "^3.6.0",
     "react-native-safe-area-context": "^3.3.2",
+    "react-native-video": "^5.2.0",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
@@ -79,18 +84,22 @@
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
     "date-fns": ">=2.28.0",
+    "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
     "expo-document-picker": ">=10.1.3",
     "expo-file-system": ">=13.1.4",
     "expo-image-picker": ">=12.0.2",
     "expo-notifications": ">=0.14.1",
+    "expo-video-thumbnails": ">=6.4.0",
     "react": ">=16.13.1",
     "react-native": ">=0.63.3",
+    "react-native-create-thumbnail": ">=1.5.1",
     "react-native-document-picker": ">=8.0.0",
     "react-native-file-access": ">=2.4.3",
     "react-native-image-picker": ">=4.7.1",
     "react-native-permissions": ">=3.6.0",
     "react-native-safe-area-context": ">=3.3.2",
+    "react-native-video": ">=5.2.0",
     "sendbird": "^3.1.22"
   },
   "peerDependenciesMeta": {
@@ -150,5 +159,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "c95ed8b6819a446b1136d2849939df57c323ac23"
+  "gitHead": "787ef6d52fec5d01e9b831d7a6f17e33614e2d09"
 }

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

@@ -23,7 +23,12 @@ import { useLocalization } from './hooks/useContext';
 import StringSetEn from './localization/StringSet.en';
 import type { StringSet } from './localization/StringSet.type';
 import SBUDynamicModule from './platform/dynamicModule';
-import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from './platform/types';
+import type {
+  ClipboardServiceInterface,
+  FileServiceInterface,
+  MediaServiceInterface,
+  NotificationServiceInterface,
+} from './platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from './types';
 import VERSION from './version';
 
@@ -34,18 +39,20 @@ 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;
     notification: NotificationServiceInterface;
     clipboard: ClipboardServiceInterface;
+    media?: MediaServiceInterface;
   };
   chatOptions?: {
     localCacheStorage?: LocalCacheStorage;
-    enableAutoPushTokenRegistration?: boolean;
     onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
+    enableAutoPushTokenRegistration?: boolean;
+    enableChannelListTypingIndicator?: boolean;
+    enableChannelListMessageReceiptStatus?: boolean;
   };
   localization?: {
     stringSet?: StringSet;
@@ -54,6 +61,7 @@ export type SendbirdUIKitContainerProps = {
     theme?: UIKitTheme;
     statusBarTranslucent?: boolean;
     defaultHeaderTitleAlign?: 'left' | 'center';
+    defaultHeaderHeight?: number;
     HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
   };
   toast?: {
@@ -63,7 +71,7 @@ export type SendbirdUIKitContainerProps = {
     onError?: (props: ErrorBoundaryProps) => void;
     ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
   };
-};
+}>;
 
 const SendbirdUIKitContainer = ({
   children,
@@ -133,12 +141,15 @@ const SendbirdUIKitContainer = ({
       <SendbirdChatProvider
         sdkInstance={sdkInstance}
         enableAutoPushTokenRegistration={chatOptions?.enableAutoPushTokenRegistration ?? true}
+        enableChannelListTypingIndicator={chatOptions?.enableChannelListTypingIndicator ?? false}
+        enableChannelListMessageReceiptStatus={chatOptions?.enableChannelListMessageReceiptStatus ?? false}
       >
         <LocalizationProvider stringSet={localization?.stringSet ?? StringSetEn}>
           <PlatformServiceProvider
             fileService={platformServices.file}
             notificationService={platformServices.notification}
             clipboardService={platformServices.clipboard}
+            mediaService={platformServices.media}
           >
             <UIKitThemeProvider theme={styles?.theme ?? LightUIKitTheme}>
               <HeaderStyleProvider
@@ -160,7 +171,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) {