bug: defaultMinimalEmojis not rendering correctly

[tomSidebar]

Describe the bug

I am trying to add an emoji to the list of default message reactions. I followed Stream's official guide and also followed this bug report. I was able to add the extra emoji but then the fetched list of defaultMinimalEmojis is not rendering at all (with the exception of the angry emoji, see the screenshot below). The reaction counts are showing up correctly though and you can still react/unreact, it's just that the emojis themselves are not getting rendered.

My basic setup is as follows:

import { defaultMinimalEmojis } from "stream-chat-react/dist/components/Channel/emojiData";

export const customReactions = [
  {
    colons: ":bulb:",
    emoticons: [],
    id: "bulb",
    name: "Bulb",
    native: "💡",
    skin: null,
    unified: "1F4A1",
  },
  ...defaultMinimalEmojis,
];

export const CustomReactionSelector = forwardRef(
  (props: ReactionSelectorProps<DefaultStreamChatGenerics>) => {
    const { reactionSelectorRef } = useMessageContext();

    return (
      <ReactionSelector
        {...props}
        reactionOptions={customReactions}
        ref={reactionSelectorRef}
      />
    );
  }
);
CustomReactionSelector.displayName = "CustomReactionSelector";

export const CustomReactionsList = <
  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
  props: ReactionsListProps<StreamChatGenerics>
) => {
  return <ReactionsList {...props} reactionOptions={customReactions} />;
};

<Channel
            ...
            ReactionsList={CustomReactionsList}
            ReactionSelector={CustomReactionSelector}
>

I also tried hardcoding the emojis based on different emoji options they have in their code base: from emojiData.ts, from utils.ts and from SocialReactionList.tsx. None of those steps worked.

Long story short, how do I get the default emojis to show up? Or is there a way to fetch them from somewhere else?

To Reproduce

See the description above.

Expected behavior

I want the default emojis to show up correctly.

Screenshots

Package version

• stream-chat-react: 9.5.0

Desktop (please complete the following information):

• OS: macOS Ventura 13.1
• Browser Chrome

[arnautov-anton]

Hey @tomSidebar, thank you for submitting the issue - just tested it myself and the implementation of custom reactions is quite unintuitive and with our current setup does not allow the combination of Stream-selected reactions and your custom ones due to different sprites used to render these.

If you're fine with ditching our pre-selected reactions with custom id's then all you need to do is provide list of valid reaction id's from stream-emoji.json (keys from "emojis" object).

You'd then do something like this:

const customReactions = [
  { id: '100' },
  { id: '1234' },
  { id: 'grinning' },
  // ...other emojis if you want
];

// pass it down to your custom components (exactly how you did it in your snippet)

Which would look something like this:

And the data that represents it will look something like this (notice the type property which holds your selected reaction id's):

This would mean that all of the previously submitted reactions which were stored under our custom id's (defaultMinimalEmojis) won't be displayed anymore as there's no mapping functionality.

Edit: I was able to find "aliases" key which allows us to map our custom id's to EmojiMart's valid counterparts.

I'm currently working on a fix (and documentation adjustment) that should resolve this issue and allow integrators to use the combination of our default minimal emoji set and their custom sets - if everything goes according to plan, we should be able to release the fix by the end of this week.

Hope this helps, thanks again. Let me know if you have any other questions.

[tomSidebar]

Thanks for the explanation! Ideally we'd want the previous reactions to persist with this the addition of the extra emoji, so it sounds like your suggested fix will not quite fit our use case.

But that's great news with the proposed fix, that should resolve our issue. Thank you for working on that, looking forward to using that!

[arnautov-anton]

Hey, @tomSidebar, after drafting a "patchy" solution and talking to the team we decided to go an extra mile and redesign the API as the drafted solution - while easier - is also, unfortunately, a breaking change. So if we're going to introduce a breaking change, then we'd like to be sure that we don't have to tamper with it any more in the future. The new solution should be much simpler, easy to transition to and easy to modify if needed. I'll attach this issue to the new PR once it's drafted so you can keep up with the progress.

[stream-ci-bot]

🎉 This issue has been resolved in version 11.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀