created user avatar container

src/components/formInput/view/formInputStyles.js

@@ -19,7 +19,6 @@ export default EStyleSheet.create({
     marginLeft: 12,
   },
   textInput: {
-    height: 60,
     flex: 0.7,
   },
   icon: {
@@ -27,6 +26,6 @@ export default EStyleSheet.create({
     fontSize: 25,
     top: 18,
     left: 8,
-    color:"$iconColor",
+    color: '$iconColor',
   },
 });

src/components/header/container/headerContainer.js

@@ -14,8 +14,6 @@ import { getReputation } from '../../../utils/user';
 // Component
 import { HeaderView } from '..';
 
-const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
-
 /*
  *            Props Name        Description                                     Value
  *@props -->  props name here   description here                                Value Type Here
@@ -48,18 +46,15 @@ class HeaderContainer extends Component {
     const {
       isLoggedIn, currentAccount, selectedUser, isReverse, isLoginDone,
     } = this.props;
-    let avatar;
     let displayName;
     let userName;
     let reputation;
 
     if (isReverse && selectedUser) {
-      avatar = selectedUser.avatar ? { uri: selectedUser.avatar } : DEFAULT_IMAGE;
       displayName = selectedUser.display_name;
       userName = selectedUser.name;
       reputation = getReputation(selectedUser.reputation);
     } else if (!isReverse) {
-      avatar = currentAccount.avatar ? { uri: currentAccount.avatar } : DEFAULT_IMAGE;
       displayName = currentAccount.display_name;
       userName = currentAccount.name;
       reputation = getReputation(currentAccount.reputation);
@@ -72,7 +67,6 @@ class HeaderContainer extends Component {
         isLoggedIn={isLoggedIn}
         isReverse={isReverse}
         isLoginDone={isLoginDone}
-        avatar={avatar}
         displayName={displayName}
         userName={userName}
         reputation={reputation}

src/components/header/view/headerStyles.js

@@ -49,9 +49,6 @@ export default EStyleSheet.create({
     fontSize: 12,
   },
   avatar: {
-    width: 32,
-    height: 32,
-    borderRadius: 32 / 2,
     alignSelf: 'flex-end',
     marginRight: 12,
   },

src/components/header/view/headerView.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-  View, StatusBar, Text, SafeAreaView, TouchableOpacity, Image,
+  View, Text, SafeAreaView, TouchableOpacity,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { injectIntl } from 'react-intl';
@@ -8,12 +8,10 @@ import { injectIntl } from 'react-intl';
 // Components
 import { SearchModal } from '../../searchModal';
 import { IconButton } from '../../iconButton';
-
+import { UserAvatar } from '../../userAvatar';
 // Styles
 import styles from './headerStyles';
 
-const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
-
 class HeaderView extends Component {
   /* Props
    * ------------------------------------------------
@@ -38,11 +36,9 @@ class HeaderView extends Component {
 
   render() {
     const {
-      avatar,
       displayName,
       handleOnPressBackButton,
       handleOpenDrawer,
-      hideStatusBar,
       intl,
       isLoggedIn,
       isLoginDone,
@@ -54,7 +50,6 @@ class HeaderView extends Component {
 
     return (
       <SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
-        {/* <StatusBar style={ { height: 20}} hidden={hideStatusBar} translucent /> */}
         <SearchModal
           placeholder={intl.formatMessage({
             id: 'header.search',
@@ -75,7 +70,7 @@ class HeaderView extends Component {
               isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
             ]}
           >
-            <Image style={styles.avatar} source={avatar} defaultSource={DEFAULT_IMAGE} />
+            <UserAvatar style={styles.avatar} userName={userName} />
           </LinearGradient>
         </TouchableOpacity>
         {displayName || userName ? (

src/components/sideMenu/view/sideMenuStyles.js

@@ -26,9 +26,6 @@ export default EStyleSheet.create({
   },
   userAvatar: {
     marginLeft: '$deviceWidth / 10',
-    width: 64,
-    height: 64,
-    borderRadius: 64 / 2,
   },
   otherUserAvatar: {
     marginLeft: -15,

src/components/sideMenu/view/sideMenuView.js

@@ -7,6 +7,7 @@ import LinearGradient from 'react-native-linear-gradient';
 
 // Components
 import { Icon, IconButton } from '../..';
+import { UserAvatar } from '../../userAvatar';
 
 // Constants
 import { default as MENU } from '../../../constants/sideMenuItems';
@@ -68,7 +69,6 @@ class SideMenuView extends Component {
       navigateToRoute, currentAccount, isLoggedIn, switchAccount, intl,
     } = this.props;
     const { menuItems, isAddAccountIconActive } = this.state;
-    const _avatar = currentAccount.avatar ? { uri: currentAccount.avatar } : DEFAULT_IMAGE;
 
     return (
       <View style={styles.container}>
@@ -84,7 +84,11 @@ class SideMenuView extends Component {
           >
             {isLoggedIn && (
               <View style={styles.headerContentWrapper}>
-                <Image style={styles.userAvatar} source={_avatar} defaultSource={DEFAULT_IMAGE} />
+                <UserAvatar
+                  userName={currentAccount.username}
+                  size="xl"
+                  style={styles.userAvatar}
+                />
                 <View style={styles.userInfoWrapper}>
                   {currentAccount.display_name && (
                     <Text style={styles.username}>{currentAccount.display_name}</Text>

src/components/upvote/view/upvoteView.js

@@ -110,7 +110,9 @@ class UpvoteView extends Component {
             isVoting: false,
           },
           () => {
-            fetchPost();
+            if (fetchPost) {
+              fetchPost();
+            }
           },
         );
       })

src/components/userAvatar/index.js

@@ -0,0 +1,4 @@
+import UserAvatar from './view/userAvatarView';
+
+export { UserAvatar };
+export default UserAvatar;

src/components/userAvatar/view/userAvatarStyles.js

@@ -0,0 +1,7 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  avatar: {
+    backgroundColor: '$white',
+  },
+});

src/components/userAvatar/view/userAvatarView.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Image } from 'react-native';
+import styles from './userAvatarStyles';
+
+const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
+
+/* Props
+ * ------------------------------------------------
+ *   @prop { type }    name                - Description....
+ */
+
+const UserAvatarView = ({ userName, size, style }) => {
+  const imageSize = size === 'xl' ? 'large' : 'medium';
+  const _avatar = userName ?  { uri: `https://steemitimages.com/u/${userName}/avatar/${imageSize}` } : DEFAULT_IMAGE;
+  let _size = 32;
+
+  if(size === 'xl') {
+    _size = 64
+  }
+
+  return <Image style={[styles.avatar, style, {width: _size, height: _size, borderRadius: _size / 2}]} source={_avatar} />;
+};
+
+export default UserAvatarView;
+// width: 32,
+// height: 32,
+// borderRadius: 32 / 2,
+// backgroundColor: '$white',