stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

package/src/components/Attachment/Gallery.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
@@ -13,7 +13,6 @@ import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius
 import { openUrlSafely } from './utils/openUrlSafely';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
-import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -32,7 +31,7 @@ import {
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
-import { isVideoPlayerAvailable } from '../../native';
+import { isVideoPackageAvailable } from '../../native';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getUrlWithoutParams } from '../../utils/utils';
 
@@ -53,7 +52,7 @@ export type GalleryPropsWithContext<
   > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    | 'additionalPressableProps'
+    | 'additionalTouchableProps'
     | 'legacyImageViewerSwipeBehaviour'
     | 'VideoThumbnail'
     | 'ImageLoadingIndicator'
@@ -84,7 +83,7 @@ const GalleryWithContext = <
   props: GalleryPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    additionalPressableProps,
+    additionalTouchableProps,
     alignment,
     groupStyles,
     hasThreadReplies,
@@ -105,7 +104,6 @@ const GalleryWithContext = <
     VideoThumbnail,
   } = props;
 
-  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       messageSimple: {
@@ -141,7 +139,6 @@ const GalleryWithContext = <
     () =>
       buildGallery({
         images: imagesAndVideos,
-        resizableCDNHosts,
         sizeConfig,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -200,7 +197,7 @@ const GalleryWithContext = <
 
               return (
                 <GalleryThumbnail
-                  additionalPressableProps={additionalPressableProps}
+                  additionalTouchableProps={additionalTouchableProps}
                   borderRadius={borderRadius}
                   colIndex={colIndex}
                   ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
@@ -251,7 +248,7 @@ type GalleryThumbnailProps<
   thumbnail: Thumbnail;
 } & Pick<
   MessagesContextValue<StreamChatGenerics>,
-  | 'additionalPressableProps'
+  | 'additionalTouchableProps'
   | 'legacyImageViewerSwipeBehaviour'
   | 'VideoThumbnail'
   | 'ImageLoadingIndicator'
@@ -267,7 +264,7 @@ type GalleryThumbnailProps<
 const GalleryThumbnail = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  additionalPressableProps,
+  additionalTouchableProps,
   borderRadius,
   colIndex,
   ImageLoadingFailedIndicator,
@@ -315,7 +312,7 @@ const GalleryThumbnail = <
   const defaultOnPress = () => {
     // If the url is defined then only try to open the file.
     if (thumbnail.url) {
-      if (thumbnail.type === FileTypes.Video && !isVideoPlayerAvailable()) {
+      if (thumbnail.type === FileTypes.Video && !isVideoPackageAvailable()) {
         // This condition is kinda unreachable, since we render videos as file attachment if the video
         // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
         openUrlSafely(thumbnail.url);
@@ -326,7 +323,8 @@ const GalleryThumbnail = <
   };
 
   return (
-    <Pressable
+    <TouchableOpacity
+      activeOpacity={0.8}
       disabled={preventPress}
       key={`gallery-item-${message.id}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
       onLongPress={(event) => {
@@ -355,17 +353,16 @@ const GalleryThumbnail = <
           });
         }
       }}
-      style={({ pressed }) => [
+      style={[
         styles.imageContainer,
         {
           height: thumbnail.height,
-          opacity: pressed ? 0.8 : 1,
           width: thumbnail.width,
         },
         imageContainer,
       ]}
       testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}-item-${rowIndex}`}
-      {...additionalPressableProps}
+      {...additionalTouchableProps}
     >
       {thumbnail.type === FileTypes.Video ? (
         <VideoThumbnail
@@ -403,7 +400,7 @@ const GalleryThumbnail = <
           </Text>
         </View>
       ) : null}
-    </Pressable>
+    </TouchableOpacity>
   );
 };
 
@@ -555,7 +552,7 @@ export const Gallery = <
   props: GalleryProps<StreamChatGenerics>,
 ) => {
   const {
-    additionalPressableProps: propAdditionalPressableProps,
+    additionalTouchableProps: propAdditionalTouchableProps,
     alignment: propAlignment,
     groupStyles: propGroupStyles,
     hasThreadReplies,
@@ -590,7 +587,7 @@ export const Gallery = <
     videos: contextVideos,
   } = useMessageContext<StreamChatGenerics>();
   const {
-    additionalPressableProps: contextAdditionalPressableProps,
+    additionalTouchableProps: contextAdditionalTouchableProps,
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
     legacyImageViewerSwipeBehaviour,
@@ -605,7 +602,7 @@ export const Gallery = <
 
   if (!images.length && !videos.length) return null;
 
-  const additionalPressableProps = propAdditionalPressableProps || contextAdditionalPressableProps;
+  const additionalTouchableProps = propAdditionalTouchableProps || contextAdditionalTouchableProps;
   const alignment = propAlignment || contextAlignment;
   const groupStyles = propGroupStyles || contextGroupStyles;
   const onLongPress = propOnLongPress || contextOnLongPress;
@@ -625,7 +622,7 @@ export const Gallery = <
   return (
     <MemoizedGallery
       {...{
-        additionalPressableProps,
+        additionalTouchableProps,
         alignment,
         channelId: message?.cid,
         groupStyles,

package/src/components/Attachment/Giphy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
@@ -151,7 +151,7 @@ export type GiphyPropsWithContext<
   Pick<
     MessagesContextValue<StreamChatGenerics>,
     | 'giphyVersion'
-    | 'additionalPressableProps'
+    | 'additionalTouchableProps'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
   > & {
@@ -164,7 +164,7 @@ const GiphyWithContext = <
   props: GiphyPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    additionalPressableProps,
+    additionalTouchableProps,
     attachment,
     giphyVersion,
     handleAction,
@@ -260,7 +260,7 @@ const GiphyWithContext = <
       </View>
       <View>
         <View style={styles.actionsRow}>
-          <Pressable
+          <TouchableOpacity
             onPress={() => {
               if (actions?.[2].name && actions?.[2].value && handleAction) {
                 handleAction(actions[2].name, actions[2].value);
@@ -274,8 +274,8 @@ const GiphyWithContext = <
             testID={`${actions?.[2].value}-action-button`}
           >
             <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
-          </Pressable>
-          <Pressable
+          </TouchableOpacity>
+          <TouchableOpacity
             onPress={() => {
               if (actions?.[1].name && actions?.[1].value && handleAction) {
                 handleAction(actions[1].name, actions[1].value);
@@ -289,8 +289,8 @@ const GiphyWithContext = <
             testID={`${actions?.[1].value}-action-button`}
           >
             <Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
-          </Pressable>
-          <Pressable
+          </TouchableOpacity>
+          <TouchableOpacity
             onPress={() => {
               if (actions?.[0].name && actions?.[0].value && handleAction) {
                 handleAction(actions[0].name, actions[0].value);
@@ -300,12 +300,12 @@ const GiphyWithContext = <
             testID={`${actions?.[0].value}-action-button`}
           >
             <Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
-          </Pressable>
+          </TouchableOpacity>
         </View>
       </View>
     </View>
   ) : (
-    <Pressable
+    <TouchableOpacity
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {
@@ -333,7 +333,7 @@ const GiphyWithContext = <
         }
       }}
       testID='giphy-attachment'
-      {...additionalPressableProps}
+      {...additionalTouchableProps}
     >
       <View
         style={[
@@ -383,7 +383,7 @@ const GiphyWithContext = <
           </View>
         </View>
       </View>
-    </Pressable>
+    </TouchableOpacity>
   );
 };
 
@@ -451,7 +451,7 @@ export const Giphy = <
   const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
   const { ImageComponent } = useChatContext<StreamChatGenerics>();
-  const { additionalPressableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
+  const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
   const { setMessages, setSelectedMessage } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
 
@@ -466,7 +466,7 @@ export const Giphy = <
   return (
     <MemoizedGiphy
       {...{
-        additionalPressableProps,
+        additionalTouchableProps,
         giphyVersion,
         handleAction,
         ImageComponent,

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -14,16 +14,13 @@ import {
   generateVideoAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+import * as NativeUtils from '../../../native';
 
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
 
-jest.mock('../../../native.ts', () => ({
-  isVideoPlayerAvailable: jest.fn(() => false),
-}));
-
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
   return (
@@ -53,6 +50,7 @@ describe('Attachment', () => {
   });
 
   it('should render File component for "video" type attachment', async () => {
+    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => false));
     const attachment = generateVideoAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -21,6 +21,7 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import * as NativeUtils from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
@@ -80,6 +81,7 @@ describe('Gallery', () => {
   });
 
   it('should render one image and one video attachment', async () => {
+    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => true));
     const attachment1 = generateImageAttachment({
       original_height: 600,
       original_width: 400,

package/src/components/Attachment/utils/buildGallery/buildGallery.ts

@@ -8,10 +8,6 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
-import {
-  chatConfigContextDefaultvalue,
-  ChatConfigContextValue,
-} from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 /**
@@ -34,16 +30,14 @@ export function buildGallery<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
-  resizableCDNHosts = chatConfigContextDefaultvalue.resizableCDNHosts,
   sizeConfig,
-}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
+}: {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   if (images.length === 1) {
     return buildGalleryOfSingleImage({
       image: images[0],
-      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -51,7 +45,6 @@ export function buildGallery<
   if (images.length === 2) {
     return buildGalleryOfTwoImages({
       images,
-      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -59,7 +52,6 @@ export function buildGallery<
   if (images.length === 3) {
     return buildGalleryOfThreeImages({
       images,
-      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -80,7 +72,6 @@ export function buildGallery<
     ],
     images: images.slice(0, 4),
     invertedDirections: true,
-    resizableCDNHosts,
     sizeConfig,
   });
 }

package/src/components/Attachment/utils/buildGallery/buildGalleryOfSingleImage.ts

@@ -4,7 +4,6 @@ import { buildThumbnail } from './buildThumbnail';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
-import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
@@ -68,9 +67,8 @@ export function buildGalleryOfSingleImage<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   image,
-  resizableCDNHosts,
   sizeConfig,
-}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
+}: {
   image: Attachment<StreamChatGenerics>;
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -81,7 +79,6 @@ export function buildGalleryOfSingleImage<
 
   const thumbnail = buildThumbnail({
     image,
-    resizableCDNHosts,
     ...container,
   });
 

package/src/components/Attachment/utils/buildGallery/buildGalleryOfThreeImages.ts

@@ -4,7 +4,6 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
-import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
@@ -24,9 +23,8 @@ export function buildGalleryOfThreeImages<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
-  resizableCDNHosts,
   sizeConfig,
-}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
+}: {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -79,7 +77,6 @@ export function buildGalleryOfThreeImages<
       grid: [[1], [1, 1]],
       images: landscapeImage ? moveToFront(images, landscapeImage) : images,
       invertedDirections: true,
-      resizableCDNHosts,
       sizeConfig,
     });
   } else {
@@ -96,7 +93,6 @@ export function buildGalleryOfThreeImages<
       grid: [[1], [1, 1]],
       images: portraitImage ? moveToFront(images, portraitImage) : images,
       invertedDirections: false,
-      resizableCDNHosts,
       sizeConfig,
     });
   }

package/src/components/Attachment/utils/buildGallery/buildGalleryOfTwoImages.ts

@@ -4,7 +4,6 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
-import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
@@ -12,9 +11,8 @@ export function buildGalleryOfTwoImages<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
-  resizableCDNHosts,
   sizeConfig,
-}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
+}: {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -38,7 +36,6 @@ export function buildGalleryOfTwoImages<
       grid: [[1], [1]],
       images,
       invertedDirections: true,
-      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -56,7 +53,6 @@ export function buildGalleryOfTwoImages<
       grid: [[1, 1]],
       images,
       invertedDirections: true,
-      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -65,7 +61,6 @@ export function buildGalleryOfTwoImages<
     grid: [[2, 1]],
     images: isLandscape1 ? images : images.reverse(),
     invertedDirections: true,
-    resizableCDNHosts,
     sizeConfig,
   });
 }

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -4,30 +4,24 @@ import type { Attachment } from 'stream-chat';
 
 import type { Thumbnail } from './types';
 
-import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
 
-export type BuildThumbnailProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
-  height: number;
-  image: Attachment<StreamChatGenerics>;
-  width: number;
-  resizeMode?: ImageResizeMode;
-};
-
 export function buildThumbnail<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   height,
   image,
-  resizableCDNHosts,
   resizeMode,
   width,
-}: BuildThumbnailProps<StreamChatGenerics>): Thumbnail {
+}: {
+  height: number;
+  image: Attachment<StreamChatGenerics>;
+  width: number;
+  resizeMode?: ImageResizeMode;
+}): Thumbnail {
   const { original_height: originalImageHeight, original_width: originalImageWidth } = image;
 
   // Only resize if the original image is larger than the thumbnail container size.
@@ -47,7 +41,6 @@ export function buildThumbnail<
     url: shouldResize
       ? getResizedImageUrl({
           height,
-          resizableCDNHosts,
           url: imageUrl,
           width,
         })

package/src/components/Attachment/utils/buildGallery/buildThumbnailGrid.ts

@@ -3,8 +3,6 @@ import type { Attachment } from 'stream-chat';
 import { buildThumbnail } from './buildThumbnail';
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig, ThumbnailGrid } from './types';
 
-import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
-
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 /**
@@ -141,9 +139,8 @@ export function buildThumbnailGrid<
   grid,
   images,
   invertedDirections = false,
-  resizableCDNHosts,
   sizeConfig,
-}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
+}: {
   grid: number[][];
   images: Attachment<StreamChatGenerics>[];
   invertedDirections: boolean;
@@ -170,7 +167,6 @@ export function buildThumbnailGrid<
       const thumbnail = buildThumbnail({
         height: tHeight,
         image: currentImage,
-        resizableCDNHosts,
         resizeMode: 'cover',
         width: tWidth,
       });

package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
-import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
 });
 
 type Props = {
-  animatedIndex: SharedValue<number>;
+  animatedIndex: Animated.SharedValue<number>;
 };
 
 export const AttachmentPickerBottomSheetHandle = ({ animatedIndex }: Props) => {

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -5,9 +5,9 @@ import { Alert, ImageBackground, Platform, StyleSheet, Text, View } from 'react-
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 import { lookup } from 'mime-types';
 
+import { useTranslationContext } from '../../../contexts';
 import { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../hooks/useViewport';
 import { Recorder } from '../../../icons';
 import { getLocalAssetUri } from '../../../native';

package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
+import {
+  useChannelContext,
+  useMessagesContext,
+  useOwnCapabilitiesContext,
+} from '../../../contexts';
 import { useAttachmentPickerContext } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -21,14 +26,25 @@ export const AttachmentPickerSelectionBar = () => {
     attachmentSelectionBarHeight,
     CameraSelectorIcon,
     closePicker,
+    CreatePollIcon,
     FileSelectorIcon,
     ImageSelectorIcon,
     selectedPicker,
     setSelectedPicker,
   } = useAttachmentPickerContext();
 
-  const { hasCameraPicker, hasFilePicker, imageUploads, pickFile, takeAndUploadImage } =
-    useMessageInputContext();
+  const {
+    hasCameraPicker,
+    hasFilePicker,
+    imageUploads,
+    openPollCreationDialog,
+    pickFile,
+    sendMessage,
+    takeAndUploadImage,
+  } = useMessageInputContext();
+  const { threadList } = useChannelContext();
+  const { hasCreatePoll } = useMessagesContext();
+  const ownCapabilities = useOwnCapabilitiesContext();
 
   const {
     theme: {
@@ -51,6 +67,12 @@ export const AttachmentPickerSelectionBar = () => {
     pickFile();
   };
 
+  const openPollCreationModal = () => {
+    setSelectedPicker(undefined);
+    closePicker();
+    openPollCreationDialog?.({ sendMessage });
+  };
+
   return (
     <View style={[styles.container, container, { height: attachmentSelectionBarHeight }]}>
       <TouchableOpacity
@@ -93,6 +115,17 @@ export const AttachmentPickerSelectionBar = () => {
           </View>
         </TouchableOpacity>
       ) : null}
+      {!threadList && hasCreatePoll && ownCapabilities.sendPoll ? ( // do not allow poll creation in threads
+        <TouchableOpacity
+          hitSlop={{ bottom: 15, top: 15 }}
+          onPress={openPollCreationModal}
+          testID='create-poll-touchable'
+        >
+          <View style={[styles.icon, icon]}>
+            <CreatePollIcon />
+          </View>
+        </TouchableOpacity>
+      ) : null}
     </View>
   );
 };

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, useState } from 'react';
 import {
-  FlatList,
   LayoutChangeEvent,
   Pressable,
   PressableProps,
@@ -20,6 +19,7 @@ import {
   useSuggestionsContext,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { FlatList } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT = 50;

package/src/components/Avatar/Avatar.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react-native';
 import Svg, { Circle, CircleProps } from 'react-native-svg';
 
-import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
@@ -73,7 +72,6 @@ export const Avatar = (props: AvatarProps) => {
     size,
     testID,
   } = props;
-  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       avatar: { container, image, presenceIndicator, presenceIndicatorContainer },
@@ -122,7 +120,6 @@ export const Avatar = (props: AvatarProps) => {
                       }`
                   : getResizedImageUrl({
                       height: size,
-                      resizableCDNHosts,
                       url: imageProp,
                       width: size,
                     }),