diff --git a/packages/uikit-react-native/src/components/ReactionAddons/MessageReactionAddon.tsx b/packages/uikit-react-native/src/components/ReactionAddons/MessageReactionAddon.tsx index 84b8acb8..12ea25a7 100644 --- a/packages/uikit-react-native/src/components/ReactionAddons/MessageReactionAddon.tsx +++ b/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 }) => ( emojiManager.allEmojiMap[key], + (reactionKey) => { + const emoji = emojiManager.allEmojiMap[reactionKey]; + return emojiManager.getEmojiIconSource(emoji); + }, emojiManager.allEmoji.length, () => openReactionList({ channel, message }), (focusIndex) => openReactionUserList({ channel, message, focusIndex }), diff --git a/packages/uikit-react-native/src/components/ReactionAddons/ReactionRoundedButton.tsx b/packages/uikit-react-native/src/components/ReactionAddons/ReactionRoundedButton.tsx index d6798ae4..85d7c258 100644 --- a/packages/uikit-react-native/src/components/ReactionAddons/ReactionRoundedButton.tsx +++ b/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; + /** + * @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, ]} > - + {truncatedCount(count, 99, '')} diff --git a/packages/uikit-react-native/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx b/packages/uikit-react-native/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx index e634a235..9d393036 100644 --- a/packages/uikit-react-native/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx +++ b/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 ( - + {truncatedCount(getReactionCount(reaction))} diff --git a/packages/uikit-react-native/src/libs/EmojiManager.ts b/packages/uikit-react-native/src/libs/EmojiManager.ts index 0d8e95a9..2d054678 100644 --- a/packages/uikit-react-native/src/libs/EmojiManager.ts +++ b/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 = {}; + private _emojiCategoryMap: Record = {}; public get emojiCategoryMap() { return this._emojiCategoryMap; } - private _allEmojiMap: Record = {}; + private _allEmojiMap: Record = {}; 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);