feat: configure ReactionList reaction theme (#2561)

Author: khushal87

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -117,6 +117,8 @@ const ReactionListWithContext = <
           middleIcon,
           radius: themeRadius,
           reactionBubble,
+          reactionContainer,
+          reactionCount,
           reactionSize: themeReactionSize,
           strokeSize: themeStrokeSize,
         },
@@ -246,6 +248,7 @@ const ReactionListWithContext = <
                   {
                     marginRight: index < reactions.length - 1 ? 5 : 0,
                   },
+                  reactionContainer,
                 ]}
               >
                 <Icon
@@ -256,7 +259,9 @@ const ReactionListWithContext = <
                   supportedReactions={supportedReactions}
                   type={reaction.type}
                 />
-                <Text style={[styles.reactionCount, { color: black }]}>{reaction.count}</Text>
+                <Text style={[styles.reactionCount, { color: black }, reactionCount]}>
+                  {reaction.count}
+                </Text>
               </View>
             ))}
           </TouchableOpacity>

package/src/contexts/themeContext/utils/theme.ts

@@ -533,6 +533,8 @@ export type Theme = {
       middleIcon: ViewStyle;
       radius: number;
       reactionBubble: ViewStyle;
+      reactionContainer: ViewStyle;
+      reactionCount: TextStyle;
       reactionSize: number;
       strokeSize: number;
     };
@@ -1119,6 +1121,8 @@ export const defaultTheme: Theme = {
       middleIcon: {},
       radius: 2, // not recommended to change this
       reactionBubble: {},
+      reactionContainer: {},
+      reactionCount: {},
       reactionSize: 24,
       strokeSize: 1, // not recommended to change this
     },