fix: make camera roll usage optional using a channel prop (#3263)

* fix: make camera roll usage optional using a channel prop

* fix: make camera roll usage optional using a channel prop

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -260,7 +260,9 @@ const debounceOptions = {
 };
 
 export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
-  Partial<Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset'>> &
+  Partial<
+    Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset' | 'disableAttachmentPicker'>
+  > &
   Partial<
     Pick<
       AttachmentPickerProps,
@@ -558,6 +560,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     customMessageSwipeAction,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
+    disableAttachmentPicker = !isImageMediaLibraryAvailable(),
     disableKeyboardCompatibleView = false,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch = true,
@@ -1690,10 +1693,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       bottomInset,
       bottomSheetRef,
       closePicker: () => closePicker(bottomSheetRef),
+      disableAttachmentPicker,
       openPicker: () => openPicker(bottomSheetRef),
       topInset,
     }),
-    [bottomInset, bottomSheetRef, closePicker, openPicker, topInset],
+    [bottomInset, bottomSheetRef, closePicker, openPicker, topInset, disableAttachmentPicker],
   );
 
   const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
@@ -1992,7 +1996,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
                     <MessageComposerProvider value={messageComposerContext}>
                       <MessageInputProvider value={inputMessageInputContext}>
                         <View style={{ height: '100%' }}>{children}</View>
-                        {isImageMediaLibraryAvailable() && (
+                        {!disableAttachmentPicker && (
                           <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
                         )}
                       </MessageInputProvider>

package/src/components/MessageInput/AttachButton.tsx

@@ -4,30 +4,32 @@ import { Pressable } from 'react-native';
 
 import { NativeAttachmentPicker } from './components/NativeAttachmentPicker';
 
-import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import {
+  AttachmentPickerContextValue,
+  useAttachmentPickerContext,
+} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Attach } from '../../icons/Attach';
 
-import { isImageMediaLibraryAvailable } from '../../native';
-
 type AttachButtonPropsWithContext = Pick<
   MessageInputContextValue,
   'handleAttachButtonPress' | 'toggleAttachmentPicker'
-> & {
-  disabled?: boolean;
-  /** Function that opens attachment options bottom sheet */
-  handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
-  selectedPicker?: 'images';
-};
+> &
+  Pick<AttachmentPickerContextValue, 'disableAttachmentPicker' | 'selectedPicker'> & {
+    disabled?: boolean;
+    /** Function that opens attachment options bottom sheet */
+    handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
+  };
 
 const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
   const [showAttachButtonPicker, setShowAttachButtonPicker] = useState<boolean>(false);
   const [attachButtonLayoutRectangle, setAttachButtonLayoutRectangle] = useState<LayoutRectangle>();
   const {
+    disableAttachmentPicker,
     disabled = false,
     handleAttachButtonPress,
     handleOnPress,
@@ -73,7 +75,7 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
       handleAttachButtonPress();
       return;
     }
-    if (isImageMediaLibraryAvailable()) {
+    if (!disableAttachmentPicker) {
       toggleAttachmentPicker();
     } else {
       attachButtonHandler();
@@ -132,12 +134,17 @@ export type AttachButtonProps = Partial<AttachButtonPropsWithContext>;
  * UI Component for attach button in MessageInput component.
  */
 export const AttachButton = (props: AttachButtonProps) => {
-  const { selectedPicker } = useAttachmentPickerContext();
+  const { disableAttachmentPicker, selectedPicker } = useAttachmentPickerContext();
   const { handleAttachButtonPress, toggleAttachmentPicker } = useMessageInputContext();
 
   return (
     <MemoizedAttachButton
-      {...{ handleAttachButtonPress, selectedPicker, toggleAttachmentPicker }}
+      {...{
+        disableAttachmentPicker,
+        handleAttachButtonPress,
+        selectedPicker,
+        toggleAttachmentPicker,
+      }}
       {...props}
     />
   );

package/src/components/MessageInput/MessageInput.tsx

@@ -62,11 +62,7 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 
 import { useStateStore } from '../../hooks/useStateStore';
-import {
-  isAudioRecorderAvailable,
-  isImageMediaLibraryAvailable,
-  NativeHandlers,
-} from '../../native';
+import { isAudioRecorderAvailable, NativeHandlers } from '../../native';
 import { AIStates, useAIState } from '../AITypingIndicatorView';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
@@ -112,7 +108,7 @@ const styles = StyleSheet.create({
 
 type MessageInputPropsWithContext = Pick<
   AttachmentPickerContextValue,
-  'bottomInset' | 'selectedPicker'
+  'bottomInset' | 'disableAttachmentPicker' | 'selectedPicker'
 > &
   Pick<ChatContextValue, 'isOnline'> &
   Pick<ChannelContextValue, 'channel' | 'members' | 'threadList' | 'watchers'> &
@@ -207,6 +203,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     cooldownEndsAt,
     CooldownTimer,
     CreatePollContent,
+    disableAttachmentPicker,
     editing,
     Input,
     inputBoxRef,
@@ -564,7 +561,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
       <View style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}>
         <AutoCompleteSuggestionList />
       </View>
-      {isImageMediaLibraryAvailable() && selectedPicker ? (
+      {!disableAttachmentPicker && selectedPicker ? (
         <View
           style={[
             {
@@ -784,7 +781,8 @@ export const MessageInput = (props: MessageInputProps) => {
     uploadNewFile,
     VideoRecorderSelectorIcon,
   } = useMessageInputContext();
-  const { bottomInset, bottomSheetRef, selectedPicker } = useAttachmentPickerContext();
+  const { bottomInset, bottomSheetRef, disableAttachmentPicker, selectedPicker } =
+    useAttachmentPickerContext();
   const messageComposer = useMessageComposer();
   const editing = !!messageComposer.editedMessage;
   const { clearEditingState } = useMessageComposerAPIContext();
@@ -835,6 +833,7 @@ export const MessageInput = (props: MessageInputProps) => {
         CooldownTimer,
         CreatePollContent,
         CreatePollIcon,
+        disableAttachmentPicker,
         editing,
         FileSelectorIcon,
         ImageSelectorIcon,

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -29,6 +29,7 @@ export type AttachmentPickerContextValue = {
   topInset: number;
 
   selectedPicker?: 'images';
+  disableAttachmentPicker?: boolean;
 };
 
 export const AttachmentPickerContext = React.createContext(