Merge pull request #599 from GetStream/message-overlay-theme-fix

CRNS-306 - fix theme on outer overlay for my message

Author: nhannah

src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -64,6 +64,7 @@ export type MessageTextContainerPropsWithContext<
     'markdownRules' | 'MessageText'
   > & {
     markdownStyles?: MarkdownStyle;
+    messageOverlay?: boolean;
     styles?: Partial<{
       textContainer: StyleProp<ViewStyle>;
     }>;
@@ -86,6 +87,7 @@ const MessageTextContainerWithContext = <
     markdownRules,
     markdownStyles: markdownStylesProp = {},
     message,
+    messageOverlay,
     MessageText,
     onLongPress,
     onlyEmojis,
@@ -125,6 +127,7 @@ const MessageTextContainerWithContext = <
             ...(onlyEmojis ? onlyEmojiMarkdown : {}),
           },
           message,
+          messageOverlay,
           onLongPress,
           onlyEmojis,
           onPress,

src/components/Message/MessageSimple/utils/renderText.tsx

@@ -79,6 +79,7 @@ export type RenderTextParams<
   message: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
   markdownRules?: MarkdownRules;
   markdownStyles?: MarkdownStyle;
+  messageOverlay?: boolean;
   onLink?: (url: string) => Promise<void>;
   onlyEmojis?: boolean;
 };
@@ -99,6 +100,7 @@ export const renderText = <
     markdownRules,
     markdownStyles,
     message,
+    messageOverlay,
     onLink: onLinkParams,
     onLongPress: propOnLongPress,
     onlyEmojis,
@@ -252,7 +254,9 @@ export const renderText = <
 
   return (
     <Markdown
-      key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}`}
+      key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}-${
+        messageOverlay ? JSON.stringify(markdownStyles) : undefined
+      }`}
       onLink={onLink}
       rules={{
         ...customRules,

src/components/MessageOverlay/MessageOverlay.tsx

@@ -150,24 +150,9 @@ const MessageOverlayWithContext = <
 
   const { theme } = useTheme();
 
-  const {
-    colors: {
-      blue_alice,
-      grey_gainsboro,
-      grey_whisper,
-      transparent,
-      white_smoke,
-    },
-    messageSimple: {
-      content: {
-        container: { borderRadiusL, borderRadiusS },
-        containerInner,
-        replyContainer,
-      },
-    },
-  } = theme;
-
   const myMessageTheme = messagesContext?.myMessageTheme;
+  const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;
+
   const [myMessageThemeString, setMyMessageThemeString] = useState(
     JSON.stringify(myMessageTheme),
   );
@@ -183,6 +168,23 @@ const MessageOverlayWithContext = <
     [myMessageThemeString, theme],
   );
 
+  const {
+    colors: {
+      blue_alice,
+      grey_gainsboro,
+      grey_whisper,
+      transparent,
+      white_smoke,
+    },
+    messageSimple: {
+      content: {
+        container: { borderRadiusL, borderRadiusS },
+        containerInner,
+        replyContainer,
+      },
+    },
+  } = wrapMessageInTheme ? modifiedTheme : theme;
+
   const scrollViewRef = useRef<ScrollView>(null);
 
   const messageHeight = useSharedValue(0);
@@ -334,8 +336,6 @@ const MessageOverlayWithContext = <
   const { Attachment, FileAttachmentGroup, Gallery, MessageAvatar, Reply } =
     messagesContext || {};
 
-  const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;
-
   return (
     <MessagesProvider<At, Ch, Co, Ev, Me, Re, Us> value={messagesContext}>
       <ThemeProvider mergedStyle={wrapMessageInTheme ? modifiedTheme : theme}>
@@ -544,6 +544,7 @@ const MessageOverlayWithContext = <
                                         >
                                           key={`message_text_container_${messageContentOrderIndex}`}
                                           message={message}
+                                          messageOverlay
                                           onlyEmojis={onlyEmojis}
                                         />
                                       );