Merge pull request #151 from Unshut-Labs/saulmc/user-default-avatar

feat: simple first letter default profile image

Author: alexrisch

assets/default-pfp-color.png

@@ -1,38 +1,70 @@
-import { Image, ImageStyle } from "expo-image";
-import { StyleProp, useColorScheme } from "react-native";
-
-import PFPPlaceholderColor from "../assets/default-pfp-color.png";
-import PFPPlaceholderDark from "../assets/default-pfp-dark.png";
-import PFPPlaceholderLight from "../assets/default-pfp-light.png";
+import { actionSecondaryColor, textSecondaryColor } from "@styles/colors";
+import { AvatarSizes } from "@styles/sizes";
+import {
+  ColorSchemeName,
+  Image,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from "react-native";
 
 type Props = {
   uri?: string | undefined;
   size?: number | undefined;
   style?: StyleProp<ImageStyle>;
   color?: boolean;
+  name?: string | undefined;
 };
-export default function Avatar({ uri, size, style, color }: Props) {
+
+export default function Avatar({
+  uri,
+  size = AvatarSizes.default,
+  style,
+  color,
+  name,
+}: Props) {
   const colorScheme = useColorScheme();
-  const PFPPlaceholder = color
-    ? PFPPlaceholderColor
-    : colorScheme === "dark"
-    ? PFPPlaceholderDark
-    : PFPPlaceholderLight;
-  return (
+  const styles = getStyles(colorScheme, size);
+  const firstLetter = name ? name.charAt(0).toUpperCase() : "";
+
+  return uri ? (
     <Image
       key={`${uri}-${color}-${colorScheme}`}
-      source={uri ? { uri } : PFPPlaceholder}
-      placeholder={PFPPlaceholder}
-      placeholderContentFit="cover"
-      contentFit="cover"
-      style={[
-        {
-          width: size || 121,
-          height: size || 121,
-          borderRadius: size || 121,
-        },
-        style,
-      ]}
+      source={{ uri }}
+      style={[styles.image, style]}
     />
+  ) : (
+    <View style={[styles.placeholder, style]}>
+      <Text style={styles.text}>{firstLetter}</Text>
+    </View>
   );
 }
+
+const getStyles = (colorScheme: ColorSchemeName, size: number) =>
+  StyleSheet.create({
+    image: {
+      width: size,
+      height: size,
+      borderRadius: size,
+    },
+    placeholder: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor:
+        colorScheme === "dark"
+          ? textSecondaryColor(colorScheme)
+          : actionSecondaryColor(colorScheme),
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    text: {
+      fontSize: size / 2,
+      fontWeight: "500",
+      color: "white",
+      textAlign: "center",
+    },
+  });

assets/default-pfp-dark.png

@@ -5,7 +5,7 @@ import {
   textPrimaryColor,
   textSecondaryColor,
 } from "@styles/colors";
-import { sizes } from "@styles/sizes";
+import { AvatarSizes } from "@styles/sizes";
 import * as Haptics from "expo-haptics";
 import { ReactNode, useCallback, useMemo, useRef } from "react";
 import {
@@ -96,7 +96,11 @@ const MessageSenderAvatar = ({ message }: { message: MessageToDisplay }) => {
   return (
     <View style={styles.groupSenderAvatarWrapper}>
       {!message.hasNextMessageInSeries ? (
-        <Avatar size={sizes.avatar} uri={getPreferredAvatar(senderSocials)} />
+        <Avatar
+          size={AvatarSizes.messageSender}
+          uri={getPreferredAvatar(senderSocials)}
+          name={getPreferredName(senderSocials, message.senderAddress)}
+        />
       ) : (
         <View style={styles.avatarPlaceholder} />
       )}
@@ -533,8 +537,8 @@ const useStyles = () => {
       marginVertical: 6,
     },
     avatarPlaceholder: {
-      width: sizes.avatar,
-      height: sizes.avatar,
+      width: AvatarSizes.messageSender,
+      height: AvatarSizes.messageSender,
     },
   });
 };

assets/default-pfp-light.png

@@ -1,6 +1,7 @@
 import Clipboard from "@react-native-clipboard/clipboard";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import { headerTitleStyle, textPrimaryColor } from "@styles/colors";
+import { AvatarSizes } from "@styles/sizes";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import {
   Alert,
@@ -21,7 +22,6 @@ import { getPreferredAvatar } from "../../utils/profile";
 import { conversationName, getTitleFontScale } from "../../utils/str";
 import Avatar from "../Avatar";
 import { useEnableDebug } from "../DebugButton";
-import Picto from "../Picto/Picto";
 
 type Props = {
   isBlockedPeer: boolean;
@@ -132,27 +132,15 @@ export default function ConversationTitle({
           paddingRight: 40,
         }}
       >
-        {avatar ? (
-          <Avatar
-            uri={avatar}
-            size={30}
-            style={{
-              marginRight: Platform.OS === "android" ? 24 : 7,
-              marginLeft: Platform.OS === "ios" ? 0 : -9,
-            }}
-          />
-        ) : (
-          <Picto
-            picto="info.circle"
-            // Reason this is smaller than avatar is when it's the same size, looks like more of an error icon than an avatar placeholder
-            size={Platform.OS === "android" ? 20 : 16}
-            color={textPrimaryColor(colorScheme)}
-            style={{
-              marginRight: Platform.OS === "android" ? 24 : 16,
-              marginLeft: Platform.OS === "ios" ? 0 : -9,
-            }}
-          />
-        )}
+        <Avatar
+          uri={avatar}
+          size={AvatarSizes.conversationTitle}
+          style={{
+            marginRight: Platform.OS === "android" ? 24 : 7,
+            marginLeft: Platform.OS === "ios" ? 0 : -9,
+          }}
+          name={conversationName(conversation)}
+        />
         <Text
           style={{
             color: textPrimaryColor(colorScheme),

components/Avatar.tsx

@@ -1,3 +1,4 @@
+import { AvatarSizes } from "@styles/sizes";
 import React, { useCallback, useEffect, useState } from "react";
 import { Platform, TouchableOpacity } from "react-native";
 
@@ -10,7 +11,7 @@ import {
 } from "../../data/store/accountsStore";
 import { evmHelpers } from "../../utils/evm/helpers";
 import { navigate } from "../../utils/navigation";
-import { getPreferredAvatar } from "../../utils/profile";
+import { getPreferredAvatar, getPreferredName } from "../../utils/profile";
 import Avatar from "../Avatar";
 import Button from "../Button/Button";
 
@@ -81,13 +82,14 @@ export default function ProfileSettingsButton() {
     <TouchableOpacity activeOpacity={0.2} onPress={openProfile}>
       <Avatar
         uri={getPreferredAvatar(socials)}
-        size={Platform.OS === "ios" ? 16 : 24}
+        size={AvatarSizes.profileSettings}
         style={{
           width: Platform.OS === "android" ? undefined : 32,
           height: Platform.OS === "android" ? undefined : 32,
           marginRight: Platform.OS === "android" ? 0 : 10,
           marginTop: Platform.OS === "ios" ? 3 : 0,
         }}
+        name={getPreferredName(socials, account)}
       />
     </TouchableOpacity>
   );

components/Chat/Message/Message.tsx

@@ -9,6 +9,7 @@ import {
   textPrimaryColor,
   textSecondaryColor,
 } from "@styles/colors";
+import { AvatarSizes } from "@styles/sizes";
 import * as Haptics from "expo-haptics";
 import React, { memo, useCallback, useEffect, useRef, useState } from "react";
 import {
@@ -120,9 +121,10 @@ const ConversationListItem = memo(function ConversationListItem({
   const listItemContent = (
     <View style={styles.conversationListItem}>
       <Avatar
-        size={Platform.OS === "ios" ? 56 : 47}
+        size={AvatarSizes.conversationListItem}
         style={styles.avatarWrapper}
         uri={conversationPeerAvatar}
+        name={conversationName}
       />
       <View style={styles.conversationListItemContent}>
         <Text style={styles.conversationName} numberOfLines={1}>

components/Conversation/ConversationTitle.tsx

@@ -259,6 +259,7 @@ export const UserProfile = ({ onboarding, navigation }: Props) => {
         uri={profile?.avatar}
         style={styles.avatar}
         color={intermediaryScreenShown}
+        name={profile.displayName || "👋"}
       />
       {intermediaryScreenShown && (
         <>

components/ConversationList/ProfileSettingsButton.tsx

@@ -1,4 +1,5 @@
 import { backgroundColor, textSecondaryColor } from "@styles/colors";
+import { AvatarSizes } from "@styles/sizes";
 import { FC, useCallback } from "react";
 import {
   StyleSheet,
@@ -12,7 +13,7 @@ import { XmtpConversation } from "../../data/store/chatStore";
 import { useGroupName } from "../../hooks/useGroupName";
 import { useGroupPhoto } from "../../hooks/useGroupPhoto";
 import { navigate } from "../../utils/navigation";
-import { getPreferredAvatar } from "../../utils/profile";
+import { getPreferredAvatar, getPreferredName } from "../../utils/profile";
 import Avatar from "../Avatar";
 interface Props {
   conversation: XmtpConversation;
@@ -48,8 +49,9 @@ export const PinnedConversation: FC<Props> = ({ conversation }) => {
       <Avatar
         key={conversation.topic}
         uri={avatar}
-        size={80}
+        size={AvatarSizes.pinnedConversation}
         style={styles.avatar}
+        name={getPreferredName(socials, conversation.peerAddress || "")}
       />
       <Text style={styles.text}>{title}</Text>
     </TouchableOpacity>

components/ConversationListItem.tsx

@@ -4,6 +4,7 @@ import {
   textPrimaryColor,
   textSecondaryColor,
 } from "@styles/colors";
+import { AvatarSizes } from "@styles/sizes";
 import {
   Image,
   Platform,
@@ -68,8 +69,9 @@ export function Recommendation({
       {!embedInChat && (
         <Avatar
           uri={getPreferredAvatar(profile)}
-          size={40}
+          size={AvatarSizes.listItemDisplay}
           style={styles.avatar}
+          name={preferredName}
         />
       )}
       <View style={styles.recommendationLeft}>

components/Onboarding/UserProfile.tsx

@@ -4,6 +4,7 @@ import {
   textPrimaryColor,
   textSecondaryColor,
 } from "@styles/colors";
+import { AvatarSizes } from "@styles/sizes";
 import { Platform, StyleSheet, Text, View, useColorScheme } from "react-native";
 
 import { ProfileSocials } from "../../data/store/profilesStore";
@@ -41,7 +42,12 @@ export function ProfileSearchItem({
   return (
     <View key={address} style={styles.container}>
       <View style={styles.left}>
-        <Avatar uri={preferredAvatar} size={40} style={styles.avatar} />
+        <Avatar
+          uri={preferredAvatar}
+          size={AvatarSizes.listItemDisplay}
+          style={styles.avatar}
+          name={preferredName}
+        />
         <View>
           <Text style={styles.title}>
             {preferredName || shortAddress(address)}

components/PinnedConversations/PinnedConversation.tsx

@@ -1873,7 +1873,7 @@ SPEC CHECKSUMS:
   web3.swift: 2263d1e12e121b2c42ffb63a5a7beb1acaf33959
   XMTP: 7d69afe403538056efb6caf01db7248b01221c48
   XMTPReactNative: b5b2efeb9ad30341896b60fbb2a8373dd3d0dd20
-  Yoga: d17d2cc8105eed528474683b42e2ea310e1daf61
+  Yoga: 805bf71192903b20fc14babe48080582fee65a80
 
 PODFILE CHECKSUM: 2cf1857df00ddf0c58944ef41304afd85ca07ba7
 

components/Recommendations/Recommendation.tsx

@@ -294,7 +294,12 @@ export default function GroupScreen({
     >
       <List.Section>
         <View style={{ alignItems: "center" }}>
-          <Avatar uri={localGroupPhoto} style={styles.avatar} color={false} />
+          <Avatar
+            uri={localGroupPhoto}
+            style={styles.avatar}
+            color={false}
+            name={formattedGroupName}
+          />
           {canEditGroupMetadata && (
             <Button
               variant="text"

components/Search/ProfileSearchItem.tsx

@@ -161,7 +161,12 @@ export default function NewGroupSummary({
     >
       <List.Section>
         <View style={styles.listSectionContainer}>
-          <Avatar uri={groupPhoto} style={styles.avatar} color={false} />
+          <Avatar
+            uri={groupPhoto}
+            style={styles.avatar}
+            color={false}
+            name={groupName}
+          />
           <Button
             variant="text"
             title={

ios/Podfile.lock

@@ -500,7 +500,11 @@ export default function ProfileScreen({
       style={styles.profile}
       contentContainerStyle={styles.profileContent}
     >
-      <Avatar uri={getPreferredAvatar(socials)} style={styles.avatar} />
+      <Avatar
+        uri={getPreferredAvatar(socials)}
+        style={styles.avatar}
+        name={getPreferredName(socials, peerAddress)}
+      />
       <Text style={styles.title}>{getPreferredName(socials, peerAddress)}</Text>
       {isMyProfile && (
         <TableView

screens/Group.tsx

@@ -1,9 +1,17 @@
 import { Platform } from "react-native";
 
+export enum AvatarSizes {
+  default = 121,
+  conversationListItem = Platform.OS === "ios" ? 56 : 47,
+  messageSender = Platform.OS === "ios" ? 24 : 21,
+  conversationTitle = 30,
+  profileSettings = Platform.OS === "ios" ? 16 : 24,
+  pinnedConversation = 80,
+  listItemDisplay = 40,
+}
+
 // Sizes, spaces, paddings, margins, etc.
-export const sizes = {
-  avatar: Platform.OS === "ios" ? 24 : 21,
-};
+export const sizes = {};
 
 // Font sizes
 export const fontSizes = {};