MM-51226 - Calls: Emojis not showing in reaction stream (#7198)

app/products/calls/components/call_avatar.tsx

@@ -152,6 +152,7 @@ const CallAvatar = ({userModel, volume, serverUrl, sharingScreen, size, muted, r
             <View style={[style.reaction, style.emoji]}>
                 <Emoji
                     emojiName={reaction.name}
+                    literal={reaction.literal}
                     size={iconSize - 3}
                 />
             </View>

app/products/calls/components/emoji_list.tsx

@@ -50,6 +50,7 @@ const EmojiList = ({reactionStream}: Props) => {
                     <EmojiPill
                         key={e.latestTimestamp}
                         name={e.name}
+                        literal={e.literal}
                         count={e.count}
                     />
                 ))}

app/products/calls/components/emoji_pill.tsx

@@ -29,13 +29,15 @@ const styles = StyleSheet.create({
 interface Props {
     name: string;
     count: number;
+    literal?: string;
 }
 
-const EmojiPill = ({name, count}: Props) => {
+const EmojiPill = ({name, literal, count}: Props) => {
     return (
         <View style={styles.pill}>
             <Emoji
                 emojiName={name}
+                literal={literal}
                 size={18}
             />
             <Text style={styles.count}>{count}</Text>

app/products/calls/state/actions.test.ts

@@ -845,8 +845,8 @@ describe('useCallsState', () => {
         const expectedCurrentCallState: CurrentCall = {
             ...initialCurrentCallState,
             reactionStream: [
-                {name: 'smile', latestTimestamp: 202, count: 1},
-                {name: '+1', latestTimestamp: 145, count: 2},
+                {name: 'smile', latestTimestamp: 202, count: 1, literal: undefined},
+                {name: '+1', latestTimestamp: 145, count: 2, literal: undefined},
             ],
             participants: {
                 ...initialCurrentCallState.participants,

app/products/calls/state/actions.ts

@@ -446,6 +446,7 @@ export const userReacted = (serverUrl: string, channelId: string, reaction: Call
     } else {
         const newReaction: ReactionStreamEmoji = {
             name: reaction.emoji.name,
+            literal: reaction.emoji.literal,
             count: 1,
             latestTimestamp: reaction.timestamp,
         };

app/products/calls/types/calls.ts

@@ -153,6 +153,7 @@ export type CallReactionEmoji = {
     name: string;
     skin?: string;
     unified: string;
+    literal?: string;
 }
 
 export type CallReaction = {
@@ -165,6 +166,7 @@ export type ReactionStreamEmoji = {
     name: string;
     latestTimestamp: number;
     count: number;
+    literal?: string;
 };
 
 export type RecordingState = {

ios/Podfile.lock

@@ -385,7 +385,7 @@ PODS:
     - React-Core
   - react-native-netinfo (9.3.7):
     - React-Core
-  - react-native-network-client (1.3.1):
+  - react-native-network-client (1.3.2):
     - Alamofire (~> 5.6.4)
     - React-Core
     - Starscream (~> 4.0.4)
@@ -977,7 +977,7 @@ SPEC CHECKSUMS:
   react-native-image-picker: a5dddebb4d2955ac4712a4ed66b00a85f62a63ac
   react-native-in-app-review: a073f67c5f3392af6ea7fb383217cdb1aa2aa726
   react-native-netinfo: 2517ad504b3d303e90d7a431b0fcaef76d207983
-  react-native-network-client: 116ec02566020bff98cddd9c4825e7665306ad6c
+  react-native-network-client: 08bf5a8ad300192768ffa2c6fc929d2bba9a27aa
   react-native-notifications: 83b4fd4a127a6c918fc846cae90da60f84819e44
   react-native-paste-input: 3392800944a47c00dddbff23c31c281482209679
   react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc