Merge pull request #232 from sendbird/feat/migrate-document-picker

[CLNP-6587] feat: support for RN 0.77+

Author: OnestarLee

docs-validation/1_introduction/NativeModules.tsx

@@ -21,7 +21,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import RNFBMessaging from '@react-native-firebase/messaging';
 import Video from 'react-native-video';
-import * as DocumentPicker from 'react-native-document-picker';
+import * as DocumentPicker from '@react-native-documents/picker';
 import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';

docs-validation/1_introduction/SendYourFirstMessage.tsx

@@ -18,7 +18,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import RNFBMessaging from '@react-native-firebase/messaging';
 import Video from 'react-native-video';
-import * as DocumentPicker from 'react-native-document-picker';
+import * as DocumentPicker from '@react-native-documents/picker';
 import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';

docs-validation/package.json

@@ -11,6 +11,7 @@
     "@bam.tech/react-native-image-resizer": "^3.0.10",
     "@react-native-camera-roll/camera-roll": "^7.8.1",
     "@react-native-clipboard/clipboard": "^1.14.1",
+    "@react-native-documents/picker": "^10.1.0",
     "@react-native-firebase/messaging": "^14.7.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.10.0",
@@ -20,7 +21,6 @@
     "react-native": "0.74.3",
     "react-native-audio-recorder-player": "^3.6.10",
     "react-native-create-thumbnail": "^2.0.0",
-    "react-native-document-picker": "^9.3.0",
     "react-native-file-access": "^3.1.0",
     "react-native-image-picker": "^7.1.2",
     "react-native-mmkv": "^2.12.2",

packages/uikit-react-native/README.md

@@ -165,7 +165,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import RNFBMessaging from '@react-native-firebase/messaging';
 import Video from 'react-native-video';
-import * as DocumentPicker from 'react-native-document-picker';
+import * as DocumentPicker from '@react-native-documents/picker';
 import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';

packages/uikit-react-native/package.json

@@ -71,6 +71,7 @@
     "@react-native-camera-roll/camera-roll": "^7.8.1",
     "@react-native-clipboard/clipboard": "^1.14.1",
     "@react-native-community/netinfo": "^11.3.2",
+    "@react-native-documents/picker": "^10.0.0",
     "@react-native-firebase/app": "^14.4.0",
     "@react-native-firebase/messaging": "^14.4.0",
     "@types/react": "*",
@@ -108,6 +109,7 @@
     "@react-native-camera-roll/camera-roll": ">=5.0.0",
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
+    "@react-native-documents/picker": ">=10.0.0",
     "@react-native-firebase/messaging": ">=14.4.0",
     "@sendbird/chat": "^4.16.0",
     "@sendbird/react-native-scrollview-enhancer": "*",
@@ -145,6 +147,9 @@
     "@react-native-clipboard/clipboard": {
       "optional": true
     },
+    "@react-native-documents/picker": {
+      "optional": true
+    },
     "@react-native-firebase/messaging": {
       "optional": true
     },

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

@@ -1,6 +1,5 @@
 import type { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import { Platform } from 'react-native';
-import type * as DocumentPicker from 'react-native-document-picker';
 import type * as FileAccess from 'react-native-file-access';
 import type * as ImagePicker from 'react-native-image-picker';
 import type * as Permissions from 'react-native-permissions';
@@ -18,6 +17,7 @@ import {
 import SBUError from '../libs/SBUError';
 import nativePermissionGranted from '../utils/nativePermissionGranted';
 import normalizeFile from '../utils/normalizeFile';
+import { DocumentPicker, openDocument } from './openDocument.native';
 import type {
   FilePickerResponse,
   FileServiceInterface,
@@ -52,7 +52,7 @@ const createNativeFileService = ({
   fsModule,
 }: {
   imagePickerModule: typeof ImagePicker;
-  documentPickerModule: typeof DocumentPicker;
+  documentPickerModule: DocumentPicker;
   permissionModule: typeof Permissions;
   mediaLibraryModule: typeof CameraRoll;
   fsModule: typeof FileAccess;
@@ -78,17 +78,20 @@ const createNativeFileService = ({
       const status = await permissionModule.checkMultiple(requiredPermissions);
       return nativePermissionGranted(status);
     }
+
     async requestCameraPermission(): Promise<boolean> {
       const requiredPermissionsStatus = await permissionModule.requestMultiple(requiredPermissions);
       if (!nativePermissionGranted(requiredPermissionsStatus)) return false;
 
       await permissionModule.requestMultiple(optionalPermissions);
       return true;
     }
+
     async hasMediaLibraryPermission(): Promise<boolean> {
       const status = await permissionModule.checkMultiple(mediaLibraryPermissions);
       return nativePermissionGranted(status);
     }
+
     async requestMediaLibraryPermission(): Promise<boolean> {
       const status = await permissionModule.requestMultiple(mediaLibraryPermissions);
       return nativePermissionGranted(status);
@@ -129,6 +132,7 @@ const createNativeFileService = ({
       const { fileName: name, fileSize: size, type, uri } = response.assets?.[0] ?? {};
       return normalizeFile({ uri, size, name, type });
     }
+
     async openMediaLibrary(options?: OpenMediaLibraryOptions): Promise<FilePickerResponse[] | null> {
       /**
        * NOTE: options.selectionLimit {@link https://github.com/react-native-image-picker/react-native-image-picker#options}
@@ -172,17 +176,11 @@ const createNativeFileService = ({
           .map(({ fileName: name, fileSize: size, type, uri }) => normalizeFile({ uri, size, name, type })),
       );
     }
+
     async openDocument(options?: OpenDocumentOptions): Promise<FilePickerResponse> {
-      try {
-        const { uri, size, name, type } = await documentPickerModule.pickSingle();
-        return normalizeFile({ uri, size, name, type });
-      } catch (e) {
-        if (!documentPickerModule.isCancel(e) && documentPickerModule.isInProgress(e)) {
-          options?.onOpenFailure?.(SBUError.UNKNOWN, e);
-        }
-        return null;
-      }
+      return await openDocument(documentPickerModule, options);
     }
+
     async save(options: SaveOptions): Promise<string> {
       const hasPermission = await this.hasMediaLibraryPermission();
       if (!hasPermission) {

packages/uikit-react-native/src/platform/openDocument.native.ts

@@ -0,0 +1,59 @@
+import type * as NewDocumentsPicker from '@react-native-documents/picker';
+import type * as OldDocumentPicker from 'react-native-document-picker';
+
+import { Logger } from '@sendbird/uikit-utils';
+
+import SBUError from '../libs/SBUError';
+import normalizeFile from '../utils/normalizeFile';
+import type { FilePickerResponse, OpenDocumentOptions } from './types';
+
+export type DocumentPicker = typeof OldDocumentPicker | typeof NewDocumentsPicker;
+
+async function openDocumentByOldDocumentPicker(
+  documentPickerModule: typeof OldDocumentPicker,
+  options?: OpenDocumentOptions,
+): Promise<FilePickerResponse> {
+  Logger.warn('please update to @react-native-documents/picker');
+  try {
+    const { uri, size, name, type } = await documentPickerModule.pickSingle();
+    return normalizeFile({ uri, size, name, type });
+  } catch (e) {
+    if (!documentPickerModule.isCancel(e) && documentPickerModule.isInProgress(e)) {
+      options?.onOpenFailure?.(SBUError.UNKNOWN, e);
+    }
+    return null;
+  }
+}
+
+async function openDocumentByNewDocumentsPicker(
+  documentPickerModule: typeof NewDocumentsPicker,
+  options?: OpenDocumentOptions,
+): Promise<FilePickerResponse> {
+  try {
+    const results = await documentPickerModule.pick();
+    const { uri, size, name, type } = results[0];
+    return normalizeFile({ uri, size, name, type });
+  } catch (e) {
+    if (
+      !documentPickerModule.isErrorWithCode(documentPickerModule.errorCodes.OPERATION_CANCELED) &&
+      documentPickerModule.isErrorWithCode(documentPickerModule.errorCodes.IN_PROGRESS)
+    ) {
+      options?.onOpenFailure?.(SBUError.UNKNOWN, e);
+    }
+    return null;
+  }
+}
+
+function isOldModule(documentPicker: DocumentPicker): documentPicker is typeof OldDocumentPicker {
+  return 'pickSingle' in documentPicker && typeof documentPicker.pickSingle === 'function';
+}
+
+export async function openDocument(
+  documentPickerModule: DocumentPicker,
+  options?: OpenDocumentOptions,
+): Promise<FilePickerResponse> {
+  if (isOldModule(documentPickerModule)) {
+    return await openDocumentByOldDocumentPicker(documentPickerModule, options);
+  }
+  return await openDocumentByNewDocumentsPicker(documentPickerModule, options);
+}

sample/ios/Podfile

@@ -6,7 +6,9 @@ require Pod::Executable.execute_command('node', ['-p',
     {paths: [process.argv[1]]},
   )', __dir__]).strip
 
-platform :ios, min_ios_version_supported
+# Since the minimum supported version of @react-native-documents/picker is iOS 14.
+platform :ios, 14
+# platform :ios, min_ios_version_supported
 prepare_react_native_project!
 
 linkage = ENV['USE_FRAMEWORKS']

sample/ios/Podfile.lock

@@ -1044,7 +1044,7 @@ PODS:
     - Yoga
   - react-native-create-thumbnail (2.0.0):
     - React-Core
-  - react-native-document-picker (9.3.1):
+  - react-native-document-picker (10.1.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1510,7 +1510,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../../node_modules/react-native/ReactCommon`)
   - "react-native-cameraroll (from `../../node_modules/@react-native-camera-roll/camera-roll`)"
   - react-native-create-thumbnail (from `../../node_modules/react-native-create-thumbnail`)
-  - react-native-document-picker (from `../../node_modules/react-native-document-picker`)
+  - "react-native-document-picker (from `../../node_modules/@react-native-documents/picker`)"
   - react-native-image-picker (from `../../node_modules/react-native-image-picker`)
   - "react-native-image-resizer (from `../../node_modules/@bam.tech/react-native-image-resizer`)"
   - react-native-mmkv (from `../../node_modules/react-native-mmkv`)
@@ -1650,7 +1650,7 @@ EXTERNAL SOURCES:
   react-native-create-thumbnail:
     :path: "../../node_modules/react-native-create-thumbnail"
   react-native-document-picker:
-    :path: "../../node_modules/react-native-document-picker"
+    :path: "../../node_modules/@react-native-documents/picker"
   react-native-image-picker:
     :path: "../../node_modules/react-native-image-picker"
   react-native-image-resizer:
@@ -1763,7 +1763,7 @@ SPEC CHECKSUMS:
   Permission-PhotoLibrary: 03c52ed95dadfb0f2ba4c7663786cce0c4e0c978
   Permission-PhotoLibraryAddOnly: c4fbf91806bbdc3ed877049bc09fbe58ad9a7c97
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
-  RCT-Folly: 5dc73daec3476616d19e8a53f0156176f7b55461
+  RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
   RCTDeprecation: 4c7eeb42be0b2e95195563c49be08d0b839d22b4
   RCTRequired: d530a0f489699c8500e944fde963102c42dcd0c2
   RCTTypeSafety: b20878506b094fa3d9007d7b9e4be0faa3562499
@@ -1789,7 +1789,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a
   react-native-cameraroll: 4f313ab09aeaf42ac5f72dec840641da7656f104
   react-native-create-thumbnail: ab55d24aea01723cf386f18b0b542aabb1982f27
-  react-native-document-picker: c4f197741c327270453aa9840932098e0064fd52
+  react-native-document-picker: 570a73e1d3a71d2b34e1c7d7d46c7f2e3c14b0cd
   react-native-image-picker: c3afe5472ef870d98a4b28415fc0b928161ee5f7
   react-native-image-resizer: fd0c333eca55147bd55c5e054cac95dcd0da6814
   react-native-mmkv: 8c9a677e64a1ac89b0c6cf240feea528318b3074
@@ -1839,6 +1839,6 @@ SPEC CHECKSUMS:
   Yoga: 04f1db30bb810187397fa4c37dd1868a27af229c
   ZIPFoundation: b8c29ea7ae353b309bc810586181fd073cb3312c
 
-PODFILE CHECKSUM: 854e85b2bbfd7d0e442b6dea393d8c15cb83909e
+PODFILE CHECKSUM: a7dd46320c0e4bc28bcdaa9f6fbf4caf6e4131d4
 
 COCOAPODS: 1.15.2

sample/package.json

@@ -23,6 +23,7 @@
     "@react-native-community/netinfo": "^11.3.2",
     "@react-native-community/push-notification-ios": "^1.11.0",
     "@react-native-community/slider": "^4.2.0",
+    "@react-native-documents/picker": "^10.1.0",
     "@react-native-firebase/app": "^14.7.0",
     "@react-native-firebase/messaging": "^14.7.0",
     "@react-navigation/bottom-tabs": "^6.6.0",
@@ -41,7 +42,6 @@
     "react-native": "0.74.3",
     "react-native-audio-recorder-player": "^3.6.10",
     "react-native-create-thumbnail": "^2.0.0",
-    "react-native-document-picker": "^9.3.0",
     "react-native-fast-image": "^8.6.3",
     "react-native-file-access": "^3.1.0",
     "react-native-image-picker": "^7.1.2",

sample/src/factory/index.ts

@@ -1,12 +1,12 @@
 import * as ImageResizer from '@bam.tech/react-native-image-resizer';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import Clipboard from '@react-native-clipboard/clipboard';
+import * as DocumentPicker from '@react-native-documents/picker';
 import RNFBMessaging from '@react-native-firebase/messaging';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { Platform, StatusBar } from 'react-native';
 import * as AudioRecorderPlayer from 'react-native-audio-recorder-player';
 import * as CreateThumbnail from 'react-native-create-thumbnail';
-import * as DocumentPicker from 'react-native-document-picker';
 import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';