@sendbird/uikit-react-native 1.1.1 → 1.1.3

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

@@ -1,10 +1,39 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';
 
 import type { FileMessageProps } from './index';
 
+const useRetry = (hasError: boolean, retryCount = 5) => {
+  if (Platform.OS === 'android') return '';
+
+  const forceUpdate = useForceUpdate();
+  const retryCountRef = useRef(1);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (hasError) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            forceUpdate();
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [hasError]);
+
+  return retryCountRef.current;
+};
+
 const ImageFileMessage = ({ message }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
@@ -12,18 +41,28 @@ const ImageFileMessage = ({ message }: FileMessageProps) => {
   const fileUrl = getAvailableUriFromFileMessage(message);
   const style = [styles.image, { backgroundColor: colors.onBackground04 }];
 
-  if (imageNotFound) {
-    return <Icon containerStyle={style} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />;
-  }
+  const key = useRetry(imageNotFound);
 
   return (
-    <Image
-      source={{ uri: fileUrl }}
-      style={style}
-      resizeMode={'cover'}
-      resizeMethod={'resize'}
-      onError={() => setImageNotFound(true)}
-    />
+    <View style={style}>
+      <Image
+        key={key}
+        source={{ uri: fileUrl }}
+        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
+        resizeMode={'cover'}
+        resizeMethod={'resize'}
+        onError={() => setImageNotFound(true)}
+        onLoad={() => setImageNotFound(false)}
+      />
+      {imageNotFound && (
+        <Icon
+          containerStyle={StyleSheet.absoluteFill}
+          icon={'thumbnail-none'}
+          size={48}
+          color={colors.onBackground02}
+        />
+      )}
+    </View>
   );
 };
 
@@ -33,6 +72,10 @@ const styles = createStyleSheet({
     maxWidth: 240,
     height: 160,
     borderRadius: 16,
+    overflow: 'hidden',
+  },
+  hide: {
+    display: 'none',
   },
 });
 

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -7,35 +7,49 @@ import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 import { usePlatformService } from '../../../hooks/useContext';
 import type { FileMessageProps } from './index';
 
-const VideoFileMessage = ({ message }: FileMessageProps) => {
-  const { colors } = useUIKitTheme();
+const useRetry = (videoFileUrl: string, retryCount = 5) => {
+  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
+  const retryCountRef = useRef(0);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
 
   const { mediaService } = usePlatformService();
-  const fileUrl = getAvailableUriFromFileMessage(message);
-  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
 
-  const [state, setState] = useState({
-    thumbnail: null as null | string,
-    loading: true,
-    imageNotFound: false,
-  });
+  const fetchThumbnail = () => {
+    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
+      setState({ loading: false, thumbnail: result?.path ?? null });
+    });
+  };
 
   useEffect(() => {
-    mediaService
-      ?.getVideoThumbnail({ url: fileUrl, timeMills: 1000 })
-      .then((result) => {
-        if (result?.path) {
-          setState((prev) => ({ ...prev, loading: false, thumbnail: result.path }));
-        } else {
-          throw new Error('Cannot generate thumbnail');
+    if (!state.thumbnail) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            fetchThumbnail();
+          }, retryCountRef.current * 5000);
         }
-      })
-      .catch(() => {
-        setState((prev) => ({ ...prev, loading: false, imageNotFound: true }));
-      });
-  }, []);
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [state.thumbnail]);
+
+  return state;
+};
+
+const VideoFileMessage = ({ message }: FileMessageProps) => {
+  const { colors } = useUIKitTheme();
+
+  const fileUrl = getAvailableUriFromFileMessage(message);
+  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
+
+  const { loading, thumbnail } = useRetry(fileUrl);
 
-  if (state.loading || state.imageNotFound) {
+  if (loading) {
     return (
       <View style={[style, styles.container]}>
         <PlayIcon />
@@ -45,13 +59,7 @@ const VideoFileMessage = ({ message }: FileMessageProps) => {
 
   return (
     <View style={styles.container}>
-      <Image
-        source={{ uri: state.thumbnail || fileUrl }}
-        style={style}
-        resizeMode={'cover'}
-        resizeMethod={'resize'}
-        onError={() => setState((prev) => ({ ...prev, imageNotFound: true }))}
-      />
+      <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
       <PlayIcon />
     </View>
   );

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -18,7 +18,7 @@ const MessageIncomingSenderName = ({ message, grouping }: Props) => {
   return (
     <View style={styles.sender}>
       {(message.isFileMessage() || message.isUserMessage()) && (
-        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>
+        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>
           {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}
         </Text>
       )}

package/src/components/MessageRenderer/index.tsx

@@ -107,9 +107,9 @@ const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
             </View>
           )}
           {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}
-          <View>
+          <View style={styles.bubbleContainer}>
             {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}
-            <View style={styles.bubbleContainer}>
+            <View style={styles.bubbleWrapper}>
               {messageComponent}
               {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}
             </View>
@@ -150,6 +150,9 @@ const styles = createStyleSheet({
     maxWidth: 240,
   },
   bubbleContainer: {
+    flexShrink: 1,
+  },
+  bubbleWrapper: {
     flexDirection: 'row',
     alignItems: 'flex-end',
   },

package/src/contexts/SendbirdChat.tsx

@@ -91,7 +91,7 @@ export const SendbirdChatProvider = ({
     const listener = (status: AppStateStatus) => {
       // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
       if (status === 'active') sdkInstance.getConnectionState() === 'CLOSED' && sdkInstance.setForegroundState();
-      else sdkInstance.getConnectionState() === 'OPEN' && sdkInstance.setBackgroundState();
+      else if (status === 'background') sdkInstance.getConnectionState() === 'OPEN' && sdkInstance.setBackgroundState();
     };
 
     const subscriber = AppState.addEventListener('change', listener);

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

@@ -5,6 +5,7 @@ import {
   Icon,
   TextInput,
   createStyleSheet,
+  useAlert,
   useBottomSheet,
   useToast,
   useUIKitTheme,
@@ -12,6 +13,8 @@ import {
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService } from '../../../../hooks/useContext';
+import SBUError from '../../../../libs/SBUError';
+import SBUUtils from '../../../../libs/SBUUtils';
 import type { GroupChannelProps } from '../../types';
 
 type SendInputProps = GroupChannelProps['Input'] & {
@@ -21,9 +24,10 @@ type SendInputProps = GroupChannelProps['Input'] & {
 };
 const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }: SendInputProps) => {
   const { STRINGS } = useLocalization();
-  const { openSheet } = useBottomSheet();
   const { fileService } = usePlatformService();
   const { colors } = useUIKitTheme();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
   const toast = useToast();
 
   const onPressSend = () => {
@@ -39,7 +43,17 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
           onPress: async () => {
             const photo = await fileService.openCamera({
               mediaType: 'all',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+              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'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
             });
 
             if (photo) {
@@ -54,7 +68,17 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
             const photo = await fileService.openMediaLibrary({
               selectionLimit: 1,
               mediaType: 'all',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+              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'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
             });
 
             if (photo && photo[0]) {
@@ -67,7 +91,7 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
           icon: 'document',
           onPress: async () => {
             const file = await fileService.openDocument({
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
+              onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
             });
 
             if (file) {

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

@@ -15,7 +15,7 @@ const GroupChannelSettingsInfo = (_: GroupChannelSettingsProps['Info']) => {
   const { STRINGS } = useLocalization();
 
   if (!currentUser) {
-    Logger.warn('Cannot render GroupChannelSettingsInfo, User is not connected');
+    Logger.warn('Cannot render GroupChannelSettingsInfo, please connect using `useConnection()` hook first');
     return null;
   }
 

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

@@ -1,7 +1,7 @@
 import React, { createContext, useCallback } from 'react';
 
 import { useActiveGroupChannel, useChannelHandler } from '@sendbird/uikit-chat-hooks';
-import { useActionMenu, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
+import { useActionMenu, useAlert, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
 import {
   NOOP,
   SendbirdGroupChannel,
@@ -14,6 +14,8 @@ import {
 
 import ProviderLayout from '../../../components/ProviderLayout';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
+import SBUError from '../../../libs/SBUError';
+import SBUUtils from '../../../libs/SBUUtils';
 import type { GroupChannelSettingsContextsType, GroupChannelSettingsModule } from '../types';
 
 export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
@@ -32,6 +34,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
   const { STRINGS } = useLocalization();
   const { sdk } = useSendbirdChat();
   const { fileService } = usePlatformService();
+  const { alert } = useAlert();
 
   const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
 
@@ -84,7 +87,17 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
           onPress: async () => {
             const file = await fileService.openCamera({
               mediaType: 'photo',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+              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'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
             });
             if (!file) return;
 
@@ -99,7 +112,17 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
             const files = await fileService.openMediaLibrary({
               selectionLimit: 1,
               mediaType: 'photo',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+              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'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
             });
             if (!files || !files[0]) return;
 

package/src/fragments/createGroupChannelListFragment.tsx

@@ -57,7 +57,7 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
     );
 
     if (!currentUser) {
-      Logger.warn('Cannot render GroupChannelListFragment, User is not connected');
+      Logger.warn('Cannot render GroupChannelListFragment, please connect using `useConnection()` hook first');
       return null;
     }
 

package/src/libs/SBUError.ts

@@ -0,0 +1,26 @@
+enum SBUErrorCode {
+  ERR_UNKNOWN = 90000000,
+
+  // Platform service - 91001000 ~
+  ERR_PERMISSIONS_DENIED = 91001000,
+  ERR_DEVICE_UNAVAILABLE,
+}
+
+export default class SBUError extends Error {
+  static CODE = SBUErrorCode;
+
+  static get UNKNOWN() {
+    return new SBUError(SBUErrorCode.ERR_UNKNOWN);
+  }
+
+  static get PERMISSIONS_DENIED() {
+    return new SBUError(SBUErrorCode.ERR_PERMISSIONS_DENIED);
+  }
+  static get DEVICE_UNAVAILABLE() {
+    return new SBUError(SBUErrorCode.ERR_DEVICE_UNAVAILABLE);
+  }
+
+  constructor(public code: SBUErrorCode, message?: string) {
+    super(message);
+  }
+}

package/src/libs/SBUUtils.ts

@@ -0,0 +1,9 @@
+import { Linking, Platform } from 'react-native';
+
+export default class SBUUtils {
+  static openSettings() {
+    Linking.openSettings().catch(() => {
+      if (Platform.OS === 'ios') Linking.openURL('App-Prefs:root');
+    });
+  }
+}

package/src/localization/StringSet.type.ts

@@ -149,6 +149,11 @@ export interface StringSet {
   };
   DIALOG: {
     ALERT_DEFAULT_OK: string;
+
+    ALERT_PERMISSIONS_TITLE: string;
+    ALERT_PERMISSIONS_MESSAGE: (permission: string, appName: string) => string;
+    ALERT_PERMISSIONS_OK: string;
+
     PROMPT_DEFAULT_OK: string;
     PROMPT_DEFAULT_CANCEL: string;
     PROMPT_DEFAULT_PLACEHOLDER: string;
@@ -316,6 +321,11 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
     },
     DIALOG: {
       ALERT_DEFAULT_OK: 'OK',
+      ALERT_PERMISSIONS_TITLE: 'Allow permission',
+      ALERT_PERMISSIONS_MESSAGE: (permission, appName = 'Application') => {
+        return `${appName} need permission to access your ${permission}. Go to Settings to allow access`;
+      },
+      ALERT_PERMISSIONS_OK: 'SETTINGS',
       PROMPT_DEFAULT_OK: 'Submit',
       PROMPT_DEFAULT_CANCEL: 'Cancel',
       PROMPT_DEFAULT_PLACEHOLDER: 'Enter',

package/src/platform/createFileService.expo.ts

@@ -5,6 +5,7 @@ import type * as ExpoMediaLibrary from 'expo-media-library';
 
 import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
 
+import SBUError from '../libs/SBUError';
 import type { ExpoMediaLibraryPermissionResponse, ExpoPermissionResponse } from '../utils/expoPermissionGranted';
 import expoPermissionGranted from '../utils/expoPermissionGranted';
 import fileTypeGuard from '../utils/fileTypeGuard';
@@ -55,7 +56,7 @@ const createExpoFileService = ({
       if (!hasPermission) {
         const granted = await this.requestCameraPermission();
         if (!granted) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);
           return null;
         }
       }
@@ -89,7 +90,7 @@ const createExpoFileService = ({
       if (!hasPermission) {
         const granted = await this.requestMediaLibraryPermission('read');
         if (!granted) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);
           return null;
         }
       }
@@ -123,8 +124,8 @@ const createExpoFileService = ({
         if (response.type === 'cancel') return null;
         const { mimeType, uri, size, name } = response;
         return fileTypeGuard({ uri, size, name, type: mimeType });
-      } catch {
-        options?.onOpenFailureWithToastMessage?.();
+      } catch (e) {
+        options?.onOpenFailure?.(SBUError.UNKNOWN, e);
         return null;
       }
     }

package/src/platform/createFileService.native.ts

@@ -7,7 +7,9 @@ import type * as Permissions from 'react-native-permissions';
 import type { Permission } from 'react-native-permissions';
 
 import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
+import { normalizeFileName } from '@sendbird/uikit-utils/src/shared/regex';
 
+import SBUError from '../libs/SBUError';
 import fileTypeGuard from '../utils/fileTypeGuard';
 import nativePermissionGranted from '../utils/nativePermissionGranted';
 import type {
@@ -87,12 +89,13 @@ const createNativeFileService = ({
       if (!hasPermission) {
         const granted = await this.requestCameraPermission();
         if (!granted) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);
           return null;
         }
       }
 
       const response = await imagePickerModule.launchCamera({
+        presentationStyle: 'fullScreen',
         cameraType: options?.cameraType ?? 'back',
         mediaType: (() => {
           switch (options?.mediaType) {
@@ -109,7 +112,7 @@ const createNativeFileService = ({
       });
       if (response.didCancel) return null;
       if (response.errorCode === 'camera_unavailable') {
-        options?.onOpenFailureWithToastMessage?.();
+        options?.onOpenFailure?.(SBUError.DEVICE_UNAVAILABLE, new Error(response.errorMessage));
         return null;
       }
 
@@ -126,12 +129,13 @@ const createNativeFileService = ({
       if (!hasPermission) {
         const granted = await this.requestMediaLibraryPermission();
         if (!granted) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);
           return null;
         }
       }
 
       const response = await imagePickerModule.launchImageLibrary({
+        presentationStyle: 'fullScreen',
         selectionLimit,
         mediaType: (() => {
           switch (options?.mediaType) {
@@ -148,7 +152,7 @@ const createNativeFileService = ({
       });
       if (response.didCancel) return null;
       if (response.errorCode === 'camera_unavailable') {
-        options?.onOpenFailureWithToastMessage?.();
+        options?.onOpenFailure?.(SBUError.DEVICE_UNAVAILABLE, new Error(response.errorMessage));
         return null;
       }
 
@@ -162,7 +166,7 @@ const createNativeFileService = ({
         return fileTypeGuard({ uri, size, name, type });
       } catch (e) {
         if (!documentPickerModule.isCancel(e) && documentPickerModule.isInProgress(e)) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.UNKNOWN, e);
         }
         return null;
       }
@@ -186,13 +190,18 @@ const createNativeFileService = ({
       await fsModule.FileSystem.fetch(options.fileUrl, { path: downloadPath });
       const fileType = getFileType(getFileExtension(options.fileUrl));
 
-      if (Platform.OS === 'ios' && fileType.match(/image|video/)) {
-        await mediaLibraryModule.save(downloadPath);
+      if (Platform.OS === 'ios' && (fileType === 'image' || fileType === 'video')) {
+        const type = ({ 'image': 'photo', 'video': 'video' } as const)[fileType];
+        await mediaLibraryModule.save(downloadPath, { type });
       }
 
       if (Platform.OS === 'android') {
         const dirType = { 'file': 'downloads', 'audio': 'audio', 'image': 'images', 'video': 'video' } as const;
-        await fsModule.FileSystem.cpExternal(downloadPath, options.fileName, dirType[fileType]);
+        await fsModule.FileSystem.cpExternal(
+          downloadPath,
+          normalizeFileName(options.fileName, getFileExtension(options.fileUrl)),
+          dirType[fileType],
+        );
       }
       return downloadPath;
     }

package/src/platform/types.ts

@@ -1,3 +1,5 @@
+import type SBUError from '../libs/SBUError';
+
 export type Unsubscribe = () => void | undefined;
 export type DownloadedPath = string;
 export type FilePickerResponse = FileType | null;
@@ -23,7 +25,7 @@ export interface ClipboardServiceInterface {
 export interface FileServiceInterface extends FilePickerServiceInterface, FileSystemServiceInterface {}
 
 export interface OpenResultListener {
-  onOpenFailureWithToastMessage?: () => void;
+  onOpenFailure?: (error: SBUError, originError?: unknown) => void;
 }
 export interface OpenMediaLibraryOptions extends OpenResultListener {
   selectionLimit?: number;

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '1.1.1';
+const VERSION = '1.1.3';
 export default VERSION;