Merge pull request #219 from sendbird/fix/emoji-fallback

fix: add emoji fallback icon

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Pressable } from 'react-native';
+import { ImageProps, Pressable } from 'react-native';
 
-import type { Emoji } from '@sendbird/chat';
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
@@ -33,7 +32,7 @@ const createOnPressReaction = (
 const createReactionButtons = (
   channel: SendbirdBaseChannel,
   message: SendbirdBaseMessage,
-  getEmoji: (key: string) => Emoji,
+  getIconSource: (reactionKey: string) => ImageProps['source'],
   emojiLimit: number,
   onOpenReactionList: () => void,
   onOpenReactionUserList: (focusIndex: number) => void,
@@ -52,7 +51,7 @@ const createReactionButtons = (
       >
         {({ pressed }) => (
           <ReactionRoundedButton
-            url={getEmoji(reaction.key).url}
+            source={getIconSource(reaction.key)}
             count={getReactionCount(reaction)}
             reacted={pressed || reaction.hasCurrentUserReacted}
             style={
@@ -104,7 +103,10 @@ const MessageReactionAddon = ({
   const reactionButtons = createReactionButtons(
     channel,
     message,
-    (key) => emojiManager.allEmojiMap[key],
+    (reactionKey) => {
+      const emoji = emojiManager.allEmojiMap[reactionKey];
+      return emojiManager.getEmojiIconSource(emoji);
+    },
     emojiManager.allEmoji.length,
     () => openReactionList({ channel, message }),
     (focusIndex) => openReactionUserList({ channel, message, focusIndex }),

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

@@ -10,7 +10,13 @@ import {
   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 +87,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 +108,7 @@ const ReactionUserListBottomSheet = ({
                 }
               }}
             >
-              <Image source={{ uri: emoji.url }} style={styles.tabEmoji} />
+              <Image source={emojiManager.getEmojiIconSource(emoji)} style={styles.tabEmoji} />
               <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>
                 {truncatedCount(getReactionCount(reaction))}
               </Text>

packages/uikit-react-native/src/libs/EmojiManager.ts

@@ -1,3 +1,6 @@
+import { ImageProps } from 'react-native';
+
+import { Icon } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdEmoji, SendbirdEmojiCategory, SendbirdEmojiContainer } from '@sendbird/uikit-utils';
 
 import type { AsyncLocalCacheStorage } from '../types';
@@ -22,7 +25,8 @@ class MemoryStorage implements AsyncLocalCacheStorage {
     this._data[key] = value;
   }
 }
-
+type EmojiCategoryId = string;
+type EmojiKey = string;
 class EmojiManager {
   static key = 'sendbird-uikit@emoji-manager';
 
@@ -45,12 +49,12 @@ class EmojiManager {
     },
   };
 
-  private _emojiCategoryMap: Record<string, SendbirdEmojiCategory> = {};
+  private _emojiCategoryMap: Record<EmojiCategoryId, SendbirdEmojiCategory> = {};
   public get emojiCategoryMap() {
     return this._emojiCategoryMap;
   }
 
-  private _allEmojiMap: Record<string, SendbirdEmoji> = {};
+  private _allEmojiMap: Record<EmojiKey, SendbirdEmoji> = {};
   public get allEmojiMap() {
     return this._allEmojiMap;
   }
@@ -60,6 +64,10 @@ class EmojiManager {
     return this._allEmoji;
   }
 
+  public getEmojiIconSource(emoji?: SendbirdEmoji | null | undefined): ImageProps['source'] {
+    return emoji?.url ? { uri: emoji.url } : Icon.Assets.question;
+  }
+
   public init = async (emojiContainer?: SendbirdEmojiContainer) => {
     if (emojiContainer) await this.emojiStorage.set(emojiContainer);