Merge branch 'master' into tma821-load-badges-faster-ft

# Conflicts:
#	src/utils/users.ts

1 files changed, 3 insertions, 10 deletions

diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index bea989d9..66d68d8f 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -2,7 +2,6 @@ import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {
   Alert,
-  Image,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -23,6 +22,7 @@ import {
   userXInStore,
 } from '../../utils';
 import {addUserToRecentlySearched} from '../../utils/search';
+import {Avatar} from '../common';
 
 /**
  * This component returns user's profile picture friended by username as a touchable component.
@@ -48,7 +48,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
 }) => {
   const navigation = useNavigation();
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
-  const [avatar, setAvatar] = useState<string | null>(null);
+  const [avatar, setAvatar] = useState<string>();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -187,14 +187,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     <TouchableOpacity
       onPress={addToRecentlyStoredAndNavigateToProfile}
       style={containerStyle}>
-      <Image
-        style={avatarStyle}
-        source={
-          avatar
-            ? {uri: avatar}
-            : require('../../assets/images/avatar-placeholder.png')
-        }
-      />
+      <Avatar style={avatarStyle} uri={avatar} />
       <View style={nameContainerStyle}>
         {(previewType === 'Search' || previewType === 'Recent') && (
           <>