@sendbird/uikit-react-native 2.2.0 → 2.4.0

package/src/localization/createBaseStringSet.ts

@@ -0,0 +1,369 @@
+import type { Locale } from 'date-fns';
+
+import type { PartialDeep } from '@sendbird/uikit-utils';
+import {
+  getDateSeparatorFormat,
+  getGroupChannelLastMessage,
+  getGroupChannelPreviewTime,
+  getGroupChannelTitle,
+  getMessageTimeFormat,
+  getOpenChannelParticipants,
+  getOpenChannelTitle,
+} from '@sendbird/uikit-utils';
+
+import type { StringSet } from './StringSet.type';
+
+type StringSetCreateOptions = {
+  dateLocale: Locale;
+  overrides?: PartialDeep<StringSet>;
+};
+
+/**
+ * Create string set
+ * You can create localized String set, you should provide locale for date and string as a parameters
+ *
+ * @param {StringSetCreateOptions.dateLocale} dateLocale Date locale (from date-fns)
+ * @param {StringSetCreateOptions.overrides} [overrides] Localized strings
+ * */
+export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOptions): StringSet => {
+  const USER_NO_NAME = overrides?.LABELS?.USER_NO_NAME ?? '(No name)';
+  const CHANNEL_NO_MEMBERS = overrides?.LABELS?.CHANNEL_NO_MEMBERS ?? '(No members)';
+  return {
+    OPEN_CHANNEL: {
+      HEADER_TITLE: (channel) => getOpenChannelTitle(channel),
+      HEADER_SUBTITLE: (channel) => getOpenChannelParticipants(channel),
+      LIST_BANNER_FROZEN: 'Channel is frozen',
+      LIST_DATE_SEPARATOR: (date, locale) => getDateSeparatorFormat(date, locale ?? dateLocale),
+      MESSAGE_BUBBLE_TIME: (message, locale) => getMessageTimeFormat(new Date(message.createdAt), locale ?? dateLocale),
+      MESSAGE_BUBBLE_FILE_TITLE: (message) => message.name,
+      MESSAGE_BUBBLE_EDITED_POSTFIX: ' (edited)',
+      MESSAGE_BUBBLE_UNKNOWN_TITLE: () => '(Unknown message type)',
+      MESSAGE_BUBBLE_UNKNOWN_DESC: () => 'Cannot read this message.',
+      ...overrides?.OPEN_CHANNEL,
+    },
+    OPEN_CHANNEL_PARTICIPANTS: {
+      HEADER_TITLE: 'Participants',
+      ...overrides?.OPEN_CHANNEL_PARTICIPANTS,
+    },
+    OPEN_CHANNEL_SETTINGS: {
+      HEADER_TITLE: 'Channel information',
+      HEADER_RIGHT: 'Edit',
+      INFO_URL: 'URL',
+      MENU_MODERATION: 'Moderation',
+      MENU_PARTICIPANTS: 'Participants',
+      MENU_DELETE_CHANNEL: 'Delete channel',
+      DIALOG_CHANNEL_DELETE_CONFIRM_TITLE: 'Delete channel?',
+      DIALOG_CHANNEL_DELETE_CONFIRM_OK: 'Delete',
+      DIALOG_CHANNEL_DELETE_CONFIRM_CANCEL: 'Cancel',
+      DIALOG_CHANGE_NAME: 'Change channel name',
+      DIALOG_CHANGE_NAME_PROMPT_TITLE: 'Change channel name',
+      DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER: 'Enter name',
+      DIALOG_CHANGE_NAME_PROMPT_OK: 'Save',
+      DIALOG_CHANGE_NAME_PROMPT_CANCEL: 'Cancel',
+      DIALOG_CHANGE_IMAGE: 'Change channel image',
+      DIALOG_CHANGE_IMAGE_MENU_TITLE: 'Change channel image',
+      DIALOG_CHANGE_IMAGE_MENU_CAMERA: 'Take photo',
+      DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY: 'Choose photo',
+      ...overrides?.OPEN_CHANNEL_SETTINGS,
+    },
+    OPEN_CHANNEL_LIST: {
+      HEADER_TITLE: 'Channels',
+      CHANNEL_PREVIEW_TITLE: (channel) => getOpenChannelTitle(channel),
+      ...overrides?.OPEN_CHANNEL_LIST,
+    },
+    OPEN_CHANNEL_CREATE: {
+      HEADER_TITLE: 'New channel',
+      HEADER_RIGHT: 'Create',
+      PLACEHOLDER: 'Enter channel name',
+      DIALOG_IMAGE_MENU_REMOVE: 'Remove photo',
+      DIALOG_IMAGE_MENU_CAMERA: 'Take photo',
+      DIALOG_IMAGE_MENU_PHOTO_LIBRARY: 'Choose photo',
+      ...overrides?.OPEN_CHANNEL_CREATE,
+    },
+    OPEN_CHANNEL_MODERATION: {
+      HEADER_TITLE: 'Moderation',
+      MENU_OPERATORS: 'Operators',
+      MENU_MUTED_PARTICIPANTS: 'Muted participants',
+      MENU_BANNED_USERS: 'Banned users',
+      ...overrides?.OPEN_CHANNEL_MODERATION,
+    },
+    OPEN_CHANNEL_BANNED_USERS: {
+      HEADER_TITLE: 'Banned users',
+      ...overrides?.OPEN_CHANNEL_BANNED_USERS,
+    },
+    OPEN_CHANNEL_MUTED_PARTICIPANTS: {
+      HEADER_TITLE: 'Muted participants',
+      ...overrides?.OPEN_CHANNEL_MUTED_PARTICIPANTS,
+    },
+    OPEN_CHANNEL_OPERATORS: {
+      HEADER_TITLE: 'Operators',
+      ...overrides?.OPEN_CHANNEL_OPERATORS,
+    },
+    OPEN_CHANNEL_REGISTER_OPERATOR: {
+      HEADER_TITLE: 'Set as operators',
+      HEADER_RIGHT: ({ selectedUsers }) => {
+        const len = selectedUsers.length;
+        if (len === 0) return 'Add';
+        return `Add (${len})`;
+      },
+      ...overrides?.OPEN_CHANNEL_REGISTER_OPERATOR,
+    },
+    GROUP_CHANNEL: {
+      HEADER_TITLE: (uid, channel) => getGroupChannelTitle(uid, channel, USER_NO_NAME, CHANNEL_NO_MEMBERS),
+      LIST_BANNER_FROZEN: 'Channel is frozen',
+      LIST_DATE_SEPARATOR: (date, locale) => getDateSeparatorFormat(date, locale ?? dateLocale),
+      LIST_BUTTON_NEW_MSG: (newMessages) => `${newMessages.length} new messages`,
+
+      MESSAGE_BUBBLE_TIME: (message, locale) => getMessageTimeFormat(new Date(message.createdAt), locale ?? dateLocale),
+      MESSAGE_BUBBLE_FILE_TITLE: (message) => message.name,
+      MESSAGE_BUBBLE_EDITED_POSTFIX: ' (edited)',
+      MESSAGE_BUBBLE_UNKNOWN_TITLE: () => '(Unknown message type)',
+      MESSAGE_BUBBLE_UNKNOWN_DESC: () => 'Cannot read this message.',
+
+      MENTION_LIMITED: (mentionLimit) => `You can have up to ${mentionLimit} mentions per message.`,
+
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_COPY **/
+      DIALOG_MESSAGE_COPY: 'Copy',
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_EDIT **/
+      DIALOG_MESSAGE_EDIT: 'Edit',
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_SAVE **/
+      DIALOG_MESSAGE_SAVE: 'Save',
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_DELETE **/
+      DIALOG_MESSAGE_DELETE: 'Delete',
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE **/
+      DIALOG_MESSAGE_DELETE_CONFIRM_TITLE: 'Delete message?',
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK **/
+      DIALOG_MESSAGE_DELETE_CONFIRM_OK: 'Delete',
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL **/
+      DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL: 'Cancel',
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_FAILED_RETRY **/
+      DIALOG_MESSAGE_FAILED_RETRY: 'Retry',
+      /** @deprecated Please use LABELS.CHANNEL_MESSAGE_FAILED_REMOVE **/
+      DIALOG_MESSAGE_FAILED_REMOVE: 'Remove',
+      /** @deprecated Please use LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA **/
+      DIALOG_ATTACHMENT_CAMERA: 'Camera',
+      /** @deprecated Please use LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY **/
+      DIALOG_ATTACHMENT_PHOTO_LIBRARY: 'Photo library',
+      /** @deprecated Please use LABELS.CHANNEL_INPUT_ATTACHMENT_FILES **/
+      DIALOG_ATTACHMENT_FILES: 'Files',
+      /** @deprecated Please use LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE **/
+      INPUT_PLACEHOLDER_ACTIVE: 'Enter message',
+      /** @deprecated Please use LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED **/
+      INPUT_PLACEHOLDER_DISABLED: 'Chat not available in this channel.',
+      /** @deprecated Please use LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED **/
+      INPUT_PLACEHOLDER_MUTED: "You're muted by the operator.",
+      /** @deprecated Please use LABELS.CHANNEL_INPUT_EDIT_OK **/
+      INPUT_EDIT_OK: 'Save',
+      /** @deprecated Please use LABELS.CHANNEL_INPUT_EDIT_CANCEL **/
+      INPUT_EDIT_CANCEL: 'Cancel',
+      ...overrides?.GROUP_CHANNEL,
+    },
+    GROUP_CHANNEL_SETTINGS: {
+      HEADER_TITLE: 'Channel information',
+      HEADER_RIGHT: 'Edit',
+      MENU_MODERATION: 'Moderation',
+      MENU_MEMBERS: 'Members',
+      MENU_LEAVE_CHANNEL: 'Leave channel',
+      MENU_NOTIFICATION: 'Notifications',
+      MENU_NOTIFICATION_LABEL_ON: 'On',
+      MENU_NOTIFICATION_LABEL_OFF: 'Off',
+      MENU_NOTIFICATION_LABEL_MENTION_ONLY: 'Mentions only',
+      DIALOG_CHANGE_NAME: 'Change channel name',
+      DIALOG_CHANGE_NAME_PROMPT_TITLE: 'Change channel name',
+      DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER: 'Enter name',
+      DIALOG_CHANGE_NAME_PROMPT_OK: 'Save',
+      DIALOG_CHANGE_NAME_PROMPT_CANCEL: 'Cancel',
+      DIALOG_CHANGE_IMAGE: 'Change channel image',
+      DIALOG_CHANGE_IMAGE_MENU_TITLE: 'Change channel image',
+      DIALOG_CHANGE_IMAGE_MENU_CAMERA: 'Take photo',
+      DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY: 'Choose photo',
+      ...overrides?.GROUP_CHANNEL_SETTINGS,
+    },
+    GROUP_CHANNEL_NOTIFICATIONS: {
+      HEADER_TITLE: 'Notifications',
+      MENU_NOTIFICATIONS: 'Notifications',
+      MENU_NOTIFICATIONS_DESC:
+        'Turn on push notifications if you wish to be notified when messages are delivered to this channel.',
+      MENU_NOTIFICATIONS_OPTION_ALL: 'All new messages',
+      MENU_NOTIFICATIONS_OPTION_MENTION_ONLY: 'Mentions only',
+      ...overrides?.GROUP_CHANNEL_NOTIFICATIONS,
+    },
+    GROUP_CHANNEL_MODERATION: {
+      HEADER_TITLE: 'Moderation',
+      MENU_OPERATORS: 'Operators',
+      MENU_MUTED_MEMBERS: 'Muted members',
+      MENU_BANNED_USERS: 'Banned users',
+      MENU_FREEZE_CHANNEL: 'Freeze channel',
+      ...overrides?.GROUP_CHANNEL_MODERATION,
+    },
+    GROUP_CHANNEL_OPERATORS: {
+      HEADER_TITLE: 'Operators',
+      ...overrides?.GROUP_CHANNEL_OPERATORS,
+    },
+    GROUP_CHANNEL_REGISTER_OPERATOR: {
+      HEADER_TITLE: 'Set as operators',
+      HEADER_RIGHT: ({ selectedUsers }) => {
+        const len = selectedUsers.length;
+        if (len === 0) return 'Add';
+        return `Add (${len})`;
+      },
+      ...overrides?.GROUP_CHANNEL_OPERATORS,
+    },
+    GROUP_CHANNEL_MUTED_MEMBERS: {
+      HEADER_TITLE: 'Muted members',
+      ...overrides?.GROUP_CHANNEL_MUTED_MEMBERS,
+    },
+    GROUP_CHANNEL_BANNED_USERS: {
+      HEADER_TITLE: 'Banned users',
+      ...overrides?.GROUP_CHANNEL_BANNED_USERS,
+    },
+    GROUP_CHANNEL_LIST: {
+      HEADER_TITLE: 'Channels',
+      CHANNEL_PREVIEW_TITLE: (currentUserId, channel) =>
+        getGroupChannelTitle(currentUserId, channel, USER_NO_NAME, CHANNEL_NO_MEMBERS),
+      CHANNEL_PREVIEW_TITLE_CAPTION: (channel, locale) => getGroupChannelPreviewTime(channel, locale ?? dateLocale),
+      CHANNEL_PREVIEW_BODY: (channel) => getGroupChannelLastMessage(channel),
+      TYPE_SELECTOR_HEADER_TITLE: 'Channel type',
+      TYPE_SELECTOR_GROUP: 'Group',
+      TYPE_SELECTOR_SUPER_GROUP: 'Super group',
+      TYPE_SELECTOR_BROADCAST: 'Broadcast',
+      DIALOG_CHANNEL_TITLE: (currentUserId, channel) =>
+        getGroupChannelTitle(currentUserId, channel, USER_NO_NAME, CHANNEL_NO_MEMBERS),
+      DIALOG_CHANNEL_NOTIFICATION: (channel) => {
+        if (!channel) return '';
+        if (channel.myPushTriggerOption === 'off') return 'Turn on notifications';
+        return 'Turn off notifications';
+      },
+      DIALOG_CHANNEL_LEAVE: 'Leave channel',
+      ...overrides?.GROUP_CHANNEL_LIST,
+    },
+    GROUP_CHANNEL_MEMBERS: {
+      HEADER_TITLE: 'Members',
+      /** @deprecated Please use LABELS.USER_BAR_ME_POSTFIX **/
+      USER_BAR_ME_POSTFIX: ' (You)',
+      /** @deprecated Please use LABELS.USER_BAR_OPERATOR **/
+      USER_BAR_OPERATOR: 'Operator',
+      ...overrides?.GROUP_CHANNEL_MEMBERS,
+    },
+    GROUP_CHANNEL_CREATE: {
+      HEADER_TITLE: 'New channel',
+      HEADER_RIGHT: ({ selectedUsers }) => {
+        const len = selectedUsers.length;
+        if (len === 0) return 'Create';
+        return `Create (${len})`;
+      },
+      ...overrides?.GROUP_CHANNEL_CREATE,
+    },
+    GROUP_CHANNEL_INVITE: {
+      HEADER_TITLE: 'Invite users',
+      HEADER_RIGHT: ({ selectedUsers }) => {
+        const len = selectedUsers.length;
+        if (len === 0) return 'Invite';
+        return `Invite (${len})`;
+      },
+      ...overrides?.GROUP_CHANNEL_INVITE,
+    },
+    LABELS: {
+      PERMISSION_APP_NAME: 'Application',
+      PERMISSION_CAMERA: 'camera',
+      PERMISSION_DEVICE_STORAGE: 'device storage',
+      USER_NO_NAME,
+      CHANNEL_NO_MEMBERS,
+      TYPING_INDICATOR_TYPINGS: (users, NO_NAME = USER_NO_NAME) => {
+        const userNames = users.map((u) => u.nickname || NO_NAME);
+        if (userNames.length === 0) return;
+        if (userNames.length === 1) return `${userNames[0]} is typing...`;
+        if (users.length === 2) return `${userNames.join(' and ')} are typing...`;
+        return 'Several people are typing...';
+      },
+      USER_BAR_ME_POSTFIX: ' (You)',
+      USER_BAR_OPERATOR: 'Operator',
+      REGISTER_AS_OPERATOR: 'Register as operator',
+      UNREGISTER_OPERATOR: 'Unregister operator',
+      MUTE: 'Mute',
+      UNMUTE: 'Unmute',
+      BAN: 'Ban',
+      UNBAN: 'Unban',
+
+      // Deprecation backward
+      CHANNEL_MESSAGE_COPY: overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_COPY ?? 'Copy',
+      CHANNEL_MESSAGE_EDIT: overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_EDIT ?? 'Edit',
+      CHANNEL_MESSAGE_SAVE: overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_SAVE ?? 'Save',
+      CHANNEL_MESSAGE_DELETE: overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_DELETE ?? 'Delete',
+      CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE:
+        overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE ?? 'Delete message?',
+      CHANNEL_MESSAGE_DELETE_CONFIRM_OK: overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_DELETE_CONFIRM_OK ?? 'Delete',
+      CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL: overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL ?? 'Cancel',
+      CHANNEL_MESSAGE_FAILED_RETRY: overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_FAILED_RETRY ?? 'Retry',
+      CHANNEL_MESSAGE_FAILED_REMOVE: overrides?.GROUP_CHANNEL?.DIALOG_MESSAGE_FAILED_REMOVE ?? 'Remove',
+      CHANNEL_INPUT_ATTACHMENT_CAMERA: overrides?.GROUP_CHANNEL?.DIALOG_ATTACHMENT_CAMERA ?? 'Camera',
+      CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY:
+        overrides?.GROUP_CHANNEL?.DIALOG_ATTACHMENT_PHOTO_LIBRARY ?? 'Photo library',
+      CHANNEL_INPUT_ATTACHMENT_FILES: overrides?.GROUP_CHANNEL?.DIALOG_ATTACHMENT_FILES ?? 'Files',
+      CHANNEL_INPUT_PLACEHOLDER_ACTIVE: overrides?.GROUP_CHANNEL?.INPUT_PLACEHOLDER_ACTIVE ?? 'Enter message',
+      CHANNEL_INPUT_PLACEHOLDER_DISABLED:
+        overrides?.GROUP_CHANNEL?.INPUT_PLACEHOLDER_DISABLED ?? 'Chat not available in this channel.',
+      CHANNEL_INPUT_PLACEHOLDER_MUTED:
+        overrides?.GROUP_CHANNEL?.INPUT_PLACEHOLDER_MUTED ?? "You're muted by the operator.",
+      CHANNEL_INPUT_EDIT_OK: overrides?.GROUP_CHANNEL?.INPUT_EDIT_OK ?? 'Save',
+      CHANNEL_INPUT_EDIT_CANCEL: overrides?.GROUP_CHANNEL?.INPUT_EDIT_CANCEL ?? 'Cancel',
+      ...overrides?.LABELS,
+    },
+    FILE_VIEWER: {
+      TITLE: (message) => message.sender?.nickname || USER_NO_NAME,
+      SUBTITLE: (message) => getMessageTimeFormat(new Date(message.createdAt), dateLocale),
+    },
+    PLACEHOLDER: {
+      NO_BANNED_USERS: 'No banned users',
+      NO_USERS: 'No users',
+      NO_CHANNELS: 'No channels',
+      NO_MESSAGES: 'No messages',
+      NO_MUTED_MEMBERS: 'No muted members',
+      NO_MUTED_PARTICIPANTS: 'No muted participants',
+      NO_RESULTS_FOUND: 'No results found',
+      ...overrides?.PLACEHOLDER,
+      ERROR: {
+        MESSAGE: 'Something went wrong',
+        RETRY_LABEL: 'Retry',
+        ...overrides?.PLACEHOLDER?.ERROR,
+      },
+    },
+    DIALOG: {
+      ALERT_DEFAULT_OK: 'OK',
+      ALERT_PERMISSIONS_TITLE: 'Allow access?',
+      ALERT_PERMISSIONS_MESSAGE: (permission, appName = 'Application') => {
+        return `${appName} need permission to access your ${permission}.`;
+      },
+      ALERT_PERMISSIONS_OK: 'Go to settings',
+      PROMPT_DEFAULT_OK: 'Submit',
+      PROMPT_DEFAULT_CANCEL: 'Cancel',
+      PROMPT_DEFAULT_PLACEHOLDER: 'Enter',
+      ...overrides?.DIALOG,
+    },
+    TOAST: {
+      COPY_OK: 'Copied',
+      DOWNLOAD_START: 'Downloading...',
+      DOWNLOAD_OK: 'File saved',
+      DOWNLOAD_ERROR: "Couldn't download file.",
+      OPEN_CAMERA_ERROR: "Couldn't open camera.",
+      OPEN_FILES_ERROR: "Couldn't open files.",
+      OPEN_PHOTO_LIBRARY_ERROR: "Couldn't open photo library.",
+      DELETE_MSG_ERROR: "Couldn't delete message.",
+      RESEND_MSG_ERROR: "Couldn't send message.",
+      SEND_MSG_ERROR: "Couldn't send message.",
+      UPDATE_MSG_ERROR: "Couldn't edit message.",
+      TURN_ON_NOTIFICATIONS_ERROR: "Couldn't turn on notifications.",
+      TURN_OFF_NOTIFICATIONS_ERROR: "Couldn't turn off notifications.",
+      LEAVE_CHANNEL_ERROR: "Couldn't leave channel.",
+      UNKNOWN_ERROR: 'Something went wrong.',
+      GET_CHANNEL_ERROR: "Couldn't retrieve channel.",
+      ...overrides?.TOAST,
+    },
+    PROFILE_CARD: {
+      BUTTON_MESSAGE: 'Message',
+      BODY_LABEL: 'User ID',
+      BODY: (user) => user.userId,
+      ...overrides?.PROFILE_CARD,
+    },
+  };
+};

package/src/platform/createFileService.native.ts

@@ -76,6 +76,14 @@ const createNativeFileService = ({
     }
     async hasMediaLibraryPermission(): Promise<boolean> {
       const status = await permissionModule.checkMultiple(mediaLibraryPermissions);
+      if (
+        __DEV__ &&
+        Platform.OS === 'ios' &&
+        status['ios.permission.MEDIA_LIBRARY'] === 'unavailable' &&
+        status['ios.permission.PHOTO_LIBRARY'] === 'granted'
+      ) {
+        return true;
+      }
       return nativePermissionGranted(status);
     }
     async requestMediaLibraryPermission(): Promise<boolean> {

package/src/platform/createMediaService.expo.tsx

@@ -1,15 +1,27 @@
 import type * as ExpoAV from 'expo-av';
+import type * as ExpoFS from 'expo-file-system';
+import type * as ExpoImageManipulator from 'expo-image-manipulator';
 import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
 import React from 'react';
 
+import { getDownscaleSize } from '@sendbird/uikit-utils';
+
+import SBUUtils from '../libs/SBUUtils';
 import type { MediaServiceInterface } from './types';
 
 type Modules = {
   avModule: typeof ExpoAV;
   thumbnailModule: typeof ExpoVideoThumbnail;
+  imageManipulator: typeof ExpoImageManipulator;
+  fsModule: typeof ExpoFS;
 };
 
-const createExpoMediaService = ({ avModule, thumbnailModule }: Modules): MediaServiceInterface => {
+const createExpoMediaService = ({
+  avModule,
+  thumbnailModule,
+  imageManipulator,
+  fsModule,
+}: Modules): MediaServiceInterface => {
   return {
     VideoComponent({ source, resizeMode, onLoad, ...props }) {
       // FIXME: type error https://github.com/expo/expo/issues/17101
@@ -24,6 +36,17 @@ const createExpoMediaService = ({ avModule, thumbnailModule }: Modules): MediaSe
         return null;
       }
     },
+    async compressImage({ maxWidth, maxHeight, compressionRate = 1, uri }) {
+      const originSize = await SBUUtils.getImageSize(uri);
+      const resizingSize = getDownscaleSize(originSize, { width: maxWidth, height: maxHeight });
+
+      const { uri: compressedURI } = await imageManipulator.manipulateAsync(uri, [{ resize: resizingSize }], {
+        compress: Math.min(Math.max(0, compressionRate), 1),
+      });
+      const { size = 0 } = await fsModule.getInfoAsync(uri);
+
+      return { uri: compressedURI, size };
+    },
   };
 };
 

package/src/platform/createMediaService.native.tsx

@@ -1,19 +1,24 @@
+import type * as RNImageResizer from '@bam.tech/react-native-image-resizer';
 import React from 'react';
-import type * as CreateThumbnail from 'react-native-create-thumbnail';
-import type Video from 'react-native-video';
+import type * as RNCreateThumbnail from 'react-native-create-thumbnail';
+import type RNVideo from 'react-native-video';
 
+import { getDownscaleSize, getFileExtension, hash } from '@sendbird/uikit-utils';
+
+import SBUUtils from '../libs/SBUUtils';
 import type { MediaServiceInterface } from './types';
 
 type Modules = {
-  VideoComponent: typeof Video;
-  thumbnailModule: typeof CreateThumbnail;
+  VideoComponent: typeof RNVideo;
+  thumbnailModule: typeof RNCreateThumbnail;
+  imageResizerModule: typeof RNImageResizer;
 };
 
-function hash(str: string) {
-  return String(Math.abs(str.split('').reduce((a, c) => ((a << 5) - a + c.charCodeAt(0)) | 0, 0)));
-}
-
-const createNativeMediaService = ({ VideoComponent, thumbnailModule }: Modules): MediaServiceInterface => {
+const createNativeMediaService = ({
+  VideoComponent,
+  thumbnailModule,
+  imageResizerModule,
+}: Modules): MediaServiceInterface => {
   return {
     VideoComponent({ source, resizeMode, onLoad, ...props }) {
       return <VideoComponent {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} controls />;
@@ -31,6 +36,23 @@ const createNativeMediaService = ({ VideoComponent, thumbnailModule }: Modules):
         return null;
       }
     },
+    async compressImage({ uri, maxWidth, maxHeight, compressionRate = 1 }) {
+      const originSize = await SBUUtils.getImageSize(uri);
+      const { width, height } = getDownscaleSize(originSize, { width: maxWidth, height: maxHeight });
+      const extension = (() => {
+        return { 'png': 'PNG', 'jpeg': 'JPEG', 'jpg': 'JPEG' }[getFileExtension(uri)] ?? 'JPEG';
+      })() as 'PNG' | 'JPEG';
+
+      const { size: resizedSize, uri: compressedURI } = await imageResizerModule.default.createResizedImage(
+        uri,
+        width,
+        height,
+        extension,
+        Math.min(Math.max(0, compressionRate), 1) * 100,
+      );
+
+      return { uri: compressedURI, size: resizedSize };
+    },
   };
 };
 

package/src/platform/dynamicModule.ts

@@ -1,43 +1,28 @@
 /* eslint-disable no-console */
-import type RNNetInfo from '@react-native-community/netinfo';
-import { NativeModules } from 'react-native';
-import type RNFastImage from 'react-native-fast-image';
-import type RNFileAccess from 'react-native-file-access';
+import type * as RNCNetInfo from '@react-native-community/netinfo';
+import { NativeModules, UIManager } from 'react-native';
 
 import { Logger } from '@sendbird/uikit-utils';
 
-export interface DynamicModules {
-  'react-native-file-access': typeof RNFileAccess;
-  'react-native-fast-image': typeof RNFastImage;
-  '@react-native-community/netinfo': typeof RNNetInfo;
-}
 export type SBUNativeModule = keyof DynamicModules;
 
 interface SBUDynamicModuleInfo {
   packageName: SBUNativeModule;
-  minVersion: string;
-  moduleName: string;
+  nativeModuleNamespace: string;
   getPackage: <T>(logLevel: 'error' | 'warn' | 'none') => T;
   url: string;
+  isComponent?: boolean;
 }
 
-export function checkVersion(minVersion: string, currentVersion: string) {
-  const [minMajor, minMinor, minPatch] = minVersion.split('.');
-  const [currMajor, currMinor, currPatch] = currentVersion.split('.');
-
-  if (minMajor < currMajor) return true;
-  if (minMajor === currMajor) {
-    if (minMinor < currMinor) return true;
-    if (minMinor === currMinor) {
-      return minPatch <= currPatch;
+function checkLink(dmi: SBUDynamicModuleInfo, logLevel: 'error' | 'warn' | 'none') {
+  const nativeModule = (() => {
+    if (dmi.isComponent) {
+      return UIManager.getViewManagerConfig(dmi.nativeModuleNamespace);
+    } else {
+      return NativeModules[dmi.nativeModuleNamespace];
     }
-    return false;
-  }
-  return false;
-}
+  })();
 
-function checkLink(dmi: SBUDynamicModuleInfo, logLevel: 'error' | 'warn' | 'none') {
-  const nativeModule = NativeModules[dmi.moduleName];
   if (!nativeModule) {
     const message = `[UIKit] Cannot use native module, you should install and link ${dmi.packageName} (${dmi.url})`;
     if (logLevel === 'error') console.error(message);
@@ -45,41 +30,14 @@ function checkLink(dmi: SBUDynamicModuleInfo, logLevel: 'error' | 'warn' | 'none
   }
 }
 
-const SBUDynamicModuleRegistry: Record<SBUNativeModule, SBUDynamicModuleInfo> = {
-  'react-native-file-access': {
-    minVersion: '2.4.3',
-    packageName: 'react-native-file-access',
-    moduleName: 'RNFileAccess',
-    url: 'https://github.com/alpha0010/react-native-file-access',
-    getPackage(logLevel) {
-      checkLink(this, logLevel);
-
-      try {
-        return require('react-native-file-access');
-      } catch (e) {
-        return null;
-      }
-    },
-  },
-  'react-native-fast-image': {
-    minVersion: '8.5.11',
-    packageName: 'react-native-fast-image',
-    moduleName: 'FastImageView',
-    url: 'https://github.com/DylanVann/react-native-fast-image',
-    getPackage(logLevel) {
-      checkLink(this, logLevel);
+export interface DynamicModules {
+  '@react-native-community/netinfo': typeof RNCNetInfo;
+}
 
-      try {
-        return require('react-native-fast-image');
-      } catch (e) {
-        return null;
-      }
-    },
-  },
+const SBUDynamicModuleRegistry: Record<SBUNativeModule, SBUDynamicModuleInfo> = {
   '@react-native-community/netinfo': {
-    minVersion: '9.3.0',
     packageName: '@react-native-community/netinfo',
-    moduleName: 'RNCNetInfo',
+    nativeModuleNamespace: 'RNCNetInfo',
     url: 'https://github.com/react-native-netinfo/react-native-netinfo',
     getPackage(logLevel) {
       checkLink(this, logLevel);
@@ -95,7 +53,7 @@ const SBUDynamicModuleRegistry: Record<SBUNativeModule, SBUDynamicModuleInfo> =
 
 const SBUDynamicModule = {
   register(mdi: SBUDynamicModuleInfo) {
-    SBUDynamicModuleRegistry[mdi.moduleName as SBUNativeModule] = mdi;
+    SBUDynamicModuleRegistry[mdi.nativeModuleNamespace as SBUNativeModule] = mdi;
   },
   getInfo(name: SBUNativeModule) {
     return SBUDynamicModuleRegistry[name] ?? null;

package/src/platform/types.ts

@@ -66,13 +66,35 @@ interface GetVideoThumbnailOptions {
   timeMills?: number;
   quality?: number;
 }
+
+interface CompressImageOptions {
+  /**
+   * A uri of image file to compress
+   * */
+  uri: string;
+
+  /**
+   * A resize width, apply only to downscale
+   * */
+  maxWidth?: number;
+
+  /**
+   * A resize height, apply only to downscale
+   * */
+  maxHeight?: number;
+
+  /**
+   * A value in range 0.0 - 1.0 specifying compression level of the result image.
+   * 1 means highest quality and 0 the lowest quality.
+   * */
+  compressionRate?: number;
+}
+
+type GetVideoThumbnailResult = Promise<{ path: string } | null>;
+type CompressImageResult = Promise<{ uri: string; size: number } | null>;
+
 export interface MediaServiceInterface {
   VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;
-  getVideoThumbnail(options: GetVideoThumbnailOptions): Promise<{ path: string } | null>;
-  // compressImage(options: {
-  //   path: string;
-  //   compressionRate: number;
-  //   resizingWidth: number;
-  //   resizingHeight: number;
-  // }): Promise<{ path: string }>;
+  getVideoThumbnail(options: GetVideoThumbnailOptions): GetVideoThumbnailResult;
+  compressImage(options: CompressImageOptions): CompressImageResult;
 }

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '2.2.0';
+const VERSION = '2.4.0';
 export default VERSION;

package/lib/commonjs/domain/groupChannel/component/GroupChannelInput/EditInput.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["EditInput","forwardRef","ref","text","onChangeText","messageToEdit","setMessageToEdit","onUpdateUserMessage","onSelectionChange","disabled","autoFocus","mentionedUsers","mentionManager","useSendbirdChat","STRINGS","useLocalization","toast","useToast","onPressCancel","onPressSave","isUserMessage","mention","userIds","map","it","user","userId","messageTemplate","textToMentionedMessageTemplate","type","MentionType","USERS","catch","show","TOAST","UPDATE_MSG_ERROR","styles","editInputContainer","inputWrapper","input","GROUP_CHANNEL","INPUT_PLACEHOLDER_ACTIVE","textToMentionedComponents","marginTop","flexDirection","INPUT_EDIT_CANCEL","space","INPUT_EDIT_OK","createStyleSheet","paddingVertical","paddingHorizontal","alignItems","flex","marginRight","minHeight","maxHeight","Platform","select","ios","default","borderRadius"],"sources":["EditInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  NativeSyntheticEvent,\n  Platform,\n  TextInput as RNTextInput,\n  TextInputSelectionChangeEventData,\n  View,\n} from 'react-native';\n\nimport { MentionType } from '@sendbird/chat/message';\nimport { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat } from '../../../../hooks/useContext';\nimport type { MentionedUser } from '../../../../types';\nimport type { GroupChannelProps } from '../../types';\n\ntype EditInputProps = GroupChannelProps['Input'] & {\n  text: string;\n  onChangeText: (val: string) => void;\n  messageToEdit: SendbirdUserMessage | SendbirdFileMessage;\n  setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;\n  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;\n  disabled: boolean;\n  autoFocus: boolean;\n  mentionedUsers: MentionedUser[];\n};\n\nconst EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(\n  {\n    text,\n    onChangeText,\n    messageToEdit,\n    setMessageToEdit,\n    onUpdateUserMessage,\n    onSelectionChange,\n    disabled,\n    autoFocus,\n    mentionedUsers,\n  },\n  ref,\n) {\n  const { mentionManager } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const toast = useToast();\n\n  const onPressCancel = () => {\n    setMessageToEdit();\n    onChangeText('');\n  };\n\n  const onPressSave = () => {\n    if (messageToEdit.isUserMessage()) {\n      const mention = {\n        userIds: mentionedUsers.map((it) => it.user.userId),\n        messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),\n        type: MentionType.USERS,\n      };\n\n      onUpdateUserMessage(text, messageToEdit, mention).catch(() =>\n        toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'),\n      );\n    }\n    setMessageToEdit();\n    onChangeText('');\n  };\n\n  return (\n    <View style={styles.editInputContainer}>\n      <View style={styles.inputWrapper}>\n        <TextInput\n          ref={ref}\n          multiline\n          disableFullscreenUI\n          editable={!disabled}\n          autoFocus={autoFocus}\n          onChangeText={onChangeText}\n          style={styles.input}\n          placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}\n          onSelectionChange={onSelectionChange}\n        >\n          {mentionManager.textToMentionedComponents(text, mentionedUsers)}\n        </TextInput>\n      </View>\n      <View style={{ marginTop: 8, flexDirection: 'row' }}>\n        <Button variant={'text'} onPress={onPressCancel}>\n          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL}\n        </Button>\n        <View style={styles.space} />\n        <Button variant={'contained'} onPress={onPressSave}>\n          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK}\n        </Button>\n      </View>\n    </View>\n  );\n});\n\nconst styles = createStyleSheet({\n  editInputContainer: {\n    paddingVertical: 10,\n    paddingHorizontal: 16,\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  input: {\n    flex: 1,\n    marginRight: 4,\n    minHeight: 36,\n    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),\n    borderRadius: 20,\n  },\n  inputWrapper: {\n    flexDirection: 'row',\n  },\n  space: {\n    flex: 1,\n  },\n});\n\nexport default EditInput;\n"],"mappings":"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"}