fix: add emoji fallback icon

Author: bang9

packages/uikit-react-native/src/components/ReactionAddons/MessageReactionAddon.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Pressable } from 'react-native';
 
-import type { Emoji } from '@sendbird/chat';
-import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Icon, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
-import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
+import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdEmoji, SendbirdReaction } from '@sendbird/uikit-utils';
 import { getReactionCount } from '@sendbird/uikit-utils';
 
 import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
@@ -33,7 +32,7 @@ const createOnPressReaction = (
 const createReactionButtons = (
   channel: SendbirdBaseChannel,
   message: SendbirdBaseMessage,
-  getEmoji: (key: string) => Emoji,
+  getEmoji: (key: string) => SendbirdEmoji | undefined,
   emojiLimit: number,
   onOpenReactionList: () => void,
   onOpenReactionUserList: (focusIndex: number) => void,
@@ -50,18 +49,21 @@ const createReactionButtons = (
         onLongPress={() => onOpenReactionUserList(index)}
         delayLongPress={DEFAULT_LONG_PRESS_DELAY}
       >
-        {({ pressed }) => (
-          <ReactionRoundedButton
-            url={getEmoji(reaction.key).url}
-            count={getReactionCount(reaction)}
-            reacted={pressed || reaction.hasCurrentUserReacted}
-            style={
-              reactionAddonType === 'default'
-                ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]
-                : [styles.marginEnd, styles.marginBottom]
-            }
-          />
-        )}
+        {({ pressed }) => {
+          const emoji = getEmoji(reaction.key);
+          return (
+            <ReactionRoundedButton
+              source={emoji ? { uri: emoji.url } : Icon.Assets.question}
+              count={getReactionCount(reaction)}
+              reacted={pressed || reaction.hasCurrentUserReacted}
+              style={
+                reactionAddonType === 'default'
+                  ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]
+                  : [styles.marginEnd, styles.marginBottom]
+              }
+            />
+          );
+        }}
       </Pressable>
     );
   });

packages/uikit-react-native/src/components/ReactionAddons/ReactionRoundedButton.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
+import { ImageProps, StyleProp, View, ViewStyle } from 'react-native';
 
 import { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { truncatedCount } from '@sendbird/uikit-utils';
 
 type Props = {
-  url: string;
+  source: ImageProps['source'];
   count: number;
   reacted: boolean;
   style: StyleProp<ViewStyle>;
+  /**
+   * @deprecated Please use `source` instead
+   * */
+  url?: string;
 };
 
-const ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {
+const ReactionRoundedButton = ({ source, count, reacted, style, url }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.reaction.rounded;
 
@@ -23,7 +27,7 @@ const ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {
         style,
       ]}
     >
-      <Image source={{ uri: url }} style={styles.emoji} />
+      <Image source={source ? source : { uri: url }} style={styles.emoji} />
       <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>
         {truncatedCount(count, 99, '')}
       </Text>

packages/uikit-react-native/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -4,13 +4,20 @@ import { Animated, Easing, I18nManager, Pressable, ScrollView, View, useWindowDi
 import {
   Avatar,
   Divider,
+  Icon,
   Image,
   Modal,
   Text,
   createStyleSheet,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdReaction, getReactionCount, truncatedCount, useSafeAreaPadding } from '@sendbird/uikit-utils';
+import {
+  SendbirdEmoji,
+  SendbirdReaction,
+  getReactionCount,
+  truncatedCount,
+  useSafeAreaPadding,
+} from '@sendbird/uikit-utils';
 
 import type { ReactionBottomSheetProps } from './index';
 
@@ -81,7 +88,7 @@ const ReactionUserListBottomSheet = ({
         {reactions.map((reaction, index) => {
           const isFocused = focusedReaction?.key === reaction.key;
           const isLastItem = reactions.length - 1 === index;
-          const emoji = emojiManager.allEmojiMap[reaction.key];
+          const emoji = emojiManager.allEmojiMap[reaction.key] as SendbirdEmoji | undefined;
 
           return (
             <Pressable
@@ -102,7 +109,7 @@ const ReactionUserListBottomSheet = ({
                 }
               }}
             >
-              <Image source={{ uri: emoji.url }} style={styles.tabEmoji} />
+              <Image source={emoji ? { uri: emoji.url } : Icon.Assets.question} style={styles.tabEmoji} />
               <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>
                 {truncatedCount(getReactionCount(reaction))}
               </Text>