Fix initials

Author: demchenkoalex

src/components/Avatar/Avatar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Image, StyleSheet, Text, View } from 'react-native'
 
 import { MessageType, Theme } from '../../types'
-import { getUserAvatarNameColor, getUserName } from '../../utils'
+import { getUserAvatarNameColor, getUserInitials } from '../../utils'
 
 export const Avatar = React.memo(
   ({
@@ -23,7 +23,7 @@ export const Avatar = React.memo(
         author,
         theme.colors.userAvatarNameColors
       )
-      const name = getUserName(author)
+      const initials = getUserInitials(author)
 
       if (author.imageUrl) {
         return (
@@ -41,9 +41,7 @@ export const Avatar = React.memo(
 
       return (
         <View style={[styles.avatarBackground, { backgroundColor: color }]}>
-          <Text style={theme.fonts.userAvatarTextStyle}>
-            {name ? name[0].toUpperCase() : ''}
-          </Text>
+          <Text style={theme.fonts.userAvatarTextStyle}>{initials}</Text>
         </View>
       )
     }

src/components/Message/Message.tsx

@@ -38,7 +38,8 @@ export interface MessageTopLevelProps extends TextMessageTopLevelProps {
   /** Render a text message inside predefined bubble */
   renderTextMessage?: (
     message: MessageType.Text,
-    messageWidth: number
+    messageWidth: number,
+    showName: boolean
   ) => React.ReactNode
   /** Show user avatars for received messages. Useful for a group chat. */
   showUserAvatars?: boolean
@@ -145,7 +146,8 @@ export const Message = React.memo(
           )(
             // type-coverage:ignore-next-line
             excludeDerivedMessageProps(message) as MessageType.Text,
-            messageWidth
+            messageWidth,
+            showName
           )
         default:
           return null

src/utils/index.ts

@@ -31,6 +31,12 @@ export const getTextSizeInBytes = (text: string) => new Blob([text]).size
 export const getUserAvatarNameColor = (user: User, colors: ColorValue[]) =>
   colors[hashCode(user.id) % colors.length]
 
+/** Returns user initials (can have only first letter of firstName/lastName or both) */
+export const getUserInitials = ({ firstName, lastName }: User) =>
+  `${firstName?.charAt(0) ?? ''}${lastName?.charAt(0) ?? ''}`
+    .toUpperCase()
+    .trim()
+
 /** Returns user name as joined firstName and lastName */
 export const getUserName = ({ firstName, lastName }: User) =>
   `${firstName ?? ''} ${lastName ?? ''}`.trim()