Fixing custom reaction functionality

docs/cookbook.md

@@ -177,6 +177,8 @@ Here I am aiming for following styles:
   - Blue background
   - white colored text
 
+<img align="right" src="./images/6.png" alt="IMAGE ALT TEXT HERE" width="280" border="1" style="float: right;" />
+
 ```js
 const MessageSimpleStyled = (props) => {
   const { isMyMessage, message } = props;
@@ -214,6 +216,8 @@ const MessageSimpleStyled = (props) => {
 
 In this example I will support only two reactions - Monkey face (🐵) and Lion (🦁)
 
+<img align="right" src="./images/7.png" alt="IMAGE ALT TEXT HERE" width="280" border="1" style="float: right;" />
+
 ```js
 const MessageSimpleWithCustomReactions = (props) => (
     <MessageSimple
@@ -284,6 +288,8 @@ First you want to disable/hide the original reaction selector. `MessageSimple` c
 UI component as prop - `ReactionList`. If you set this prop to null, then original reaction list and thus reaction selector
 will be hidden/disabled
 
+<img align="right" src="./images/8.png" alt="IMAGE ALT TEXT HERE" width="280" border="1" style="float: right;" />
+
 ```js static
 const MessageWithoutReactionPicker = props => {
   return (

src/components/Message.js

@@ -276,9 +276,13 @@ const Message = withKeyboardContext(
       if (dismissKeyboardOnMessageTouch) dismissKeyboard();
     };
 
-    getTotalReactionCount = () => {
+    getTotalReactionCount = (supportedReactions) => {
       const { emojiData } = this.props;
       let count = null;
+      if (!supportedReactions) {
+        supportedReactions = emojiData;
+      }
+
       const reactionCounts = this.props.message.reaction_counts;
 
       if (
@@ -288,7 +292,7 @@ const Message = withKeyboardContext(
       ) {
         count = 0;
         Object.keys(reactionCounts).map((key) => {
-          if (emojiData.find((e) => e.id === key)) {
+          if (supportedReactions.find((e) => e.id === key)) {
             count += reactionCounts[key];
           }
 

src/components/ReactionList.js

@@ -142,8 +142,10 @@ export const ReactionList = themed(
             <Reactions>
               {renderReactions(latestReactions, supportedReactions)}
             </Reactions>
-            <ReactionCount reactionCounts={getTotalReactionCount()}>
-              {getTotalReactionCount()}
+            <ReactionCount
+              reactionCounts={getTotalReactionCount(supportedReactions)}
+            >
+              {getTotalReactionCount(supportedReactions)}
             </ReactionCount>
           </Container>
           <ImageWrapper visible={visible}>

types/index.d.ts

@@ -973,7 +973,12 @@ export interface MessageSystemProps
 export interface ReactionListProps extends StyledComponentProps {
   latestReactions: Client.ReactionResponse[];
   openReactionSelector?(event: GestureResponderEvent): void;
-  getTotalReactionCount?(): string | number;
+  getTotalReactionCount?(
+    supportedReacions?: Array<{
+      icon: string;
+      id: string;
+    }>,
+  ): string | number;
   visible: boolean;
   position: string;
   supportedReactions?: Array<{