From 746f7353dfcbf9282d4030b4bb7b9d82cc34eb7a Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Sun, 22 Feb 2026 18:59:44 +0100
Subject: [PATCH] fix: portal content disappearing when mounted and relayouted

---
 package/src/components/Message/Message.tsx    | 44 +++++++++----------
 .../__snapshots__/Thread.test.js.snap         |  8 ++++
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
index c66ae34e8..7e9dcd714 100644
--- a/package/src/components/Message/Message.tsx
+++ b/package/src/components/Message/Message.tsx
@@ -842,8 +842,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
             />
           ) : null}
           {/*TODO: V9: Find a way to separate these in a dedicated file*/}
-          {overlayActive && rect ? (
-            <Portal hostName='top-item'>
+          <Portal hostName={overlayActive && rect ? 'top-item' : undefined}>
+            {overlayActive && rect ? (
               <View
                 onLayout={(e) => {
                   const { width: w, height: h } = e.nativeEvent.layout;
@@ -861,16 +861,30 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                   handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
                 />
               </View>
-            </Portal>
-          ) : null}
+            ) : null}
+          </Portal>
           <Portal
             hostName={overlayActive ? 'message-overlay' : undefined}
             style={overlayActive && rect ? { width: rect.w } : undefined}
           >
             <MessageSimple ref={messageWrapperRef} />
           </Portal>
-          {overlayActive && rect ? (
-            <Portal hostName='bottom-item'>
+          {showMessageReactions ? (
+            <BottomSheetModal
+              lazy={true}
+              onClose={() => setShowMessageReactions(false)}
+              visible={showMessageReactions}
+              height={424}
+            >
+              <MessageUserReactions
+                message={message}
+                MessageUserReactionsAvatar={MessageUserReactionsAvatar}
+                MessageUserReactionsItem={MessageUserReactionsItem}
+              />
+            </BottomSheetModal>
+          ) : null}
+          <Portal hostName={overlayActive && rect ? 'bottom-item' : undefined}>
+            {overlayActive && rect ? (
               <View
                 onLayout={(e) => {
                   const { width: w, height: h } = e.nativeEvent.layout;
@@ -888,22 +902,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                   messageActions={messageActions}
                 />
               </View>
-            </Portal>
-          ) : null}
-          {showMessageReactions ? (
-            <BottomSheetModal
-              lazy={true}
-              onClose={() => setShowMessageReactions(false)}
-              visible={showMessageReactions}
-              height={424}
-            >
-              <MessageUserReactions
-                message={message}
-                MessageUserReactionsAvatar={MessageUserReactionsAvatar}
-                MessageUserReactionsItem={MessageUserReactionsItem}
-              />
-            </BottomSheetModal>
-          ) : null}
+            ) : null}
+          </Portal>
           {isBounceDialogOpen ? (
             <MessageBounce setIsBounceDialogOpen={setIsBounceDialogOpen} />
           ) : null}
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
index 238d82c45..f2b9eb6f4 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -382,6 +382,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     }
                     testID="message-wrapper"
                   >
+                    <View />
                     <View>
                       <View>
                         <View
@@ -681,6 +682,7 @@ exports[`Thread should match thread snapshot 1`] = `
                         </View>
                       </View>
                     </View>
+                    <View />
                   </View>
                 </View>
               </View>
@@ -735,6 +737,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     }
                     testID="message-wrapper"
                   >
+                    <View />
                     <View>
                       <View>
                         <View
@@ -1034,6 +1037,7 @@ exports[`Thread should match thread snapshot 1`] = `
                         </View>
                       </View>
                     </View>
+                    <View />
                   </View>
                 </View>
               </View>
@@ -1113,6 +1117,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     }
                     testID="message-wrapper"
                   >
+                    <View />
                     <View>
                       <View>
                         <View
@@ -1412,6 +1417,7 @@ exports[`Thread should match thread snapshot 1`] = `
                         </View>
                       </View>
                     </View>
+                    <View />
                   </View>
                 </View>
               </View>
@@ -1467,6 +1473,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     }
                     testID="message-wrapper"
                   >
+                    <View />
                     <View>
                       <View>
                         <View
@@ -1771,6 +1778,7 @@ exports[`Thread should match thread snapshot 1`] = `
                         </View>
                       </View>
                     </View>
+                    <View />
                   </View>
                 </View>
               </View>