feat: add customizability for attachment picker ios select more photos component

docusaurus/docs/reactnative/core-components/overlay-provider.mdx

@@ -242,6 +242,14 @@ Image component within [`AttachmentPickerError`](https://github.com/GetStream/s
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ComponentType | `undefined` \| [`AttachmentPickerErrorImage`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx) |
 
+### `AttachmentPickerIOSSelectMorePhotos`
+
+Component to render select more photos option for selected gallery access in iOS.
+
+| Type          | Default                                                                                                                                                                                                            |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ComponentType | `undefined` \| [`AttachmentPickerIOSSelectMorePhotos`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos.tsx) |
+
 ### `CameraSelectorIcon`
 
 Camera selector component displayed in the attachment selector bar.

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,13 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  BackHandler,
-  Button,
-  Dimensions,
-  Keyboard,
-  Platform,
-  StatusBar,
-  StyleSheet,
-} from 'react-native';
+import { BackHandler, Dimensions, Keyboard, Platform, StatusBar, StyleSheet } from 'react-native';
 
 import BottomSheet, { BottomSheetFlatList, BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
@@ -19,13 +11,8 @@ import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../hooks/useViewport';
-import {
-  getPhotos,
-  iOS14RefreshGallerySelection,
-  oniOS14GalleryLibrarySelectionChange,
-} from '../../native';
+import { getPhotos, oniOS14GalleryLibrarySelectionChange } from '../../native';
 import type { Asset } from '../../types/types';
 
 dayjs.extend(duration);
@@ -57,6 +44,10 @@ export type AttachmentPickerProps = {
    * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
    */
   AttachmentPickerErrorImage: React.ComponentType;
+  /**
+   * Custom UI Component to render select more photos for selected gallery access in iOS.
+   */
+  AttachmentPickerIOSSelectMorePhotos: React.ComponentType;
   /**
    * Custom UI component to render overlay component, that shows up on top of [selected image](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) (with tick mark)
    *
@@ -82,6 +73,7 @@ export const AttachmentPicker = React.forwardRef(
       attachmentPickerErrorButtonText,
       AttachmentPickerErrorImage,
       attachmentPickerErrorText,
+      AttachmentPickerIOSSelectMorePhotos,
       ImageOverlaySelectedComponent,
       numberOfAttachmentImagesToLoadPerCall,
       numberOfAttachmentPickerImageColumns,
@@ -117,7 +109,6 @@ export const AttachmentPicker = React.forwardRef(
     const [loadingPhotos, setLoadingPhotos] = useState(false);
     const [photos, setPhotos] = useState<Asset[]>([]);
     const attemptedToLoadPhotosOnOpenRef = useRef(false);
-    const { t } = useTranslationContext();
 
     const getMorePhotos = useCallback(async () => {
       if (
@@ -323,9 +314,7 @@ export const AttachmentPicker = React.forwardRef(
           ref={ref}
           snapPoints={snapPoints}
         >
-          {iOSLimited && (
-            <Button onPress={iOS14RefreshGallerySelection} title={t('Select More Photos')} />
-          )}
+          {iOSLimited && <AttachmentPickerIOSSelectMorePhotos />}
           <BottomSheetFlatList
             contentContainerStyle={[
               styles.container,

package/src/components/AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button } from 'react-native';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { iOS14RefreshGallerySelection } from '../../../native';
+
+export const AttachmentPickerIOSSelectMorePhotos = () => {
+  const { t } = useTranslationContext();
+  return <Button onPress={iOS14RefreshGallerySelection} title={t('Select More Photos')} />;
+};

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -18,6 +18,7 @@ import { AttachmentPicker } from '../../components/AttachmentPicker/AttachmentPi
 import { AttachmentPickerBottomSheetHandle as DefaultAttachmentPickerBottomSheetHandle } from '../../components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
 import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../components/AttachmentPicker/components/AttachmentPickerError';
 import { AttachmentPickerErrorImage as DefaultAttachmentPickerErrorImage } from '../../components/AttachmentPicker/components/AttachmentPickerErrorImage';
+import { AttachmentPickerIOSSelectMorePhotos as DefaultAttachmentPickerIOSSelectMorePhotos } from '../../components/AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos';
 import { CameraSelectorIcon as DefaultCameraSelectorIcon } from '../../components/AttachmentPicker/components/CameraSelectorIcon';
 import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/AttachmentPicker/components/FileSelectorIcon';
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
@@ -73,6 +74,7 @@ export const OverlayProvider = <
     AttachmentPickerErrorImage = DefaultAttachmentPickerErrorImage,
     attachmentPickerErrorText,
     attachmentSelectionBarHeight,
+    AttachmentPickerIOSSelectMorePhotos = DefaultAttachmentPickerIOSSelectMorePhotos,
     bottomInset,
     CameraSelectorIcon = DefaultCameraSelectorIcon,
     children,
@@ -132,6 +134,7 @@ export const OverlayProvider = <
     attachmentPickerErrorButtonText,
     AttachmentPickerErrorImage,
     attachmentPickerErrorText,
+    AttachmentPickerIOSSelectMorePhotos,
     attachmentSelectionBarHeight,
     ImageOverlaySelectedComponent,
     numberOfAttachmentImagesToLoadPerCall,

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from './components';
 export * from './hooks';
-export { registerNativeHandlers, NetInfo } from './native';
+export { registerNativeHandlers, NetInfo, iOS14RefreshGallerySelection } from './native';
 export * from './contexts';
 export * from './emoji-data';