@sendbird/uikit-react-native 2.2.0 → 2.3.0

package/src/containers/SendbirdUIKitContainer.tsx

@@ -30,6 +30,8 @@ import type { UIKitFeaturesInSendbirdChatContext } from '../contexts/SendbirdCha
 import { SendbirdChatProvider } from '../contexts/SendbirdChatCtx';
 import { UserProfileProvider } from '../contexts/UserProfileCtx';
 import EmojiManager from '../libs/EmojiManager';
+import type { ImageCompressionConfigInterface } from '../libs/ImageCompressionConfig';
+import ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
 import MentionManager from '../libs/MentionManager';
@@ -57,6 +59,7 @@ export const SendbirdUIKit = Object.freeze({
     CHANNEL_LIST_MESSAGE_RECEIPT_STATUS: false,
     USE_USER_ID_FOR_NICKNAME: false,
     USER_MENTION: false,
+    IMAGE_COMPRESSION: true,
   },
 });
 
@@ -66,7 +69,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     file: FileServiceInterface;
     notification: NotificationServiceInterface;
     clipboard: ClipboardServiceInterface;
-    media?: MediaServiceInterface;
+    media: MediaServiceInterface;
   };
   chatOptions?: {
     localCacheStorage?: LocalCacheStorage;
@@ -82,6 +85,10 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     defaultHeaderHeight?: number;
     HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
   };
+  errorBoundary?: {
+    onError?: (props: ErrorBoundaryProps) => void;
+    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+  };
   toast?: {
     dismissTimeout?: number;
   };
@@ -93,10 +100,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
   userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
-  errorBoundary?: {
-    onError?: (props: ErrorBoundaryProps) => void;
-    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
-  };
+  imageCompression?: Partial<ImageCompressionConfigInterface>;
 }>;
 
 const SendbirdUIKitContainer = ({
@@ -106,10 +110,11 @@ const SendbirdUIKitContainer = ({
   platformServices,
   localization,
   styles,
+  errorBoundary,
   toast,
   userProfile,
   userMention,
-  errorBoundary,
+  imageCompression,
 }: SendbirdUIKitContainerProps) => {
   const defaultStringSet = localization?.stringSet ?? StringSetEn;
 
@@ -125,7 +130,9 @@ const SendbirdUIKitContainer = ({
     unsubscribes.current = sendbird.unsubscribes;
     return sendbird.chatSDK;
   });
+
   const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
+
   const mentionManager = useMemo(() => {
     const config = new MentionConfig({
       mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
@@ -137,6 +144,16 @@ const SendbirdUIKitContainer = ({
     return new MentionManager(config, chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION);
   }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
 
+  const imageCompressionConfig = useMemo(
+    () =>
+      new ImageCompressionConfig({
+        compressionRate: imageCompression?.compressionRate || ImageCompressionConfig.DEFAULT.COMPRESSION_RATE,
+        width: imageCompression?.width,
+        height: imageCompression?.height,
+      }),
+    [imageCompression?.compressionRate, imageCompression?.width, imageCompression?.height],
+  );
+
   useLayoutEffect(() => {
     if (!isFirstMount) {
       const sendbird = initializeSendbird(appId, internalStorage, chatOptions?.onInitialized);
@@ -161,6 +178,7 @@ const SendbirdUIKitContainer = ({
         sdkInstance={sdkInstance}
         emojiManager={emojiManager}
         mentionManager={mentionManager}
+        imageCompressionConfig={imageCompressionConfig}
         enableAutoPushTokenRegistration={
           chatOptions?.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
         }
@@ -175,6 +193,7 @@ const SendbirdUIKitContainer = ({
           chatOptions?.enableUseUserIdForNickname ?? SendbirdUIKit.DEFAULT.USE_USER_ID_FOR_NICKNAME
         }
         enableUserMention={chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION}
+        enableImageCompression={chatOptions?.enableImageCompression ?? SendbirdUIKit.DEFAULT.IMAGE_COMPRESSION}
       >
         <LocalizationProvider stringSet={defaultStringSet}>
           <PlatformServiceProvider

package/src/contexts/PlatformServiceCtx.tsx

@@ -11,10 +11,17 @@ type Props = React.PropsWithChildren<{
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
-  mediaService?: MediaServiceInterface;
+  mediaService: MediaServiceInterface;
 }>;
 
-export const PlatformServiceContext = React.createContext<Props | null>(null);
+export type PlatformServiceContextType = {
+  fileService: FileServiceInterface;
+  clipboardService: ClipboardServiceInterface;
+  notificationService: NotificationServiceInterface;
+  mediaService: MediaServiceInterface;
+};
+
+export const PlatformServiceContext = React.createContext<PlatformServiceContextType | null>(null);
 export const PlatformServiceProvider = ({
   children,
   fileService,

package/src/contexts/SendbirdChatCtx.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { AppState, AppStateStatus } from 'react-native';
+import React, { useCallback, useState } from 'react';
 
 import { useAppFeatures } from '@sendbird/uikit-chat-hooks';
 import type {
@@ -8,9 +7,10 @@ import type {
   SendbirdUser,
   SendbirdUserUpdateParams,
 } from '@sendbird/uikit-utils';
-import { confirmAndMarkAsDelivered, useForceUpdate } from '@sendbird/uikit-utils';
+import { confirmAndMarkAsDelivered, useAppState, useForceUpdate } from '@sendbird/uikit-utils';
 
 import type EmojiManager from '../libs/EmojiManager';
+import type ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import type MentionManager from '../libs/MentionManager';
 import type { FileType } from '../platform/types';
 
@@ -20,18 +20,21 @@ export interface UIKitFeaturesInSendbirdChatContext {
   enableChannelListMessageReceiptStatus: boolean;
   enableUseUserIdForNickname: boolean;
   enableUserMention: boolean;
+  enableImageCompression: boolean;
 }
 
 interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
   sdkInstance: SendbirdChatSDK;
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  imageCompressionConfig: ImageCompressionConfig;
 }
 
-type Context = {
+export type SendbirdChatContextType = {
   sdk: SendbirdChatSDK;
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  imageCompressionConfig: ImageCompressionConfig;
   currentUser?: SendbirdUser;
   setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
 
@@ -46,6 +49,7 @@ type Context = {
     channelListMessageReceiptStatusEnabled: boolean;
     useUserIdForNicknameEnabled: boolean;
     userMentionEnabled: boolean;
+    imageCompressionEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -55,29 +59,31 @@ type Context = {
   };
 };
 
-export const SendbirdChatContext = React.createContext<Context | null>(null);
+export const SendbirdChatContext = React.createContext<SendbirdChatContextType | null>(null);
 export const SendbirdChatProvider = ({
   children,
   sdkInstance,
   emojiManager,
   mentionManager,
+  imageCompressionConfig,
   enableAutoPushTokenRegistration,
   enableChannelListMessageReceiptStatus,
   enableChannelListTypingIndicator,
   enableUseUserIdForNickname,
   enableUserMention,
+  enableImageCompression,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
   const appFeatures = useAppFeatures(sdkInstance);
 
-  const setCurrentUser: Context['setCurrentUser'] = useCallback((user) => {
+  const setCurrentUser: SendbirdChatContextType['setCurrentUser'] = useCallback((user) => {
     // NOTE: Sendbird SDK handle User object is always same object, so force update after setCurrentUser
     _setCurrentUser(user);
     forceUpdate();
   }, []);
 
-  const updateCurrentUserInfo: Context['updateCurrentUserInfo'] = useCallback(
+  const updateCurrentUserInfo: SendbirdChatContextType['updateCurrentUserInfo'] = useCallback(
     async (nickname, profile) => {
       let user = currentUser;
 
@@ -109,28 +115,24 @@ export const SendbirdChatProvider = ({
     [sdkInstance, currentUser, setCurrentUser],
   );
 
-  const markAsDeliveredWithChannel: Context['markAsDeliveredWithChannel'] = useCallback(
+  const markAsDeliveredWithChannel: SendbirdChatContextType['markAsDeliveredWithChannel'] = useCallback(
     (channel: SendbirdGroupChannel) => {
       if (appFeatures.deliveryReceiptEnabled) confirmAndMarkAsDelivered([channel]);
     },
     [sdkInstance, appFeatures.deliveryReceiptEnabled],
   );
 
-  useEffect(() => {
-    const listener = (status: AppStateStatus) => {
-      // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
-      if (status === 'active') sdkInstance.connectionState === 'CLOSED' && sdkInstance.setForegroundState();
-      else if (status === 'background') sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
-    };
+  useAppState('change', (status) => {
+    // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
+    if (status === 'active') sdkInstance.connectionState === 'CLOSED' && sdkInstance.setForegroundState();
+    else if (status === 'background') sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
+  });
 
-    const subscriber = AppState.addEventListener('change', listener);
-    return () => subscriber.remove();
-  }, [sdkInstance]);
-
-  const value: Context = {
+  const value: SendbirdChatContextType = {
     sdk: sdkInstance,
     emojiManager,
     mentionManager,
+    imageCompressionConfig,
     currentUser,
     setCurrentUser,
 
@@ -144,6 +146,7 @@ export const SendbirdChatProvider = ({
       channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
       useUserIdForNicknameEnabled: enableUseUserIdForNickname,
       userMentionEnabled: enableUserMention,
+      imageCompressionEnabled: enableImageCompression,
     },
   };
 

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

@@ -18,7 +18,7 @@ import {
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining } from '@sendbird/uikit-utils';
+import { conditionChaining, isImage, shouldCompressImage } from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../../../hooks/useContext';
 import SBUError from '../../../../libs/SBUError';
@@ -49,9 +49,9 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   },
   ref,
 ) {
-  const { mentionManager } = useSendbirdChat();
+  const { mentionManager, imageCompressionConfig, features } = useSendbirdChat();
   const { STRINGS } = useLocalization();
-  const { fileService } = usePlatformService();
+  const { fileService, mediaService } = usePlatformService();
   const { colors } = useUIKitTheme();
   const { openSheet } = useBottomSheet();
   const { alert } = useAlert();
@@ -75,13 +75,16 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
           title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA,
           icon: 'camera',
           onPress: async () => {
-            const photo = await fileService.openCamera({
+            const mediaFile = await fileService.openCamera({
               mediaType: 'all',
               onOpenFailure: (error) => {
                 if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
                   alert({
                     title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('camera', 'UIKitSample'),
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_CAMERA,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
                     buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
                   });
                 } else {
@@ -90,8 +93,28 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               },
             });
 
-            if (photo) {
-              onSendFileMessage(photo).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            if (mediaFile) {
+              // Image compression
+              if (
+                isImage(mediaFile.uri, mediaFile.type) &&
+                shouldCompressImage(mediaFile.uri, features.imageCompressionEnabled)
+              ) {
+                await SBUUtils.safeRun(async () => {
+                  const compressed = await mediaService.compressImage({
+                    uri: mediaFile.uri,
+                    maxWidth: imageCompressionConfig.width,
+                    maxHeight: imageCompressionConfig.height,
+                    compressionRate: imageCompressionConfig.compressionRate,
+                  });
+
+                  if (compressed) {
+                    mediaFile.uri = compressed.uri;
+                    mediaFile.size = compressed.size;
+                  }
+                });
+              }
+
+              onSendFileMessage(mediaFile).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
             }
           },
         },
@@ -99,14 +122,17 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
           title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY,
           icon: 'photo',
           onPress: async () => {
-            const photo = await fileService.openMediaLibrary({
+            const mediaFiles = await fileService.openMediaLibrary({
               selectionLimit: 1,
               mediaType: 'all',
               onOpenFailure: (error) => {
                 if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
                   alert({
                     title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('device storage', 'UIKitSample'),
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
                     buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
                   });
                 } else {
@@ -115,8 +141,30 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               },
             });
 
-            if (photo && photo[0]) {
-              onSendFileMessage(photo[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            if (mediaFiles && mediaFiles[0]) {
+              const mediaFile = mediaFiles[0];
+
+              // Image compression
+              if (
+                isImage(mediaFile.uri, mediaFile.type) &&
+                shouldCompressImage(mediaFile.uri, features.imageCompressionEnabled)
+              ) {
+                await SBUUtils.safeRun(async () => {
+                  const compressed = await mediaService.compressImage({
+                    uri: mediaFile.uri,
+                    maxWidth: imageCompressionConfig.width,
+                    maxHeight: imageCompressionConfig.height,
+                    compressionRate: imageCompressionConfig.compressionRate,
+                  });
+
+                  if (compressed) {
+                    mediaFile.uri = compressed.uri;
+                    mediaFile.size = compressed.size;
+                  }
+                });
+              }
+
+              onSendFileMessage(mediaFiles[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
             }
           },
         },
@@ -124,12 +172,32 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
           title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES,
           icon: 'document',
           onPress: async () => {
-            const file = await fileService.openDocument({
+            const documentFile = await fileService.openDocument({
               onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
             });
 
-            if (file) {
-              onSendFileMessage(file).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            if (documentFile) {
+              // Image compression
+              if (
+                isImage(documentFile.uri, documentFile.type) &&
+                shouldCompressImage(documentFile.uri, features.imageCompressionEnabled)
+              ) {
+                await SBUUtils.safeRun(async () => {
+                  const compressed = await mediaService.compressImage({
+                    uri: documentFile.uri,
+                    maxWidth: imageCompressionConfig.width,
+                    maxHeight: imageCompressionConfig.height,
+                    compressionRate: imageCompressionConfig.compressionRate,
+                  });
+
+                  if (compressed) {
+                    documentFile.uri = compressed.uri;
+                    documentFile.size = compressed.size;
+                  }
+                });
+              }
+
+              onSendFileMessage(documentFile).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
             }
           },
         },

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

@@ -24,6 +24,7 @@ const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const,
 
 // FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
 //  To workaround temporarily, change the key for re-mount the component.
+//  -> This will affect to keyboard blur when add/remove first mentioned user.
 const GET_INPUT_KEY = (shouldReset: boolean) => (shouldReset ? 'uikit-input-clear' : 'uikit-input');
 
 // TODO: Refactor 'Edit' mode to clearly

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { Linking, ListRenderItem, Platform, View } from 'react-native';
+import { ListRenderItem, Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
@@ -29,6 +29,7 @@ import ChatFlatList from '../../../components/ChatFlatList';
 import { ReactionAddons } from '../../../components/ReactionAddons';
 import { DEPRECATION_WARNING } from '../../../constants';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
+import SBUUtils from '../../../libs/SBUUtils';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
@@ -281,7 +282,7 @@ const useGetMessagePressActions = ({
           break;
         }
         default: {
-          response.onPress = () => Linking.openURL(msg.url).catch();
+          response.onPress = () => SBUUtils.openURL(msg.url);
           break;
         }
       }

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

@@ -84,7 +84,10 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
                 if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
                   alert({
                     title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('camera', 'UIKitSample'),
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_CAMERA,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
                     buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
                   });
                 } else {
@@ -107,7 +110,10 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
                 if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
                   alert({
                     title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('device storage', 'UIKitSample'),
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
                     buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
                   });
                 } else {

package/src/fragments/createGroupChannelListFragment.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
-import { AppState } from 'react-native';
+import React from 'react';
 
 import { useGroupChannelList } from '@sendbird/uikit-chat-hooks';
-import { PASS, useFreshCallback } from '@sendbird/uikit-utils';
+import { PASS, useAppState, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import GroupChannelPreviewContainer from '../containers/GroupChannelPreviewContainer';
@@ -34,12 +33,9 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
     });
 
     if (features.deliveryReceiptEnabled) {
-      useEffect(() => {
-        const listener = AppState.addEventListener('change', (status) => {
-          if (status === 'active') groupChannels.forEach(markAsDeliveredWithChannel);
-        });
-        return () => listener.remove();
-      }, []);
+      useAppState('change', (status) => {
+        if (status === 'active') groupChannels.forEach(markAsDeliveredWithChannel);
+      });
     }
 
     const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useFreshCallback(

package/src/hooks/useKeyboardStatus.ts

@@ -9,9 +9,14 @@ type KeyboardEvents = {
   hideEvent: KeyboardEventName;
 };
 
+let isLayoutAnimationConfigured = false;
+
 const configureNextLayoutAnimation = (event: KeyboardEvent) => {
-  const config = LayoutAnimation.create(event.duration, event.easing);
-  LayoutAnimation.configureNext(config);
+  if (isLayoutAnimationConfigured) return;
+  const config = LayoutAnimation.create(event.duration, event.easing, LayoutAnimation.Properties.scaleY);
+  isLayoutAnimationConfigured = true;
+  const onEnd = () => (isLayoutAnimationConfigured = false);
+  LayoutAnimation.configureNext(config, onEnd, onEnd);
 };
 
 const { showEvent, hideEvent } = Platform.select<KeyboardEvents>({
@@ -34,12 +39,12 @@ const useKeyboardStatus = () => {
         setKeyboardStatus({ visible: true, height, bottomSpace });
       }),
 
-      Keyboard.addListener(hideEvent, (event) => {
+      Keyboard.addListener(hideEvent, () => {
         const height = 0;
         const bottomSpace = Platform.select({ default: height });
-        const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
+        // const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
 
-        nextLayoutAnimation(event);
+        // nextLayoutAnimation(event);
         setKeyboardStatus({ visible: false, height, bottomSpace });
       }),
     ];

package/src/index.ts

@@ -72,6 +72,7 @@ export type {
   FilePickerResponse,
   FileType,
   NotificationServiceInterface,
+  MediaServiceInterface,
 } from './platform/types';
 
 /** Domain **/

package/src/libs/ImageCompressionConfig.ts

@@ -0,0 +1,31 @@
+import { Logger } from '@sendbird/uikit-utils';
+
+export interface ImageCompressionConfigInterface {
+  compressionRate: number;
+  width?: number;
+  height?: number;
+}
+
+class ImageCompressionConfig {
+  static DEFAULT = {
+    COMPRESSION_RATE: 0.7,
+  };
+
+  constructor(private _config: ImageCompressionConfigInterface) {
+    if (_config.compressionRate > 1) Logger.warn('Compression rate must be in the range of 0.0 - 1.0');
+  }
+
+  get compressionRate() {
+    return Math.min(Math.max(0, this._config.compressionRate), 1);
+  }
+
+  get width() {
+    return this._config.width;
+  }
+
+  get height() {
+    return this._config.height;
+  }
+}
+
+export default ImageCompressionConfig;

package/src/libs/SBUUtils.ts

@@ -1,4 +1,6 @@
-import { Linking, Platform } from 'react-native';
+import { Image, Linking, Platform } from 'react-native';
+
+import { Logger } from '@sendbird/uikit-utils';
 
 export default class SBUUtils {
   static openSettings() {
@@ -6,4 +8,29 @@ export default class SBUUtils {
       if (Platform.OS === 'ios') Linking.openURL('App-Prefs:root');
     });
   }
+
+  static openURL(url: string) {
+    const targetUrl = url.startsWith('http') ? url : 'https://' + url;
+    Linking.openURL(targetUrl).catch((err) => Logger.warn('Cannot open url', err));
+  }
+
+  static getImageSize(uri: string): Promise<{ width: number; height: number }> {
+    return new Promise((resolve, reject) => {
+      Image.getSize(
+        uri,
+        (width, height) => {
+          resolve({ width, height });
+        },
+        (error) => {
+          reject(error);
+        },
+      );
+    });
+  }
+
+  static async safeRun(callback: () => Promise<void>) {
+    try {
+      await callback();
+    } catch (e) {}
+  }
 }

package/src/localization/StringSet.type.ts

@@ -169,6 +169,10 @@ export interface StringSet {
   };
   // UI
   LABELS: {
+    PERMISSION_APP_NAME: string;
+    PERMISSION_CAMERA: string;
+    PERMISSION_DEVICE_STORAGE: string;
+
     USER_NO_NAME: string;
     CHANNEL_NO_MEMBERS: string;
     TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
@@ -391,6 +395,9 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       ...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) => {