chore: simplify unread message rendering logic and update theme usage in GroupChannelMessageNewLine and UnreadMessagesFloating

Author: OnestarLee

packages/uikit-react-native/src/components/GroupChannelMessageRenderer/GroupChannelMessageNewLine.tsx

@@ -12,16 +12,16 @@ type Props = {
 const GroupChannelMessageNewLine = ({ shouldRenderNewLine }: Props) => {
   if (!shouldRenderNewLine) return null;
 
-  const { select, palette } = useUIKitTheme();
   const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
 
   return (
     <View style={styles.container}>
-      <Box backgroundColor={select({ light: palette.primary300, dark: palette.primary200 })} style={styles.line} />
-      <Text caption3 color={select({ light: palette.primary300, dark: palette.primary200 })} style={styles.label}>
+      <Box backgroundColor={colors.primary} style={styles.line} />
+      <Text caption3 numberOfLines={1} color={colors.primary} style={styles.label}>
         {STRINGS.GROUP_CHANNEL.LIST_NEW_LINE}
       </Text>
-      <Box backgroundColor={select({ light: palette.primary300, dark: palette.primary200 })} style={styles.line} />
+      <Box backgroundColor={colors.primary} style={styles.line} />
     </View>
   );
 };

packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 
 import type { GroupChannelMessageProps, RegexTextPattern } from '@sendbird/uikit-react-native-foundation';
 import {
@@ -312,9 +312,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     }
   });
 
-  const shouldRenderNewLine = useMemo(() => {
-    return sbOptions.uikit.groupChannel.channel.enableMarkAsUnread && isFirstUnreadMessage;
-  }, [sbOptions.uikit.groupChannel.channel.enableMarkAsUnread, isFirstUnreadMessage]);
+  const shouldRenderNewLine = sbOptions.uikit.groupChannel.channel.enableMarkAsUnread && isFirstUnreadMessage;
 
   return (
     <Box paddingHorizontal={16} marginBottom={messageGap}>

packages/uikit-react-native/src/components/UnreadMessagesFloating.tsx

@@ -12,7 +12,7 @@ export type UnreadMessagesFloatingProps = {
 };
 const UnreadMessagesFloating = ({ unreadMessageCount, visible, onPressClose }: UnreadMessagesFloatingProps) => {
   const { STRINGS } = useLocalization();
-  const { select, palette } = useUIKitTheme();
+  const { select, palette, colors } = useUIKitTheme();
   if (unreadMessageCount <= 0 || !visible) return null;
   return (
     <View
@@ -21,7 +21,7 @@ const UnreadMessagesFloating = ({ unreadMessageCount, visible, onPressClose }: U
         { backgroundColor: select({ dark: palette.background400, light: palette.background50 }) },
       ]}
     >
-      <Text body2 color={select({ dark: palette.onBackgroundDark02, light: palette.onBackgroundLight02 })}>
+      <Text body2 color={colors.onBackground02}>
         {STRINGS.GROUP_CHANNEL.LIST_FLOATING_UNREAD_MSG(unreadMessageCount)}
       </Text>
       <TouchableOpacity onPress={onPressClose} style={{ marginLeft: 4 }}>