Web <> Mobile Reactions are not compatible

[TaharS]

Describe the bug
Our applications leverage the whole Stream suite - Mobile and Web. Our users are cross-platform and we give access to messaging via Stream to all of them.
The issue we are seeing here is that Reactions are actually not synced between mobile and web
The culprit of this, is simply how the data is stored:

Is this intended behaviour?

Dev environment info (please complete/provide the following information):

• Package version

    "stream-chat": "8.2.1",
    "stream-chat-react-native": "^5.11.2",

• react-native or expo version

    "react-native": "0.70.3",

• Device/Emulator (android/ios) and OS version
• Android Emulator Pixel 5 API 33/iOS iPhone 14 Pro Max iOS 16

To Reproduce
Steps to reproduce the behavior:

1. Open a mobile application and add a reaction
2. Open a web application with the same conversation
3. Observe reactions on web
4. From the web application apply a 👍 emoji
5. Observe reactions on mobile

Expected behavior
Reactions should be showing cross platform

Additional context
n/a

Screenshots
n/a

[khushal87]

Hey @TaharS, we couldn't reproduce this behaviour on our side after a couple of attempts. Sharing a video on how it works on our side. I would like to know if you are adding in customization or modifying some behaviour.

Screen.Recording.2023-03-24.at.11.30.11.mov

[TaharS]

Thank you for the quick answer.

We have reduced the number of reaction the web to match 5 reactions (against 6 for web)

const customReactions = [
  {
    colons: ':heart:',
    emoticons: [],
    id: 'heart',
    name: 'Red Heart',
    native: '❤️',
    skin: null,
    unified: '2764'
  },
  {
    colons: ':+1:',
    emoticons: [],
    id: '+1',
    name: 'Thumbs Up Sign',
    native: '👍',
    skin: null,
    unified: '1f44d'
  },
  {
    colons: ':-1:',
    emoticons: [],
    id: '-1',
    name: 'Thumbs Down Sign',
    native: '👎',
    skin: null,
    unified: '1f44e'
  },
  {
    colons: ':joy:',
    emoticons: [],
    id: 'joy',
    name: 'Laughing',
    native: '😂',
    skin: null,
    unified: '1f602'
  },
  {
    colons: ':interrobang:',
    emoticons: [],
    id: 'interrobang',
    name: 'Red Exclamation Mark and Question Mark',
    native: '⁉️',
    skin: null,
    unified: '2049'
  }
]

const CustomReactionsList = (props: { reverse: true }) => {
  return (
    <ReactionsList
      reactionOptions={customReactions}
      {...props}
    />
  )
}

const CustomReactionSelector = () => (
  <ReactionSelector reactionOptions={customReactions} />
)

export const MessagesChannel = () => {
  const { channel: activeChannel } = useChatContext('MessageChannel')

  return activeChannel ? (
    <Channel
      ReactionSelector={CustomReactionSelector}
      ReactionsList={CustomReactionsList}
    >
      <Window>
        <ChannelHeader channel={activeChannel} />
        <MessageList />
        <MessageInput />
      </Window>
    </Channel>

When doing this it seems to create a new field in the DB

[nandorojo]

@TaharS did this end up getting fixed for you? Just wondering what the status is, as I've faced some web & mobile inconsistencies with unread messages as well.

[TaharS]

@TaharS did this end up getting fixed for you? Just wondering what the status is, as I've faced some web & mobile inconsistencies with unread messages as well.

Hey @nandorojo, so if we talk about the reactions here, we cut scope and removed the custom work. Therefore we went with the out of the box reaction on both mobile/web. They work well on that side
We haven't had any issues/inconsistencies with unread messages to this date.

GetStream/stream-chat-react#1947 seems to be in the work to have a better custom reaction experience? Not really sure there though

[vanGalilea]

The issue is solved and I'll be closing this issue for now.
Please don't hesitate to contact us in the future if this issue or any questions arise.

[tanishadandona]

I want to Customize message Reactions . how to do this?