fix: add theme for overlay reaction list icon and introduce shouldShowUnreadOverlay for message bubble (#2722)

* fix: add theme for overlay reaction list icon and introduce shouldShowUnreadOverlay for message bubble

* fix: lint issues

* fix: add theme

* fix: lint issues

Author: khushal87

docusaurus/docs/reactnative/common-content/ui-components/channel/props/should_show_unread_underlay.mdx

@@ -0,0 +1,5 @@
+Boolean to enable/disable the message underlay background when there are unread messages in the Message List.
+
+| Type                   | Default |
+| ---------------------- | ------- |
+| `boolean`\|`undefined` | `true`  |

docusaurus/docs/reactnative/contexts/messages-context.mdx

@@ -66,6 +66,7 @@ import OverlayReactionList from '../common-content/ui-components/overlay-provide
 import ReactionList from '../common-content/ui-components/channel/props/reaction-list.mdx';
 import Reply from '../common-content/ui-components/channel/props/reply.mdx';
 import ScrollToBottomButton from '../common-content/ui-components/channel/props/scroll-to-bottom-button.mdx';
+import ShouldShowUnreadUnderlay from '../common-content/ui-components/channel/props/should_show_unread_underlay.mdx';
 import SelectReaction from '../common-content/ui-components/channel/props/select_reaction.mdx';
 import SupportedReactions from '../common-content/ui-components/channel/props/supported_reactions.mdx';
 import TypingIndicator from '../common-content/ui-components/channel/props/typing_indicator.mdx';
@@ -235,6 +236,10 @@ Enables quoted-reply state on given message.
 | ------------------- |
 | `(message) => void` |
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#shouldshowunreadunderlay)_ props</div> shouldShowUnreadUnderlay {#shouldshowunreadunderlay}
+
+<ShouldShowUnreadUnderlay />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#supportedreactions)_ props</div> supportedReactions {#supportedreactions}
 
 <SupportedReactions />

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -134,6 +134,7 @@ import ScrollToBottomButton from '../common-content/ui-components/channel/props/
 import SelectReaction from '../common-content/ui-components/channel/props/select_reaction.mdx';
 import SendButton from '../common-content/ui-components/channel/props/send_button.mdx';
 import SendMessageDisallowedIndicator from '../common-content/ui-components/channel/props/send_message_disallowed_indicator.mdx';
+import ShouldShowUnreadUnderlay from '../common-content/ui-components/channel/props/should_show_unread_underlay.mdx';
 import ShowThreadMessageInChannelButton from '../common-content/ui-components/channel/props/show_thread_message_in_channel_button.mdx';
 import StartAudioRecordingButton from '../common-content/ui-components/channel/props/start_audio_recording_button.mdx';
 import StateUpdateThrottleInterval from '../common-content/ui-components/channel/props/state_update_throttle_interval.mdx';
@@ -702,6 +703,10 @@ Callback function to set the [ref](https://reactjs.org/docs/refs-and-the-dom.htm
 | --------- | -------------------- |
 | ref       | ref of the TextInput |
 
+### `shouldShowUnreadUnderlay`
+
+<ShouldShowUnreadUnderlay />
+
 ### stateUpdateThrottleInterval
 
 <StateUpdateThrottleInterval />

package/src/components/Channel/Channel.tsx

@@ -322,6 +322,7 @@ export type ChannelPropsWithContext<
       | 'OverlayReactionList'
       | 'ReactionList'
       | 'Reply'
+      | 'shouldShowUnreadUnderlay'
       | 'ScrollToBottomButton'
       | 'selectReaction'
       | 'supportedReactions'
@@ -582,6 +583,7 @@ const ChannelWithContext = <
     setTyping,
     setWatcherCount,
     setWatchers,
+    shouldShowUnreadUnderlay = true,
     shouldSyncChannel,
     ShowThreadMessageInChannelButton = ShowThreadMessageInChannelButtonDefault,
     StartAudioRecordingButton = AudioRecordingButtonDefault,
@@ -2412,6 +2414,7 @@ const ChannelWithContext = <
     sendReaction,
     setEditingState,
     setQuotedMessageState,
+    shouldShowUnreadUnderlay,
     supportedReactions,
     targetedMessage,
     TypingIndicator,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -85,6 +85,7 @@ export const useCreateMessagesContext = <
   sendReaction,
   setEditingState,
   setQuotedMessageState,
+  shouldShowUnreadUnderlay,
   supportedReactions,
   targetedMessage,
   TypingIndicator,
@@ -183,6 +184,7 @@ export const useCreateMessagesContext = <
       sendReaction,
       setEditingState,
       setQuotedMessageState,
+      shouldShowUnreadUnderlay,
       supportedReactions,
       targetedMessage,
       TypingIndicator,

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
   },
   innerContainer: {
     flexDirection: 'row',
-    height: 56,
+    minHeight: 56,
   },
   leftContainer: {
     flex: 1,

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
   },
   innerContainer: {
     flexDirection: 'row',
-    height: 56,
+    minHeight: 56,
   },
   leftContainer: {
     flex: 1,

package/src/components/Message/Message.tsx

@@ -305,8 +305,8 @@ const MessageWithContext = <
   const { client } = chatContext;
   const {
     theme: {
-      colors: { bg_gradient_start, targetedMessageBackground },
-      messageSimple: { targetedMessageContainer, targetedMessageUnderlay },
+      colors: { targetedMessageBackground },
+      messageSimple: { targetedMessageContainer, targetedMessageUnderlay, unreadUnderlayColor },
     },
   } = useTheme();
 
@@ -762,7 +762,7 @@ const MessageWithContext = <
         style={[
           style,
           {
-            backgroundColor: showUnreadUnderlay ? bg_gradient_start : undefined,
+            backgroundColor: showUnreadUnderlay ? unreadUnderlayColor : undefined,
           },
         ]}
       >

package/src/components/MessageList/MessageList.tsx

@@ -144,6 +144,7 @@ type MessageListPropsWithContext<
     | 'ScrollToBottomButton'
     | 'MessageSystem'
     | 'myMessageTheme'
+    | 'shouldShowUnreadUnderlay'
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
   > &
@@ -270,6 +271,7 @@ const MessageListWithContext = <
     setMessages,
     setSelectedPicker,
     setTargetedMessage,
+    shouldShowUnreadUnderlay,
     StickyHeader,
     targetedMessage,
     thread,
@@ -630,7 +632,10 @@ const MessageListWithContext = <
 
     const isCurrentMessageUnread = isMessageUnread(index);
     const showUnreadUnderlay =
-      !channel.muteStatus().muted && isCurrentMessageUnread && scrollToBottomButtonVisible;
+      !!shouldShowUnreadUnderlay &&
+      !channel.muteStatus().muted &&
+      isCurrentMessageUnread &&
+      scrollToBottomButtonVisible;
     const insertInlineUnreadIndicator = showUnreadUnderlay && !isMessageUnread(index + 1); // show only if previous message is read
 
     if (message.type === 'system') {
@@ -1260,6 +1265,7 @@ export const MessageList = <
     MessageSystem,
     myMessageTheme,
     ScrollToBottomButton,
+    shouldShowUnreadUnderlay,
     TypingIndicator,
     TypingIndicatorContainer,
   } = useMessagesContext<StreamChatGenerics>();
@@ -1309,6 +1315,7 @@ export const MessageList = <
         setMessages,
         setSelectedPicker,
         setTargetedMessage,
+        shouldShowUnreadUnderlay,
         StickyHeader,
         targetedMessage,
         thread,

package/src/components/MessageOverlay/OverlayReactionList.tsx

@@ -120,7 +120,7 @@ export const ReactionButton = <
     theme: {
       colors: { accent_blue, grey },
       overlay: {
-        reactionsList: { reaction, reactionSize },
+        reactionsList: { reaction, reactionSize, selectedIcon, unSelectedIcon },
       },
     },
   } = useTheme();
@@ -217,9 +217,14 @@ export const ReactionButton = <
       <Animated.View
         style={[index !== numberOfReactions - 1 ? styles.notLastReaction : {}, reaction, iconStyle]}
       >
-        <Icon height={reactionSize} pathFill={grey} width={reactionSize} />
+        <Icon height={reactionSize} pathFill={grey} width={reactionSize} {...unSelectedIcon} />
         <Animated.View style={[styles.selectedIcon, selectedStyle]}>
-          <Icon height={reactionSize} pathFill={accent_blue} width={reactionSize} />
+          <Icon
+            height={reactionSize}
+            pathFill={accent_blue}
+            width={reactionSize}
+            {...selectedIcon}
+          />
         </Animated.View>
       </Animated.View>
     </TapGestureHandler>