chore: pull changes from base branch

Author: khushal87

examples/SampleApp/App.tsx

@@ -169,7 +169,6 @@ const isMessageAIGenerated = (message: LocalMessage) => !!message.ai_generated;
 const DrawerNavigatorWrapper: React.FC<{
   chatClient: StreamChat;
 }> = ({ chatClient }) => {
-  const { bottom } = useSafeAreaInsets();
   const streamChatTheme = useStreamChatTheme();
 
   chatClient.setMessageComposerSetupFunction(({ composer }) => {
@@ -182,7 +181,7 @@ const DrawerNavigatorWrapper: React.FC<{
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <OverlayProvider bottomInset={bottom} value={{ style: streamChatTheme }}>
+      <OverlayProvider value={{ style: streamChatTheme }}>
         <Chat
           client={chatClient}
           enableOfflineSupport

examples/SampleApp/src/components/ScreenHeader.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { CompositeNavigationProp, useNavigation } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAttachmentPickerContext, useTheme } from 'stream-chat-react-native';
+import { useTheme } from 'stream-chat-react-native';
 
 import { ChannelsUnreadCountBadge } from './UnreadCountBadge';
 
@@ -122,13 +122,6 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
     },
   } = useTheme();
   const insets = useSafeAreaInsets();
-  const { setTopInset } = useAttachmentPickerContext();
-
-  useEffect(() => {
-    if (setTopInset) {
-      setTopInset(HEADER_CONTENT_HEIGHT + insets.top);
-    }
-  }, [insets.top, setTopInset]);
 
   return (
     <View

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -1,14 +1,7 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  Channel,
-  Thread,
-  ThreadType,
-  useAttachmentPickerContext,
-  useTheme,
-  useTypingString,
-} from 'stream-chat-react-native';
+import { Channel, Thread, ThreadType, useTheme, useTypingString } from 'stream-chat-react-native';
 import { useStateStore } from 'stream-chat-react-native';
 
 import { ScreenHeader } from '../components/ScreenHeader';
@@ -65,13 +58,6 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
       colors: { white },
     },
   } = useTheme();
-  const { setSelectedImages } = useAttachmentPickerContext();
-
-  useEffect(() => {
-    setSelectedImages([]);
-    return () => setSelectedImages([]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   return (
     <SafeAreaView style={[styles.container, { backgroundColor: white }]}>

examples/TypeScriptMessaging/App.tsx

@@ -11,7 +11,7 @@ import {
 import { DarkTheme, DefaultTheme, NavigationContainer, RouteProp } from '@react-navigation/native';
 import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
 import { useHeaderHeight } from '@react-navigation/elements';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Channel as ChannelType, ChannelSort } from 'stream-chat';
 import {
   Channel,
@@ -24,7 +24,6 @@ import {
   Streami18n,
   Thread,
   ThreadContextValue,
-  useAttachmentPickerContext,
   useChatContext,
   useCreateChatClient,
   useOverlayContext,
@@ -108,7 +107,6 @@ const EmptyHeader = () => <></>;
 const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
   const { channel, setThread } = useContext(AppContext);
   const headerHeight = useHeaderHeight();
-  const { setTopInset } = useAttachmentPickerContext();
   const { overlay } = useOverlayContext();
 
   useEffect(() => {
@@ -117,10 +115,6 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
     });
   }, [overlay, navigation]);
 
-  useEffect(() => {
-    setTopInset(headerHeight);
-  }, [headerHeight, setTopInset]);
-
   if (channel === undefined) {
     return null;
   }
@@ -261,7 +255,6 @@ const NavigatorModule = () => {
 };
 
 const App = () => {
-  const { bottom } = useSafeAreaInsets();
   const theme = useStreamChatTheme();
 
   const chatClient = useCreateChatClient({
@@ -275,7 +268,7 @@ const App = () => {
   }
 
   return (
-    <OverlayProvider bottomInset={bottom} i18nInstance={streami18n} value={{ style: theme }}>
+    <OverlayProvider i18nInstance={streami18n} value={{ style: theme }}>
       <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport>
         <NavigatorModule />
       </Chat>

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { BackHandler, Keyboard, Platform, StyleSheet } from 'react-native';
 
 import BottomSheetOriginal from '@gorhom/bottom-sheet';
@@ -11,10 +11,8 @@ import type { AttachmentPickerErrorProps } from './components/AttachmentPickerEr
 
 import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
 
-import {
-  AttachmentPickerContextValue,
-  useAttachmentPickerContext,
-} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { MessageInputContextValue } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useScreenDimensions } from '../../hooks/useScreenDimensions';
 import { NativeHandlers } from '../../native';
@@ -31,7 +29,7 @@ const styles = StyleSheet.create({
 });
 
 export type AttachmentPickerProps = Pick<
-  AttachmentPickerContextValue,
+  MessageInputContextValue,
   | 'AttachmentPickerBottomSheetHandle'
   | 'attachmentPickerBottomSheetHandleHeight'
   | 'attachmentSelectionBarHeight'
@@ -40,23 +38,27 @@ export type AttachmentPickerProps = Pick<
   /**
    * Custom UI component to render error component while opening attachment picker.
    *
-   * **Default** [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
+   * **Default**
+   * [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
    */
   AttachmentPickerError: React.ComponentType<AttachmentPickerErrorProps>;
   /**
    * Custom UI component to render error image for attachment picker
    *
-   * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
+   * **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)
+   * 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)
    *
-   * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
+   * **Default**
+   * [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
    */
   ImageOverlaySelectedComponent: React.ComponentType;
   attachmentPickerErrorButtonText?: string;
@@ -87,17 +89,8 @@ export const AttachmentPicker = React.forwardRef(
         colors: { white },
       },
     } = useTheme();
-    const {
-      closePicker,
-      maxNumberOfFiles,
-      selectedFiles,
-      selectedImages,
-      selectedPicker,
-      setSelectedFiles,
-      setSelectedImages,
-      setSelectedPicker,
-      topInset,
-    } = useAttachmentPickerContext();
+    const { closePicker, selectedPicker, setSelectedPicker, topInset } =
+      useAttachmentPickerContext();
     const { vh: screenVh } = useScreenDimensions();
 
     const fullScreenHeight = screenVh(100);
@@ -157,7 +150,8 @@ export const AttachmentPicker = React.forwardRef(
       if (!NativeHandlers.oniOS14GalleryLibrarySelectionChange) {
         return;
       }
-      // ios 14 library selection change event is fired when user reselects the images that are permitted to be readable by the app
+      // ios 14 library selection change event is fired when user reselects the images that are permitted to be
+      // readable by the app
       const { unsubscribe } = NativeHandlers.oniOS14GalleryLibrarySelectionChange(() => {
         // we reset the cursor and has next page to true to facilitate fetching of the first page of photos again
         hasNextPageRef.current = true;
@@ -182,8 +176,7 @@ export const AttachmentPicker = React.forwardRef(
       const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
 
       return () => backHandler.remove();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedPicker, closePicker]);
+    }, [selectedPicker, closePicker, setSelectedPicker]);
 
     useEffect(() => {
       const onKeyboardOpenHandler = () => {
@@ -207,8 +200,7 @@ export const AttachmentPicker = React.forwardRef(
           Keyboard.removeListener(keyboardShowEvent, onKeyboardOpenHandler);
         }
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [closePicker, selectedPicker]);
+    }, [closePicker, selectedPicker, setSelectedPicker]);
 
     useEffect(() => {
       if (currentIndex < 0) {
@@ -232,25 +224,21 @@ export const AttachmentPicker = React.forwardRef(
         !loadingPhotos
       ) {
         getMorePhotos();
-        // we do this only once on open for avoiding to request permissions in rationale dialog again and again on Android
+        // we do this only once on open for avoiding to request permissions in rationale dialog again and again on
+        // Android
         attemptedToLoadPhotosOnOpenRef.current = true;
       }
     }, [currentIndex, selectedPicker, getMorePhotos, loadingPhotos]);
 
-    const selectedPhotos = photos.map((asset) => ({
-      asset,
-      ImageOverlaySelectedComponent,
-      maxNumberOfFiles,
-      numberOfAttachmentPickerImageColumns,
-      numberOfUploads: selectedFiles.length + selectedImages.length,
-      selected:
-        selectedImages.some((image) => (image?.uri ? image.uri === asset.uri : false)) ||
-        selectedFiles.some((file) => (file?.uri ? file.uri === asset.uri : false)),
-      selectedFiles,
-      selectedImages,
-      setSelectedFiles,
-      setSelectedImages,
-    }));
+    const selectedPhotos = useMemo(
+      () =>
+        photos.map((asset) => ({
+          asset,
+          ImageOverlaySelectedComponent,
+          numberOfAttachmentPickerImageColumns,
+        })),
+      [photos, ImageOverlaySelectedComponent, numberOfAttachmentPickerImageColumns],
+    );
 
     const handleHeight = attachmentPickerBottomSheetHandleHeight;
 
@@ -301,6 +289,7 @@ export const AttachmentPicker = React.forwardRef(
             numColumns={numberOfAttachmentPickerImageColumns ?? 3}
             onEndReached={photoError ? undefined : getMorePhotos}
             renderItem={renderAttachmentPickerItem}
+            testID={'attachment-picker-list'}
           />
         </BottomSheet>
         {selectedPicker === 'images' && photoError && (