feat: Make the DocumentPicker dependency optional (#1809)

* feat: make the document picker optional

* style: fix lint issues

Author: madsroskar

package/native-package/src/handlers/pickDocument.ts

@@ -1,27 +1,50 @@
-import DocumentPicker from 'react-native-document-picker';
+/**
+ * Types are approximated from what we need from the DocumentPicker API.
+ *
+ * For its full API, see https://github.com/rnmods/react-native-document-picker/blob/master/src/index.tsx
+ * */
+type ResponseValue = {
+  name: string;
+  uri: string;
+  size: number;
+  type: string;
+};
 
-export const pickDocument = async ({ maxNumberOfFiles }: { maxNumberOfFiles: number }) => {
-  try {
-    let res = await DocumentPicker.pickMultiple({
-      type: [DocumentPicker.types.allFiles],
-    });
+let DocumentPicker: {
+  types: { allFiles: string };
+  pickMultiple: (opts?: { type: string[] }) => Promise<ResponseValue[]>;
+};
 
-    if (maxNumberOfFiles && res.length > maxNumberOfFiles) {
-      res = res.slice(0, maxNumberOfFiles);
-    }
+try {
+  DocumentPicker = require('react-native-document-picker').default;
+} catch (err) {
+  console.log('react-native-document-picker is not installed');
+}
 
-    return {
-      cancelled: false,
-      docs: res.map(({ name, size, type, uri }) => ({
-        name,
-        size,
-        type,
-        uri,
-      })),
-    };
-  } catch (err) {
-    return {
-      cancelled: true,
-    };
-  }
-};
+export const pickDocument = DocumentPicker
+  ? async ({ maxNumberOfFiles }: { maxNumberOfFiles: number }) => {
+      try {
+        let res = await DocumentPicker.pickMultiple({
+          type: [DocumentPicker.types.allFiles],
+        });
+
+        if (maxNumberOfFiles && res.length > maxNumberOfFiles) {
+          res = res.slice(0, maxNumberOfFiles);
+        }
+
+        return {
+          cancelled: false,
+          docs: res.map(({ name, size, type, uri }) => ({
+            name,
+            size,
+            type,
+            uri,
+          })),
+        };
+      } catch (err) {
+        return {
+          cancelled: true,
+        };
+      }
+    }
+  : null;

package/src/components/Channel/Channel.tsx

@@ -71,7 +71,7 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { FlatList as FlatListDefault } from '../../native';
+import { FlatList as FlatListDefault, pickDocument } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { generateRandomId, MessageStatusTypes, ReactionData } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
@@ -447,7 +447,8 @@ const ChannelWithContext = <
     handleRetry,
     handleThreadReply,
     hasCommands = true,
-    hasFilePicker = true,
+    // If pickDocument isn't available, default to hiding the file picker
+    hasFilePicker = pickDocument !== null,
     hasImagePicker = true,
     hideDateSeparators = false,
     hideStickyDateHeader = false,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -574,6 +574,13 @@ export const MessageInputProvider = <
   };
 
   const pickFile = async () => {
+    if (pickDocument === null) {
+      console.log(
+        'The file picker is not installed. Check our Getting Started documentation to install it.',
+      );
+      return;
+    }
+
     if (numberOfUploads >= value.maxNumberOfFiles) {
       Alert.alert('Maximum number of files reached');
       return;

package/src/native.ts

@@ -251,7 +251,7 @@ export const registerNativeHandlers = (handlers: Handlers) => {
     getPhotos = handlers.getPhotos;
   }
 
-  if (handlers.pickDocument) {
+  if (handlers.pickDocument !== undefined) {
     pickDocument = handlers.pickDocument;
   }