refactored avatar

4 files changed, 16 insertions, 31 deletions

diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 3d31d42a..878e5a6b 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -22,6 +22,7 @@ import {
 } from '../../types';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {getMember, isOnline} from '../../utils/messages';
+import {Avatar} from '../common';
 
 const ChannelPreview: React.FC<
   ChannelPreviewMessengerProps<
@@ -87,13 +88,9 @@ const ChannelPreview: React.FC<
           navigation.navigate('Chat');
         }}>
         <View>
-          <Image
+          <Avatar
             style={styles.avatar}
-            source={
-              member
-                ? {uri: member.user?.thumbnail_url}
-                : require('../../assets/images/avatar-placeholder.png')
-            }
+            uri={member?.user?.thumbnail_url as string}
           />
           {online && <View style={styles.online} />}
         </View>
diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx
index 7ddaa7e6..37dab0fd 100644
--- a/src/components/messages/ChatHeader.tsx
+++ b/src/components/messages/ChatHeader.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useContext} from 'react';
-import {Image, StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useDispatch, useStore} from 'react-redux';
@@ -15,6 +15,7 @@ import {
   userXInStore,
 } from '../../utils';
 import {formatLastSeenText, getMember, isOnline} from '../../utils/messages';
+import {Avatar} from '../common';
 
 type ChatHeaderProps = {
   screenType: ScreenType;
@@ -50,13 +51,9 @@ const ChatHeader: React.FC<ChatHeaderProps> = (props) => {
     <View style={styles.container}>
       <TouchableOpacity style={styles.tappables} onPress={toProfile}>
         <View>
-          <Image
+          <Avatar
             style={styles.avatar}
-            source={
-              member
-                ? {uri: member.user?.thumbnail_url}
-                : require('../../assets/images/avatar-placeholder.png')
-            }
+            uri={member?.user?.thumbnail_url as string}
           />
           {online && <View style={styles.online} />}
         </View>
diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx
index a6e5c458..5585d246 100644
--- a/src/components/messages/ChatInput.tsx
+++ b/src/components/messages/ChatInput.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Image, StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import {useStore} from 'react-redux';
 import {
   AutoCompleteInput,
@@ -17,6 +17,7 @@ import {
   LocalUserType,
 } from '../../types';
 import {normalize} from '../../utils';
+import {Avatar} from '../common';
 import {ChatInputSubmit} from '../messages';
 
 const ChatInput: React.FC<
@@ -65,14 +66,7 @@ const ChatInput: React.FC<
   return (
     <View style={styles.container}>
       <View style={styles.textContainer}>
-        <Image
-          style={styles.avatar}
-          source={
-            avatar
-              ? {uri: avatar}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
-        />
+        <Avatar style={styles.avatar} uri={avatar} />
         <AutoCompleteInput />
         <View style={styles.actionButtons}>
           {/* TODO: Not working, toggled off for now */}
diff --git a/src/components/messages/MessageAvatar.tsx b/src/components/messages/MessageAvatar.tsx
index d275eae5..bcd4e7a8 100644
--- a/src/components/messages/MessageAvatar.tsx
+++ b/src/components/messages/MessageAvatar.tsx
@@ -1,9 +1,10 @@
 import React, {useContext} from 'react';
-import {Image, StyleSheet, View} from 'react-native';
-import {getMember, normalize} from '../../utils';
-import {useMessageContext} from 'stream-chat-react-native-core';
+import {StyleSheet, View} from 'react-native';
 import {useStore} from 'react-redux';
+import {useMessageContext} from 'stream-chat-react-native-core';
 import {ChatContext} from '../../App';
+import {getMember, normalize} from '../../utils';
+import {Avatar} from '../common';
 
 const MessageAvatar: React.FC = () => {
   const {channel} = useContext(ChatContext);
@@ -14,13 +15,9 @@ const MessageAvatar: React.FC = () => {
   return (
     <View style={styles.messageAvatarContainer}>
       {message.lastGroupMessage === true && (
-        <Image
+        <Avatar
           style={styles.messageAvatar}
-          source={
-            member
-              ? {uri: member.user?.thumbnail_url}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
+          uri={member?.user?.thumbnail_url as string}
         />
       )}
     </View>