From d1ecfd7df455e36021429d06c8d09f7898079c1e Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Mon, 4 Nov 2024 20:44:49 +0530
Subject: [PATCH] fix: attachment picker image picker icon visibility as per
 dependency

---
 .../AttachmentPickerSelectionBar.tsx          | 36 +++++++++++--------
 package/src/components/Channel/Channel.tsx    |  3 +-
 .../components/NativeAttachmentPicker.tsx     |  9 ++++-
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx
index 881d366906..3ec04c79f8 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx
@@ -27,8 +27,14 @@ export const AttachmentPickerSelectionBar = () => {
     setSelectedPicker,
   } = useAttachmentPickerContext();
 
-  const { hasCameraPicker, hasFilePicker, imageUploads, pickFile, takeAndUploadImage } =
-    useMessageInputContext();
+  const {
+    hasCameraPicker,
+    hasFilePicker,
+    hasImagePicker,
+    imageUploads,
+    pickFile,
+    takeAndUploadImage,
+  } = useMessageInputContext();
 
   const {
     theme: {
@@ -53,18 +59,20 @@ export const AttachmentPickerSelectionBar = () => {
 
   return (
     <View style={[styles.container, container, { height: attachmentSelectionBarHeight }]}>
-      <TouchableOpacity
-        hitSlop={{ bottom: 15, top: 15 }}
-        onPress={setImagePicker}
-        testID='upload-photo-touchable'
-      >
-        <View style={[styles.icon, icon]}>
-          <ImageSelectorIcon
-            numberOfImageUploads={imageUploads.length}
-            selectedPicker={selectedPicker}
-          />
-        </View>
-      </TouchableOpacity>
+      {hasImagePicker ? (
+        <TouchableOpacity
+          hitSlop={{ bottom: 15, top: 15 }}
+          onPress={setImagePicker}
+          testID='upload-photo-touchable'
+        >
+          <View style={[styles.icon, icon]}>
+            <ImageSelectorIcon
+              numberOfImageUploads={imageUploads.length}
+              selectedPicker={selectedPicker}
+            />
+          </View>
+        </TouchableOpacity>
+      ) : null}
       {hasFilePicker ? (
         <TouchableOpacity
           hitSlop={{ bottom: 15, top: 15 }}
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
index 3dca20117e..495cafcc21 100644
--- a/package/src/components/Channel/Channel.tsx
+++ b/package/src/components/Channel/Channel.tsx
@@ -84,6 +84,7 @@ import {
   FlatList as FlatListDefault,
   isAudioRecorderAvailable,
   isDocumentPickerAvailable,
+  isImageMediaLibraryAvailable,
   isImagePickerAvailable,
 } from '../../native';
 import * as dbApi from '../../store/apis';
@@ -522,7 +523,7 @@ const ChannelWithContext = <
     hasCommands = true,
     // If pickDocument isn't available, default to hiding the file picker
     hasFilePicker = isDocumentPickerAvailable(),
-    hasImagePicker = true,
+    hasImagePicker = isImagePickerAvailable() || isImageMediaLibraryAvailable(),
     hideDateSeparators = false,
     hideStickyDateHeader = false,
     ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
diff --git a/package/src/components/MessageInput/components/NativeAttachmentPicker.tsx b/package/src/components/MessageInput/components/NativeAttachmentPicker.tsx
index 762a7cb36e..5598004666 100644
--- a/package/src/components/MessageInput/components/NativeAttachmentPicker.tsx
+++ b/package/src/components/MessageInput/components/NativeAttachmentPicker.tsx
@@ -36,6 +36,7 @@ export const NativeAttachmentPicker = ({
     },
   } = useTheme();
   const {
+    hasCameraPicker,
     hasFilePicker,
     hasImagePicker,
     pickAndUploadImageFromNativePicker,
@@ -115,7 +116,13 @@ export const NativeAttachmentPicker = ({
   if (hasFilePicker) {
     buttons.push({ icon: <FileSelectorIcon />, id: 'File', onPressHandler: pickFile });
   }
-  buttons.push({ icon: <CameraSelectorIcon />, id: 'Camera', onPressHandler: takeAndUploadImage });
+  if (hasCameraPicker) {
+    buttons.push({
+      icon: <CameraSelectorIcon />,
+      id: 'Camera',
+      onPressHandler: takeAndUploadImage,
+    });
+  }
 
   return (
     <>