3 files changed, 23 insertions, 10 deletions
diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
new file mode 100644
index 00000000..831cf906
--- /dev/null
+++ b/src/components/common/Avatar.tsx
@@ -0,0 +1,18 @@
+import React, {FC} from 'react';
+import {Image, ImageStyle, StyleProp} from 'react-native';
+
+type AvatarProps = {
+  style: StyleProp<ImageStyle>;
+  uri: string | undefined;
+};
+const Avatar: FC<AvatarProps> = ({style, uri}) => {
+  return (
+    <Image
+      style={style}
+      defaultSource={require('../../assets/images/avatar-placeholder.png')}
+      source={{uri, cache: 'reload'}}
+    />
+  );
+};
+
+export default Avatar;
diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index 81351327..a2a7c0aa 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import {Image, StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {TAGGS_GRADIENT} from '../../constants';
+import Avatar from './Avatar';
 
 type AvatarTitleProps = {
-  avatar: string | null;
+  avatar: string | undefined;
 };
 const AvatarTitle: React.FC<AvatarTitleProps> = ({avatar}) => {
   return (
@@ -16,14 +17,7 @@ const AvatarTitle: React.FC<AvatarTitleProps> = ({avatar}) => {
         angleCenter={{x: 0.5, y: 0.5}}
         style={styles.gradient}
       />
-      <Image
-        style={styles.avatar}
-        source={
-          avatar
-            ? {uri: avatar}
-            : require('../../assets/images/avatar-placeholder.png')
-        }
-      />
+      <Avatar style={styles.avatar} uri={avatar} />
     </View>
   );
 };
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 5a601f1d..802cf505 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -23,3 +23,4 @@ export {default as FriendsButton} from './FriendsButton';
 export {default as TaggSquareButton} from './TaggSquareButton';
 export {default as GradientBorderButton} from './GradientBorderButton';
 export {default as BasicButton} from './BasicButton';
+export {default as Avatar} from './Avatar';