Added user avatar to pin code screen

src/screens/pinCode/container/pinCodeContainer.js

@@ -12,6 +12,8 @@ import { default as INITIAL } from '../../../constants/initial';
 
 import { PinCodeScreen } from '..';
 
+const DEFAULT_IMAGE = require('../../../assets/esteem.png');
+
 class PinCodeContainer extends Component {
   constructor(props) {
     super(props);
@@ -117,6 +119,16 @@ class PinCodeContainer extends Component {
     }
   });
 
+  _getUserAvatar = () => {
+    const { currentAccount } = this.props;
+    if (Object.keys(currentAccount).length === 0) return DEFAULT_IMAGE;
+    if (Object.keys(currentAccount.about).length === 0) return DEFAULT_IMAGE;
+    if (Object.keys(currentAccount.about.profile).length !== 0) {
+      return { uri: currentAccount.about.profile.profile_image };
+    }
+    return DEFAULT_IMAGE;
+  };
+
   render() {
     const { currentAccount } = this.props;
     const { informationText, isExistUser } = this.state;
@@ -126,6 +138,7 @@ class PinCodeContainer extends Component {
         setPinCode={this._setPinCode}
         showForgotButton={isExistUser}
         username={currentAccount ? currentAccount.name : 'unknow'}
+        avatar={this._getUserAvatar()}
       />
     );
   }

src/screens/pinCode/screen/pinCodeScreen.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
-import { Container } from 'native-base';
+import { Container, Thumbnail } from 'native-base';
 
-import { Logo, NumericKeyboard, PinAnimatedInput } from '../../../components';
+import { NumericKeyboard, PinAnimatedInput } from '../../../components';
 
 import styles from './pinCodeStyles';
 
@@ -46,13 +46,15 @@ class PinCodeScreen extends Component {
   };
 
   render() {
-    const { informationText, showForgotButton, username } = this.props;
+    const {
+      informationText, showForgotButton, username, avatar,
+    } = this.props;
     const { pin } = this.state;
 
     return (
       <Container style={styles.container}>
         <View style={styles.logoView}>
-          <Logo style={styles.logo} />
+          <Thumbnail source={avatar} />
         </View>
         <View style={styles.titleView}>
           <Text style={styles.title}>{`@${username}`}</Text>

src/screens/pinCode/screen/pinCodeStyles.js

@@ -7,6 +7,8 @@ export default EStyleSheet.create({
   },
   logoView: {
     flex: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   logo: {
     width: '$deviceWidth / 7',