feat: improve attachment picker context usage

Author: khushal87

examples/SampleApp/App.tsx

@@ -169,12 +169,11 @@ const isMessageAIGenerated = (message: LocalMessage) => !!message.ai_generated;
 const DrawerNavigatorWrapper: React.FC<{
   chatClient: StreamChat;
 }> = ({ chatClient }) => {
-  const { bottom } = useSafeAreaInsets();
   const streamChatTheme = useStreamChatTheme();
 
   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

@@ -3,7 +3,7 @@ import { I18nManager, LogBox, Platform, SafeAreaView, useColorScheme, View } fro
 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,
@@ -16,7 +16,6 @@ import {
   Streami18n,
   Thread,
   ThreadContextValue,
-  useAttachmentPickerContext,
   useCreateChatClient,
   useOverlayContext,
 } from 'stream-chat-react-native';
@@ -53,11 +52,7 @@ const filters = {
   type: 'messaging',
 };
 
-const sort: ChannelSort = [
-  { pinned_at: -1 },
-  { last_message_at: -1 },
-  { updated_at: -1 },
-];
+const sort: ChannelSort = [{ pinned_at: -1 }, { last_message_at: -1 }, { updated_at: -1 }];
 
 /**
  * Start playing with streami18n instance here:
@@ -100,7 +95,6 @@ const EmptyHeader = () => <></>;
 const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
   const { channel, setThread, thread } = useContext(AppContext);
   const headerHeight = useHeaderHeight();
-  const { setTopInset } = useAttachmentPickerContext();
   const { overlay } = useOverlayContext();
 
   useEffect(() => {
@@ -109,10 +103,6 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
     });
   }, [overlay, navigation]);
 
-  useEffect(() => {
-    setTopInset(headerHeight);
-  }, [headerHeight, setTopInset]);
-
   if (channel === undefined) {
     return null;
   }
@@ -193,16 +183,13 @@ const Stack = createStackNavigator<NavigationParamsList>();
 type AppContextType = {
   channel: ChannelType | undefined;
   setChannel: React.Dispatch<React.SetStateAction<ChannelType | undefined>>;
-  setThread: React.Dispatch<
-    React.SetStateAction<ThreadContextValue['thread'] | undefined>
-  >;
+  setThread: React.Dispatch<React.SetStateAction<ThreadContextValue['thread'] | undefined>>;
   thread: ThreadContextValue['thread'] | undefined;
 };
 
 const AppContext = React.createContext({} as AppContextType);
 
 const App = () => {
-  const { bottom } = useSafeAreaInsets();
   const theme = useStreamChatTheme();
   const { channel } = useContext(AppContext);
 
@@ -217,11 +204,7 @@ const App = () => {
   }
 
   return (
-    <OverlayProvider
-      bottomInset={bottom}
-      i18nInstance={streami18n}
-      value={{ style: theme }}
-    >
+    <OverlayProvider i18nInstance={streami18n} value={{ style: theme }}>
       <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport>
         <Stack.Navigator
           initialRouteName='ChannelList'

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -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'
@@ -91,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);
@@ -187,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 = () => {
@@ -212,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) {
@@ -246,16 +233,7 @@ export const AttachmentPicker = React.forwardRef(
     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 handleHeight = attachmentPickerBottomSheetHandleHeight;