GroupPmConversationItem [nfc]: Prepare to support italics in names

Soon we'll have a version of the "full name or muted user text"
that's LocalizableReactText, not LocalizableText, because we want to
offer an italicized "(guest)" marker, for zulip#5804. Prepare for that by
using ZulipTextIntl for the names, since it can handle
LocalizableReactText, and our GetText function `_` cannot.

src/pm-conversations/GroupPmConversationItem.js

@@ -13,6 +13,7 @@ import UnreadCount from '../common/UnreadCount';
 import { getMutedUsers } from '../selectors';
 import { TranslationContext } from '../boot/TranslationProvider';
 import { getFullNameOrMutedUserText } from '../users/userSelectors';
+import ZulipTextIntl from '../common/ZulipTextIntl';
 
 const componentStyles = createStyleSheet({
   text: {
@@ -44,16 +45,30 @@ export default function GroupPmConversationItem<U: $ReadOnlyArray<UserOrBot>>(
   const mutedUsers = useSelector(getMutedUsers);
   const names = users.map(user => _(getFullNameOrMutedUserText({ user, mutedUsers })));
 
+  const namesReact = [];
+  users.forEach((user, i) => {
+    if (i !== 0) {
+      namesReact.push(
+        <ZulipText key={`${user.user_id}-comma`} inheritColor inheritFontSize text=", " />,
+      );
+    }
+    namesReact.push(
+      <ZulipTextIntl
+        key={`${user.user_id}`}
+        inheritColor
+        inheritFontSize
+        text={getFullNameOrMutedUserText({ user, mutedUsers })}
+      />,
+    );
+  });
+
   return (
     <Touchable onPress={handlePress}>
       <View style={styles.listItem}>
         <GroupAvatar size={48} names={names} />
-        <ZulipText
-          style={componentStyles.text}
-          numberOfLines={2}
-          ellipsizeMode="tail"
-          text={names.join(', ')}
-        />
+        <ZulipText style={componentStyles.text} numberOfLines={2} ellipsizeMode="tail">
+          {namesReact}
+        </ZulipText>
         <UnreadCount count={unreadCount} />
       </View>
     </Touchable>