Merge pull request #101 from sendbird/fix/expo-modules

fix(CLNP-286): expo modules update

Author: bang9

packages/uikit-react-native/package.json

@@ -75,15 +75,15 @@
     "@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-manipulator": "^11.0.0",
-    "expo-image-picker": "^12.0.2",
-    "expo-media-library": "^14.0.1",
-    "expo-notifications": "^0.14.1",
-    "expo-video-thumbnails": "^6.4.0",
+    "expo-av": "^13.2.1",
+    "expo-clipboard": "^4.1.2",
+    "expo-document-picker": "^11.2.2",
+    "expo-file-system": "^15.2.2",
+    "expo-image-manipulator": "^11.1.1",
+    "expo-image-picker": "^14.1.1",
+    "expo-media-library": "^15.2.3",
+    "expo-notifications": "^0.18.1",
+    "expo-video-thumbnails": "^7.2.1",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
     "js-convert-case": "^4.2.0",

packages/uikit-react-native/src/components/ChatFlatList/FlatListInternal.tsx

@@ -1,5 +1,3 @@
-/**
- * */
 import type { ForwardedRef, ReactElement } from 'react';
 import type { FlatListProps, FlatList as RNFlatList, ScrollViewProps } from 'react-native';
 import { Platform } from 'react-native';
@@ -19,8 +17,8 @@ type BidirectionalProps<T> = {
 function shouldUseScrollViewEnhancer() {
   if (Platform.OS !== 'android') return false;
 
-  if (Platform.constants.reactNativeVersion.major < 1) {
-    if (Platform.constants.reactNativeVersion.minor < 72) {
+  if (Platform.constants.reactNativeVersion?.major < 1) {
+    if (Platform.constants.reactNativeVersion?.minor < 72) {
       return true;
     }
   }

packages/uikit-react-native/src/components/ChatFlatList/index.tsx

@@ -16,7 +16,7 @@ type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
   onScrolledAwayFromBottom: (value: boolean) => void;
 };
 // FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}
-const ChatFlatList = forwardRef<RNFlatList, Props>(function CustomFlatList(
+const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
   { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, ...props },
   ref,
 ) {

packages/uikit-react-native/src/platform/createFileService.expo.ts

@@ -6,6 +6,7 @@ import type * as ExpoMediaLibrary from 'expo-media-library';
 import { getFileType } from '@sendbird/uikit-utils';
 
 import SBUError from '../libs/SBUError';
+import expoBackwardUtils from '../utils/expoBackwardUtils';
 import type { ExpoMediaLibraryPermissionResponse, ExpoPermissionResponse } from '../utils/expoPermissionGranted';
 import expoPermissionGranted from '../utils/expoPermissionGranted';
 import normalizeFile from '../utils/normalizeFile';
@@ -76,12 +77,10 @@ const createExpoFileService = ({
         })(),
       });
 
-      if (response.cancelled) return null;
+      if (expoBackwardUtils.toCanceled(response)) return null;
 
-      const { uri } = response;
-      const { size } = await fsModule.getInfoAsync(response.uri);
-
-      return normalizeFile({ uri, size });
+      const filePickerRes = await expoBackwardUtils.toFilePickerResponses(response, fsModule);
+      return filePickerRes[0];
     }
     async openMediaLibrary(options: OpenMediaLibraryOptions) {
       const hasPermission = await this.hasMediaLibraryPermission('read');
@@ -93,7 +92,9 @@ const createExpoFileService = ({
         }
       }
 
+      const selectionLimit = options?.selectionLimit || 1;
       const response = await imagePickerModule.launchImageLibraryAsync({
+        selectionLimit,
         mediaTypes: (() => {
           switch (options?.mediaType) {
             case 'photo':
@@ -107,10 +108,8 @@ const createExpoFileService = ({
           }
         })(),
       });
-      if (response.cancelled) return null;
-      const { uri } = response;
-      const { size } = await fsModule.getInfoAsync(uri);
-      return [await normalizeFile({ uri, size })];
+      if (expoBackwardUtils.toCanceled(response)) return null;
+      return expoBackwardUtils.toFilePickerResponses(response, fsModule);
     }
 
     async openDocument(options?: OpenDocumentOptions): Promise<FilePickerResponse> {

packages/uikit-react-native/src/platform/createMediaService.expo.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { getDownscaleSize } from '@sendbird/uikit-utils';
 
 import SBUUtils from '../libs/SBUUtils';
+import expoBackwardUtils from '../utils/expoBackwardUtils';
 import type { MediaServiceInterface } from './types';
 
 type Modules = {
@@ -43,9 +44,9 @@ const createExpoMediaService = ({
       const { uri: compressedURI } = await imageManipulator.manipulateAsync(uri, [{ resize: resizingSize }], {
         compress: Math.min(Math.max(0, compressionRate), 1),
       });
-      const { size = 0 } = await fsModule.getInfoAsync(uri);
+      const fileInfo = await fsModule.getInfoAsync(uri);
 
-      return { uri: compressedURI, size };
+      return { uri: compressedURI, size: expoBackwardUtils.toFileSize(fileInfo) };
     },
   };
 };

packages/uikit-react-native/src/utils/expoBackwardUtils.ts

@@ -0,0 +1,40 @@
+import type * as ExpoFs from 'expo-file-system';
+import type * as ExpoImagePicker from 'expo-image-picker';
+
+import type { FilePickerResponse } from '../platform/types';
+import normalizeFile from './normalizeFile';
+
+const expoBackwardUtils = {
+  toCanceled(result: ExpoImagePicker.ImagePickerResult) {
+    // @ts-expect-error backward compatibility
+    return result.canceled ?? result.cancelled;
+  },
+  toFileSize(info: ExpoFs.FileInfo) {
+    if ('size' in info) {
+      return info.size;
+    } else {
+      return 0;
+    }
+  },
+  async toFilePickerResponses(
+    result: ExpoImagePicker.ImagePickerResult,
+    fsModule: typeof ExpoFs,
+  ): Promise<FilePickerResponse[]> {
+    if (result.assets) {
+      const assets = result.assets || [];
+      const promises = assets.map(({ fileName: name, fileSize: size, type, uri }) =>
+        normalizeFile({ uri, size, name, type }),
+      );
+
+      return Promise.all(promises);
+    } else if ('uri' in result && typeof result.uri === 'string') {
+      const fileInfo = await fsModule.getInfoAsync(result.uri);
+      const response = await normalizeFile({ uri: result.uri, size: this.toFileSize(fileInfo) });
+      return [response];
+    } else {
+      return [];
+    }
+  },
+};
+
+export default expoBackwardUtils;

packages/uikit-react-native/src/utils/normalizeFile.ts

@@ -21,12 +21,16 @@ const normalizeFile = async ({ uri, size, name, type }: PartialNullable<FileType
 
   if (extension) {
     filename = normalizeFileName(filename, extension);
-    if (!filetype) {
+    if (!filetype || !isNotMimeType(filetype)) {
       filetype = getMimeFromFileExtension(extension);
     }
   }
 
   return { uri, name: filename, type: filetype, size: size ?? 0 };
 };
 
+function isNotMimeType(str: string) {
+  return str.indexOf('/') === -1;
+}
+
 export default normalizeFile;

packages/uikit-utils/src/shared/file.ts

@@ -41,18 +41,28 @@ const EXTENSION_MIME_MAP = {
 export const imageExtRegex = /jpeg|jpg|png|webp|gif/i;
 export const audioExtRegex = /3gp|aac|aax|act|aiff|flac|gsm|m4a|m4b|m4p|tta|wma|mp3|webm|wav/i;
 export const videoExtRegex = /mov|vod|mp4|avi/i;
-export const getFileType = (extOrType: string) => {
-  if (extOrType.indexOf('/') > -1) {
-    const type = extOrType.split('/')[0];
+export const getFileType = (extensionOrType: string) => {
+  const lowerCased = extensionOrType.toLowerCase();
+
+  // mime type
+  if (lowerCased.indexOf('/') > -1) {
+    const type = lowerCased.split('/')[0];
     if (type === 'video') return 'video';
     if (type === 'audio') return 'audio';
     if (type === 'image') return 'image';
     return 'file';
   }
 
-  if (extOrType.match(imageExtRegex)) return 'image';
-  if (extOrType.match(audioExtRegex)) return 'audio';
-  if (extOrType.match(videoExtRegex)) return 'video';
+  // extensions
+  if (lowerCased.match(imageExtRegex)) return 'image';
+  if (lowerCased.match(audioExtRegex)) return 'audio';
+  if (lowerCased.match(videoExtRegex)) return 'video';
+
+  // others
+  if (lowerCased.startsWith('image')) return 'image';
+  if (lowerCased.startsWith('audio')) return 'audio';
+  if (lowerCased.startsWith('video')) return 'video';
+
   return 'file';
 };