stream-chat-react-native-core 9.4.0-beta.9 → 9.4.0

package/src/components/ImageGallery/hooks/useCurrentImageHeight.ts

@@ -0,0 +1,86 @@
+import { useEffect } from 'react';
+import { Image } from 'react-native';
+import { SharedValue, useSharedValue } from 'react-native-reanimated';
+
+import type {
+  ImageGalleryAsset,
+  ImageGalleryStateStore,
+} from '../../../state-store/image-gallery-state-store';
+import { FileTypes } from '../../../types/types';
+
+/**
+ * Owns a SharedValue tracking the visible height of the currently selected
+ * gallery asset and keeps it in lockstep with the gallery store's
+ * currentIndex. Worklet consumers read `.value` on the UI thread.
+ *
+ * The store is subscribed via `subscribeWithSelector` (not `useStateStore`),
+ * so currentIndex changes never go through React state so no rerender is
+ * triggered in the calling component. The callback writes directly into the
+ * SharedValue.
+ *
+ * Sync path uses the attachment's intrinsic `original_height`/`original_width`
+ * when present. Async fallback via `Image.getSize` handles assets that don't
+ * carry dimensions; a token guards against the closure-race where the user
+ * swipes past a slide before its dimensions resolve.
+ */
+export const useCurrentImageHeight = ({
+  assets,
+  fullWindowHeight,
+  fullWindowWidth,
+  imageGalleryStateStore,
+}: {
+  assets: ImageGalleryAsset[];
+  fullWindowHeight: number;
+  fullWindowWidth: number;
+  imageGalleryStateStore: ImageGalleryStateStore;
+}): SharedValue<number> => {
+  const currentImageHeight = useSharedValue(fullWindowHeight);
+
+  useEffect(() => {
+    let latestToken = 0;
+
+    const compute = (index: number) => {
+      const currentToken = ++latestToken;
+      const photo = assets[index];
+
+      if (photo?.original_height && photo?.original_width) {
+        const h = Math.floor(photo.original_height * (fullWindowWidth / photo.original_width));
+        currentImageHeight.value = h > fullWindowHeight ? fullWindowHeight : h;
+        return;
+      }
+
+      if (photo?.uri && photo.type === FileTypes.Image) {
+        Image.getSize(
+          photo.uri,
+          (width, height) => {
+            // Stale result, currentIndex moved on before getSize resolved.
+            if (currentToken !== latestToken) return;
+            if (!width || !height) {
+              currentImageHeight.value = fullWindowHeight;
+              return;
+            }
+            const imageHeight = Math.floor(height * (fullWindowWidth / width));
+            currentImageHeight.value =
+              imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight;
+          },
+          () => {
+            if (currentToken !== latestToken) return;
+            currentImageHeight.value = fullWindowHeight;
+          },
+        );
+        return;
+      }
+
+      currentImageHeight.value = fullWindowHeight;
+    };
+
+    compute(imageGalleryStateStore.state.getLatestValue().currentIndex);
+
+    return imageGalleryStateStore.state.subscribeWithSelector(
+      (state) => ({ currentIndex: state.currentIndex }),
+      ({ currentIndex }) => compute(currentIndex),
+    );
+  }, [assets, fullWindowHeight, fullWindowWidth, currentImageHeight, imageGalleryStateStore]);
+
+  return currentImageHeight;
+};

package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { Platform } from 'react-native';
 import { Gesture, GestureType } from 'react-native-gesture-handler';
 import {
@@ -14,9 +14,7 @@ import {
 
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
-import { useStateStore } from '../../../hooks';
 import { NativeHandlers } from '../../../native';
-import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 
 export enum HasPinched {
   FALSE = 0,
@@ -31,10 +29,6 @@ export enum IsSwiping {
 
 const MARGIN = 32;
 
-const imageGallerySelector = (state: ImageGalleryState) => ({
-  currentIndex: state.currentIndex,
-});
-
 export const useImageGalleryGestures = ({
   currentImageHeight,
   halfScreenHeight,
@@ -49,7 +43,7 @@ export const useImageGalleryGestures = ({
   translateY,
   translationX,
 }: {
-  currentImageHeight: number;
+  currentImageHeight: SharedValue<number>;
   halfScreenHeight: number;
   halfScreenWidth: number;
   headerFooterVisible: SharedValue<number>;
@@ -62,20 +56,8 @@ export const useImageGalleryGestures = ({
   translateY: SharedValue<number>;
   translationX: SharedValue<number>;
 }) => {
-  /**
-   * if a specific image index > 0 has been passed in
-   * while creating the hook, set the value of the index
-   * reference to its value.
-   *
-   * This makes it possible to seelct an image in the list,
-   * and scroll/pan as normal. Prior to this,
-   * it was always assumed that one started at index 0 in the
-   * gallery.
-   * */
   const { imageGalleryStateStore } = useImageGalleryContext();
-  const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
-
-  const [index, setIndex] = useState(currentIndex);
+  const currentIndexShared = imageGalleryStateStore.currentIndexShared;
 
   /**
    * Gesture handler refs
@@ -163,13 +145,16 @@ export const useImageGalleryGestures = ({
   };
 
   const moveToNextImage = () => {
-    runOnJS(setIndex)(index + 1);
-    imageGalleryStateStore.currentIndex = index + 1;
+    // Read fresh — both moveToNext/Previous are invoked via runOnJS from a
+    // worklet, so we'd otherwise be using a value captured at hook-creation
+    // time. The setter mirrors into currentIndexShared.
+    const currentIndex = imageGalleryStateStore.state.getLatestValue().currentIndex;
+    imageGalleryStateStore.currentIndex = currentIndex + 1;
   };
 
   const moveToPreviousImage = () => {
-    runOnJS(setIndex)(index - 1);
-    imageGalleryStateStore.currentIndex = index - 1;
+    const currentIndex = imageGalleryStateStore.state.getLatestValue().currentIndex;
+    imageGalleryStateStore.currentIndex = currentIndex - 1;
   };
 
   /**
@@ -221,7 +206,7 @@ export const useImageGalleryGestures = ({
          * true, or false and is reset on releasing the touch
          */
         if (isSwiping.value === IsSwiping.UNDETERMINED) {
-          const maxXYRatio = isAndroid ? 1 : 0.25;
+          const maxXYRatio = 0.25;
           if (
             Math.abs(event.translationX / event.translationY) > maxXYRatio &&
             (Math.abs(-halfScreenWidth * (scale.value - 1) - offsetX.value) < 3 ||
@@ -261,16 +246,17 @@ export const useImageGalleryGestures = ({
          * If swiping down start scaling down the image for swipe
          * away effect
          */
+        const imageHeight = currentImageHeight.value;
         scale.value =
-          currentImageHeight * offsetScale.value < screenHeight && translateY.value > 0
+          imageHeight * offsetScale.value < screenHeight && translateY.value > 0
             ? offsetScale.value * (1 - (1 / 3) * (translateY.value / screenHeight))
-            : currentImageHeight * offsetScale.value > screenHeight &&
-                translateY.value > (currentImageHeight / 2) * offsetScale.value - halfScreenHeight
+            : imageHeight * offsetScale.value > screenHeight &&
+                translateY.value > (imageHeight / 2) * offsetScale.value - halfScreenHeight
               ? offsetScale.value *
                 (1 -
                   (1 / 3) *
                     ((translateY.value -
-                      ((currentImageHeight / 2) * offsetScale.value - halfScreenHeight)) /
+                      ((imageHeight / 2) * offsetScale.value - halfScreenHeight)) /
                       screenHeight))
               : scale.value;
 
@@ -287,6 +273,8 @@ export const useImageGalleryGestures = ({
         const finalXPosition = event.translationX - event.velocityX * 0.3;
         const finalYPosition = event.translationY + event.velocityY * 0.1;
 
+        const currentIndex = currentIndexShared.value;
+
         /**
          * If there is a next photo, the image is lined up to the right
          * edge, the swipe is to the left, and the final position is more
@@ -295,7 +283,7 @@ export const useImageGalleryGestures = ({
          * As we move towards the left to move to next image, the translationX value will be negative on X axis.
          */
         if (
-          index < assetsLength - 1 &&
+          currentIndex < assetsLength - 1 &&
           Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
           translateX.value < 0 &&
           finalXPosition > halfScreenWidth &&
@@ -303,7 +291,7 @@ export const useImageGalleryGestures = ({
         ) {
           cancelAnimation(translationX);
           translationX.value = withTiming(
-            -(screenWidth + MARGIN) * (index + 1),
+            -(screenWidth + MARGIN) * (currentIndex + 1),
             {
               duration: 200,
               easing: Easing.out(Easing.ease),
@@ -322,7 +310,7 @@ export const useImageGalleryGestures = ({
            * As we move towards the right to move to previous image, the translationX value will be positive on X axis.
            */
         } else if (
-          index > 0 &&
+          currentIndex > 0 &&
           Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
           translateX.value > 0 &&
           finalXPosition < -halfScreenWidth &&
@@ -330,7 +318,7 @@ export const useImageGalleryGestures = ({
         ) {
           cancelAnimation(translationX);
           translationX.value = withTiming(
-            -(screenWidth + MARGIN) * (index - 1),
+            -(screenWidth + MARGIN) * (currentIndex - 1),
             {
               duration: 200,
               easing: Easing.out(Easing.ease),
@@ -376,19 +364,20 @@ export const useImageGalleryGestures = ({
          * otherwise use decay with a clamping at the edges to give the effect
          * the image is sliding along using velocity and friction
          */
+        const imageHeight = currentImageHeight.value;
         translateY.value =
-          currentImageHeight * scale.value < screenHeight
+          imageHeight * scale.value < screenHeight
             ? withTiming(0, { reduceMotion: ReduceMotion.Never })
-            : translateY.value > (currentImageHeight / 2) * scale.value - halfScreenHeight
-              ? withTiming((currentImageHeight / 2) * scale.value - halfScreenHeight, {
+            : translateY.value > (imageHeight / 2) * scale.value - halfScreenHeight
+              ? withTiming((imageHeight / 2) * scale.value - halfScreenHeight, {
                   reduceMotion: ReduceMotion.Never,
                 })
-              : translateY.value < (-currentImageHeight / 2) * scale.value + halfScreenHeight
-                ? withTiming((-currentImageHeight / 2) * scale.value + halfScreenHeight)
+              : translateY.value < (-imageHeight / 2) * scale.value + halfScreenHeight
+                ? withTiming((-imageHeight / 2) * scale.value + halfScreenHeight)
                 : withDecay({
                     clamp: [
-                      (-currentImageHeight / 2) * scale.value + halfScreenHeight,
-                      (currentImageHeight / 2) * scale.value - halfScreenHeight,
+                      (-imageHeight / 2) * scale.value + halfScreenHeight,
+                      (imageHeight / 2) * scale.value - halfScreenHeight,
                     ],
                     deceleration: 0.99,
                     velocity: event.velocityY,
@@ -411,7 +400,7 @@ export const useImageGalleryGestures = ({
          */
         if (
           finalYPosition > halfScreenHeight &&
-          offsetY.value + 8 >= (currentImageHeight / 2) * scale.value - halfScreenHeight &&
+          offsetY.value + 8 >= (imageHeight / 2) * scale.value - halfScreenHeight &&
           isSwiping.value !== IsSwiping.TRUE &&
           translateY.value !== 0 &&
           !(
@@ -448,7 +437,7 @@ export const useImageGalleryGestures = ({
               ? withDecay({
                   velocity: event.velocityY,
                 })
-              : withTiming(halfScreenHeight + (currentImageHeight / 2) * scale.value, {
+              : withTiming(halfScreenHeight + (imageHeight / 2) * scale.value, {
                   duration: 200,
                   easing: Easing.out(Easing.ease),
                 });
@@ -662,13 +651,14 @@ export const useImageGalleryGestures = ({
          * edges of the screen return the photo to line up with the edges,
          * otherwise leave the photo in its current position
          */
+        const imageHeight = currentImageHeight.value;
         translateY.value =
-          currentImageHeight * scale.value < screenHeight
+          imageHeight * scale.value < screenHeight
             ? withTiming(0)
-            : translateY.value > (currentImageHeight / 2) * scale.value - screenHeight / 2
-              ? withTiming((currentImageHeight / 2) * scale.value - screenHeight / 2)
-              : translateY.value < (-currentImageHeight / 2) * scale.value + screenHeight / 2
-                ? withTiming((-currentImageHeight / 2) * scale.value + screenHeight / 2)
+            : translateY.value > (imageHeight / 2) * scale.value - screenHeight / 2
+              ? withTiming((imageHeight / 2) * scale.value - screenHeight / 2)
+              : translateY.value < (-imageHeight / 2) * scale.value + screenHeight / 2
+                ? withTiming((-imageHeight / 2) * scale.value + screenHeight / 2)
                 : translateY.value;
 
         /**
@@ -724,11 +714,12 @@ export const useImageGalleryGestures = ({
             duration: 200,
             easing: Easing.out(Easing.ease),
           });
-          if (currentImageHeight * 2 > screenHeight) {
+          const imageHeight = currentImageHeight.value;
+          if (imageHeight * 2 > screenHeight) {
             const translateYTopBottom =
               event.absoluteY > halfScreenHeight
-                ? -(currentImageHeight * 2 - screenHeight) / 2
-                : (currentImageHeight * 2 - screenHeight) / 2;
+                ? -(imageHeight * 2 - screenHeight) / 2
+                : (imageHeight * 2 - screenHeight) / 2;
             translateY.value = withTiming(translateYTopBottom, {
               duration: 200,
               easing: Easing.out(Easing.ease),

package/src/components/Message/Message.tsx

@@ -11,7 +11,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
 
-import type { Attachment, LocalMessage, UserResponse } from 'stream-chat';
+import type { Attachment, LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
 
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
@@ -94,7 +94,19 @@ export type TouchableEmitter =
   | 'messageReplies'
   | 'reactionList';
 
-export type TextMentionTouchableHandlerAdditionalInfo = { user?: UserResponse };
+export type TextMentionTouchableHandlerAdditionalInfo = {
+  /**
+   * The typed mention entity for the pressed mention (user / channel / here /
+   * role / user_group). Always populated by the default renderText pipeline;
+   * undefined only when a custom renderer doesn't resolve a match.
+   */
+  mentionedEntity?: MentionEntity;
+  /**
+   * Back-compat: still populated when the mention is a user, so existing
+   * integrators reading `additionalInfo.user` keep working.
+   */
+  user?: UserResponse;
+};
 
 export type TextMentionTouchableHandlerPayload = {
   emitter: 'textMention';

package/src/components/Message/MessageItemView/MessageTextContainer.tsx

@@ -166,6 +166,31 @@ const areEqual = (
     return false;
   }
 
+  // Enhanced mention sources (channel/here/roles/groups) — without these the
+  // renderText cache would refresh on a new entity but this comparator would
+  // short-circuit it away and the highlight would not appear until something
+  // else re-rendered the row.
+  const mentionedBroadcastEqual =
+    prevMessage.mentioned_channel === nextMessage.mentioned_channel &&
+    prevMessage.mentioned_here === nextMessage.mentioned_here;
+  if (!mentionedBroadcastEqual) {
+    return false;
+  }
+
+  const joinIds = (values?: string[]) => (values ?? []).join('|');
+  const mentionedRolesEqual =
+    joinIds(prevMessage.mentioned_roles) === joinIds(nextMessage.mentioned_roles);
+  if (!mentionedRolesEqual) {
+    return false;
+  }
+
+  const groupIds = (m: typeof prevMessage) =>
+    joinIds(m.mentioned_groups?.map((g) => g.id) ?? m.mentioned_group_ids);
+  const mentionedGroupsEqual = groupIds(prevMessage) === groupIds(nextMessage);
+  if (!mentionedGroupsEqual) {
+    return false;
+  }
+
   // stringify could be an expensive operation, so lets rule out the obvious
   // possibilities first such as different object reference or empty objects etc.
   // Also keeping markdown equality check at the last to make sure other less

package/src/components/Message/MessageItemView/utils/renderText.tsx

@@ -27,7 +27,7 @@ import {
   State,
 } from 'simple-markdown';
 
-import type { LocalMessage, UserResponse } from 'stream-chat';
+import type { LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
 
 import { generateMarkdownText } from './generateMarkdownText';
 
@@ -152,7 +152,7 @@ const defaultMarkdownStyles: MarkdownStyle = {
     flexDirection: 'row',
   },
   mentions: {
-    fontWeight: '700',
+    fontWeight: primitives.typographyFontWeightRegular,
     fontSize: primitives.typographyFontSizeMd,
     lineHeight: primitives.typographyLineHeightNormal,
   },
@@ -286,7 +286,7 @@ export const renderText = (params: RenderTextParams) => {
     },
     mentions: {
       ...defaultMarkdownStyles.mentions,
-      color: semantics.accentPrimary,
+      color: semantics.chatTextMention,
       ...markdownStyles?.mentions,
     },
     table: {
@@ -404,26 +404,96 @@ export const renderText = (params: RenderTextParams) => {
     );
   };
 
-  // take the @ mentions and turn them into markdown?
-  // translate links
-  const { mentioned_users } = message;
-  const mentionedUsernames = (mentioned_users || [])
-    .map((user) => user.name || user.id)
-    .filter(Boolean)
+  // Collect every mention type the server sent us into a single typed list so
+  // the markdown rule, the lookup, and the press payload all see the same shape.
+  const {
+    mentioned_channel,
+    mentioned_group_ids,
+    mentioned_groups,
+    mentioned_here,
+    mentioned_roles,
+    mentioned_users,
+  } = message;
+
+  const mentionEntities: MentionEntity[] = [
+    ...((mentioned_users ?? []) as UserResponse[]).map(
+      (user) => ({ ...user, mentionType: 'user' }) as MentionEntity,
+    ),
+    ...(mentioned_channel
+      ? ([{ id: 'channel', mentionType: 'channel', name: 'channel' }] as MentionEntity[])
+      : []),
+    ...(mentioned_here
+      ? ([{ id: 'here', mentionType: 'here', name: 'here' }] as MentionEntity[])
+      : []),
+    ...((mentioned_roles ?? []) as string[]).map(
+      (role) => ({ id: role, mentionType: 'role', name: role }) as MentionEntity,
+    ),
+    ...(
+      (mentioned_groups ?? (mentioned_group_ids ?? []).map((id) => ({ id, name: id }))) as Array<{
+        id: string;
+        name?: string;
+      }>
+    ).map(
+      (group) =>
+        ({
+          id: group.id,
+          mentionType: 'user_group',
+          name: group.name ?? group.id,
+        }) as MentionEntity,
+    ),
+  ];
+
+  // Lookup keyed by the rendered mention text (sans `@`), lowercased so we
+  // resolve case-insensitively. First-write-wins: if a user shares a name with
+  // a role/group, the user entity is preferred — same precedence the React SDK
+  // applies via insertion order in its plugin.
+  const mentionLookup = new Map<string, MentionEntity>();
+  for (const entity of mentionEntities) {
+    const key = (entity.name ?? entity.id).toLowerCase();
+    if (!mentionLookup.has(key)) mentionLookup.set(key, entity);
+  }
+
+  const mentionTokens = mentionEntities
+    .map((entity) => entity.name ?? entity.id)
+    .filter((value): value is string => Boolean(value))
     .sort((a, b) => b.length - a.length)
-    .map(escapeRegExp);
-  const mentionedUsers = mentionedUsernames.map((username) => `@${username}`).join('|');
-  const regEx = new RegExp(`^\\B(${mentionedUsers})`, 'g');
+    .map((value) => `@${escapeRegExp(value)}`)
+    .join('|');
+  const regEx = new RegExp(`^\\B(${mentionTokens})`, 'g');
   const mentionsMatchFunction: MatchFunction = (source) => regEx.exec(source);
 
+  const colorForMentionType = (mentionType: MentionEntity['mentionType']) => {
+    switch (mentionType) {
+      case 'user':
+        return semantics.chatTextMentionUser;
+      case 'channel':
+      case 'here':
+        return semantics.chatTextMentionBroadcast;
+      case 'role':
+        return semantics.chatTextMentionRole;
+      case 'user_group':
+        return semantics.chatTextMentionGroup;
+      default:
+        return semantics.chatTextMention;
+    }
+  };
+
   const mentionsReact: ReactNodeOutput = (node, output, { ...state }) => {
-    /**removes the @ prefix of username */
-    const userName = node.content[0]?.content?.substring(1);
+    const matchedText: string | undefined = node.content[0]?.content;
+    const matchedName = matchedText?.substring(1) ?? '';
+    const matchedEntity = mentionLookup.get(matchedName.toLowerCase());
+    const mentionedUser =
+      matchedEntity?.mentionType === 'user' ? (matchedEntity as UserResponse) : undefined;
+    const mentionColor = matchedEntity
+      ? colorForMentionType(matchedEntity.mentionType)
+      : semantics.chatTextMention;
+
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
           additionalInfo: {
-            user: mentioned_users?.find((user: UserResponse) => userName === user.name),
+            mentionedEntity: matchedEntity,
+            user: mentionedUser,
           },
           emitter: 'textMention',
           event,
@@ -434,6 +504,10 @@ export const renderText = (params: RenderTextParams) => {
     const onLongPress = (event: GestureResponderEvent) => {
       if (!preventPress && onLongPressParam) {
         onLongPressParam({
+          additionalInfo: {
+            mentionedEntity: matchedEntity,
+            user: mentionedUser,
+          },
           emitter: 'textMention',
           event,
         });
@@ -441,7 +515,12 @@ export const renderText = (params: RenderTextParams) => {
     };
 
     return (
-      <Text key={state.key} onLongPress={onLongPress} onPress={onPress} style={styles.mentions}>
+      <Text
+        key={state.key}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        style={[styles.mentions, { color: mentionColor }]}
+      >
         {Array.isArray(node.content)
           ? node.content.reduce((acc, current) => acc + current.content, '') || ''
           : output(node.content, state)}
@@ -492,7 +571,7 @@ export const renderText = (params: RenderTextParams) => {
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
     sublist: { react: listReact },
-    ...(mentionedUsers
+    ...(mentionTokens
       ? {
           mentions: {
             match: mentionsMatchFunction,
@@ -507,7 +586,7 @@ export const renderText = (params: RenderTextParams) => {
 
   return (
     <Markdown
-      key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}-${
+      key={`${JSON.stringify(mentionEntities)}-${onlyEmojis}-${
         messageOverlay ? JSON.stringify(markdownStyles) : undefined
       }-${JSON.stringify(semantics)}`}
       onLink={onLink}

package/src/components/MessageInput/MessageComposer.tsx

@@ -118,7 +118,7 @@ const useStyles = () => {
         shadowRadius: 12,
       },
       suggestionsListContainer: {
-        backgroundColor: semantics.backgroundCoreElevation1,
+        backgroundColor: 'transparent',
         position: 'absolute',
         width: '100%',
       },
@@ -200,7 +200,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     AudioRecordingInProgress,
     AudioRecordingLockIndicator,
     AudioRecordingPreview,
-    AutoCompleteSuggestionList,
     Input,
     InputView,
     MessageComposerLeadingView,
@@ -227,7 +226,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
         inputBoxWrapper,
         inputContainer,
         inputFloatingContainer,
-        suggestionsListContainer: { container: suggestionListContainer },
         wrapper,
       },
     },
@@ -355,7 +353,12 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
                 layout: { height: newHeight },
               },
             }) => {
-              messageInputHeightStore.setHeight(newHeight);
+              messageInputHeightStore.setHeight(
+                newHeight -
+                  (selectedPicker && !isKeyboardVisible
+                    ? attachmentPickerBottomSheetHeight - bottomInset
+                    : 0),
+              );
             }}
             style={
               messageInputFloating
@@ -437,11 +440,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               <MessageComposerTrailingView />
             )}
           </View>
-          <View
-            style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
-          >
-            <AutoCompleteSuggestionList />
-          </View>
         </PortalWhileClosingView>
       </Animated.View>
 

package/src/components/MessageList/MessageFlashList.tsx

@@ -60,6 +60,7 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
 
@@ -297,6 +298,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     threadList = false,
   } = props;
   const {
+    AutoCompleteSuggestionList,
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
     NetworkDownIndicator,
@@ -1135,6 +1137,22 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           />
         </View>
       ) : null}
+      <Animated.View
+        layout={transitions.layout200}
+        style={[
+          {
+            bottom: messageInputFloating ? messageInputHeight + 16 : 0,
+          },
+          styles.suggestionsListContainer,
+        ]}
+      >
+        <PortalWhileClosingView
+          portalHostName='overlay-suggestion-list'
+          portalName='autocomplete-suggestion-list'
+        >
+          <AutoCompleteSuggestionList />
+        </PortalWhileClosingView>
+      </Animated.View>
       <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );
@@ -1279,6 +1297,9 @@ const useStyles = () => {
         scrollToBottomButtonContainer,
         unreadMessagesNotificationContainer,
       },
+      messageComposer: {
+        suggestionsListContainer: { container: suggestionListContainer },
+      },
     },
   } = useTheme();
 
@@ -1287,6 +1308,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        suggestionsListContainer: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          width: '100%',
+          ...suggestionListContainer,
+        },
         container: {
           flex: 1,
           width: '100%',
@@ -1338,6 +1365,7 @@ const useStyles = () => {
       scrollToBottomButtonContainer,
       stickyHeaderContainer,
       unreadMessagesNotificationContainer,
+      suggestionListContainer,
     ],
   );
 };