Merge branch 'develop' of https://github.com/GetStream/stream-chat-react-native into feat/optimistic-db-updates

Author: vishalnarkhede

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

@@ -74,7 +74,7 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { FlatList as FlatListDefault } from '../../native';
+import { FlatList as FlatListDefault, pickDocument } from '../../native';
 import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -455,7 +455,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/components/ImageGallery/components/ImageGrid.tsx

@@ -137,7 +137,7 @@ export const ImageGrid = <
     theme: {
       colors: { white },
       imageGallery: {
-        grid: { contentContainer },
+        grid: { container, contentContainer },
       },
     },
   } = useTheme();
@@ -165,6 +165,7 @@ export const ImageGrid = <
       keyExtractor={(item, index) => `${item.uri}-${index}`}
       numColumns={numberOfImageGalleryGridColumns || 3}
       renderItem={renderItem}
+      style={container}
     />
   );
 };

package/src/components/ImageGallery/components/ImageGridHandle.tsx

@@ -13,8 +13,8 @@ const styles = StyleSheet.create({
   },
   handle: {
     alignItems: 'center',
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
     flexDirection: 'row',
     height: 40,
     justifyContent: 'center',

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -575,6 +575,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/contexts/themeContext/utils/theme.ts

@@ -182,6 +182,7 @@ export type Theme = {
       rightContainer: ViewStyle;
     };
     grid: {
+      container: ViewStyle;
       contentContainer: ViewStyle;
       gridAvatar: ImageStyle;
       gridAvatarWrapper: ViewStyle;
@@ -685,6 +686,7 @@ export const defaultTheme: Theme = {
       rightContainer: {},
     },
     grid: {
+      container: {},
       contentContainer: {},
       gridAvatar: {},
       gridAvatarWrapper: {},

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;
   }