created screen and header

src/components/avatarHeader/avatarHeaderStyles.js

@@ -0,0 +1,31 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  headerContainer: {
+    height: 100,
+    flexDirection: 'row',
+    padding: 21,
+  },
+  backIcon: {
+    color: '$white',
+  },
+  wrapper: {
+    marginLeft: 16,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textWrapper: {
+    marginLeft: 16,
+  },
+  name: {
+    color: '$white',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  username: {
+    color: '$white',
+    fontSize: 12,
+    marginTop: 4,
+  },
+});

src/components/avatarHeader/avatarHeaderView.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { withNavigation } from 'react-navigation';
+import { View, Text } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { UserAvatar } from '../userAvatar';
+import { IconButton } from '../iconButton';
+
+// Styles
+import styles from './avatarHeaderStyles';
+
+const TooltipView = ({ username, name, reputation, navigation }) => (
+  <LinearGradient
+    start={{ x: 0, y: 0 }}
+    end={{ x: 1, y: 0 }}
+    colors={['#357ce6', '#2d5aa0']}
+    style={styles.headerView}
+  >
+    <View style={styles.headerContainer}>
+      <IconButton
+        iconStyle={styles.backIcon}
+        iconType="MaterialIcons"
+        name="arrow-back"
+        onPress={() => navigation.goBack()}
+        size={25}
+      />
+      <View style={styles.wrapper}>
+        <UserAvatar noAction size="xl" username={username} />
+        <View style={styles.textWrapper}>
+          <Text style={styles.name}>{name}</Text>
+          <Text style={styles.username}>{`@${username} (${reputation})`}</Text>
+        </View>
+      </View>
+    </View>
+  </LinearGradient>
+);
+
+export default withNavigation(TooltipView);

src/components/avatarHeader/index.js

@@ -0,0 +1,3 @@
+import AvatarHeader from './avatarHeaderView';
+
+export { AvatarHeader };

src/components/basicHeader/view/basicHeaderView.js

@@ -100,7 +100,7 @@ class BasicHeaderView extends Component {
             <IconButton
               iconStyle={[styles.backIcon, isModalHeader && styles.closeIcon]}
               iconType="MaterialIcons"
-              name={isModalHeader ? 'arrow-back' : 'arrow-back'}
+              name="arrow-back"
               onPress={() => (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())}
               disabled={disabled}
             />

src/components/profileSummary/view/profileSummaryView.js

@@ -67,6 +67,7 @@ class ProfileSummaryView extends PureComponent {
       handleFollowUnfollowUser,
       handleOnFavoritePress,
       handleOnFollowsPress,
+      handleOnPressProfileEdit,
       handleUIChange,
       hoursRC,
       hoursVP,
@@ -184,7 +185,7 @@ class ProfileSummaryView extends PureComponent {
               </TouchableOpacity>
             </Fragment>
           </View>
-          {isLoggedIn && !isOwnProfile && (
+          {isLoggedIn && !isOwnProfile ? (
             <View style={styles.rightIcons}>
               <IconButton
                 backgroundColor="transparent"
@@ -221,6 +222,19 @@ class ProfileSummaryView extends PureComponent {
                 />
               )}
             </View>
+          ) : (
+            isOwnProfile && (
+              <Fragment>
+                <IconButton
+                  backgroundColor="transparent"
+                  color="#c1c5c7"
+                  iconType="MaterialCommunityIcons"
+                  name="pencil"
+                  onPress={handleOnPressProfileEdit}
+                  size={20}
+                />
+              </Fragment>
+            )
           )}
         </View>
       </Fragment>

src/constants/routeNames.js

@@ -24,6 +24,7 @@ export default {
     PROMOTE: `Promote${SCREEN_SUFFIX}`,
     FREE_ESTM: `FreeEstm${SCREEN_SUFFIX}`,
     REBLOGS: `Reblogs${SCREEN_SUFFIX}`,
+    PROFILE_EDIT: `ProfileEdit${SCREEN_SUFFIX}`,
   },
   DRAWER: {
     MAIN: `Main${DRAWER_SUFFIX}`,

src/containers/index.js

@@ -1,4 +1,5 @@
 import PointsContainer from './pointsContainer';
 import TransferContainer from './transferContainer';
+import ProfileEditContainer from './profileEditContainer';
 
-export { PointsContainer, TransferContainer };
+export { PointsContainer, TransferContainer, ProfileEditContainer };

src/containers/profileEditContainer.js

@@ -0,0 +1,39 @@
+import { Component } from 'react';
+import { connect } from 'react-redux';
+
+// import ROUTES from '../constants/routeNames';
+
+class ProfileEditContainer extends Component {
+  /* Props
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  _handleOnSave = () => {};
+
+  render() {
+    const { children, currentAccount } = this.props;
+
+    return (
+      children &&
+      children({
+        currentAccount,
+      })
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  currentAccount: state.account.currentAccount,
+});
+
+export default connect(mapStateToProps)(ProfileEditContainer);

src/navigation/routes.js

@@ -9,6 +9,8 @@ import { default as ROUTES } from '../constants/routeNames';
 // Screens
 import {
   Bookmarks,
+  Boost,
+  BoostPost,
   Drafts,
   Editor,
   Follows,
@@ -16,15 +18,14 @@ import {
   PinCode,
   Post,
   Profile,
+  ProfileEdit,
+  Promote,
+  Reblogs,
+  SearchResult,
   Settings,
   SteemConnect,
-  Voters,
-  SearchResult,
   Transfer,
-  Boost,
-  Promote,
-  BoostPost,
-  Reblogs,
+  Voters,
 } from '../screens';
 
 // Components
@@ -55,6 +56,12 @@ const stackNavigatior = createStackNavigator(
         header: () => null,
       },
     },
+    [ROUTES.SCREENS.PROFILE_EDIT]: {
+      screen: ProfileEdit,
+      navigationOptions: {
+        header: () => null,
+      },
+    },
     [ROUTES.SCREENS.POST]: {
       screen: Post,
       navigationOptions: {

src/screens/index.js

@@ -19,6 +19,7 @@ import Promote from './promote/screen/promoteScreen';
 import SteemConnect from './steem-connect/steemConnect';
 import Transfer from './transfer';
 import Reblogs from './reblogs';
+import ProfileEdit from './profileEdit/screen/profileEditScreen';
 
 export {
   Bookmarks,
@@ -35,11 +36,12 @@ export {
   Points,
   Post,
   Profile,
+  ProfileEdit,
   Promote,
+  Reblogs,
   SearchResult,
   Settings,
   SteemConnect,
   Transfer,
   Voters,
-  Reblogs,
 };

src/screens/profile/container/profileContainer.js

@@ -343,6 +343,12 @@ class ProfileContainer extends Component {
     this.setState({ forceLoadPost: value });
   };
 
+  _handleOnPressProfileEdit = () => {
+    const { navigation } = this.props;
+
+    navigation.navigate(ROUTES.SCREENS.PROFILE_EDIT);
+  };
+
   render() {
     const {
       avatar,
@@ -368,16 +374,19 @@ class ProfileContainer extends Component {
         about={get(user, 'about.profile')}
         activePage={activePage}
         avatar={avatar}
+        changeForceLoadPostState={this._changeForceLoadPostState}
         comments={comments}
         currency={currency}
         error={error}
         follows={follows}
+        forceLoadPost={forceLoadPost}
         getReplies={() => this._getReplies(username)}
         handleFollowUnfollowUser={this._handleFollowUnfollowUser}
         handleMuteUnmuteUser={this._handleMuteUnmuteUser}
         handleOnBackPress={this._handleOnBackPress}
         handleOnFavoritePress={this._handleOnFavoritePress}
         handleOnFollowsPress={this._handleFollowsPress}
+        handleOnPressProfileEdit={this._handleOnPressProfileEdit}
         isDarkTheme={isDarkTheme}
         isFavorite={isFavorite}
         isFollowing={isFollowing}
@@ -389,8 +398,6 @@ class ProfileContainer extends Component {
         selectedQuickProfile={selectedQuickProfile}
         selectedUser={user}
         username={username}
-        forceLoadPost={forceLoadPost}
-        changeForceLoadPostState={this._changeForceLoadPostState}
       />
     );
   }

src/screens/profile/screen/profileScreen.js

@@ -62,15 +62,19 @@ class ProfileScreen extends PureComponent {
   render() {
     const {
       about,
+      activePage,
+      changeForceLoadPostState,
       comments,
       currency,
       follows,
+      forceLoadPost,
       getReplies,
       handleFollowUnfollowUser,
       handleMuteUnmuteUser,
       handleOnBackPress,
       handleOnFavoritePress,
       handleOnFollowsPress,
+      handleOnPressProfileEdit,
       intl,
       isDarkTheme,
       isFavorite,
@@ -83,9 +87,6 @@ class ProfileScreen extends PureComponent {
       selectedQuickProfile,
       selectedUser,
       username,
-      activePage,
-      forceLoadPost,
-      changeForceLoadPostState,
     } = this.props;
 
     const {
@@ -175,6 +176,7 @@ class ProfileScreen extends PureComponent {
                 location={location}
                 percentRC={resourceCredits}
                 percentVP={votingPower}
+                handleOnPressProfileEdit={handleOnPressProfileEdit}
               />
             </CollapsibleCard>
           )}

src/screens/profileEdit/screen/profileEditScreen.js

@@ -0,0 +1,41 @@
+import React, { PureComponent, Fragment } from 'react';
+import { injectIntl } from 'react-intl';
+import get from 'lodash/get';
+
+import { ProfileEditContainer } from '../../../containers';
+
+import AvatarHeader from '../../../components/avatarHeader/avatarHeaderView';
+
+class ProfileEditScreen extends PureComponent {
+  /* Props
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+
+  render() {
+    return (
+      <ProfileEditContainer>
+        {({ currentAccount }) => (
+          <Fragment>
+            <AvatarHeader
+              username={get(currentAccount, 'name')}
+              name={get(currentAccount, 'about.profile.name')}
+              reputation={get(currentAccount, 'reputation')}
+            />
+          </Fragment>
+        )}
+      </ProfileEditContainer>
+    );
+  }
+}
+
+export default injectIntl(ProfileEditScreen);

src/screens/settings/screen/settingsScreen.js

@@ -84,15 +84,6 @@ class SettingsScreen extends PureComponent {
               })}
               titleStyle={styles.cardTitle}
             />
-            <SettingsItem
-              title={intl.formatMessage({
-                id: 'settings.dark_theme',
-              })}
-              type="toggle"
-              actionType="theme"
-              isOn={isDarkTheme}
-              handleOnChange={handleOnChange}
-            />
             <SettingsItem
               title={intl.formatMessage({
                 id: 'settings.currency',
@@ -143,6 +134,15 @@ class SettingsScreen extends PureComponent {
               selectedOptionIndex={parseInt(nsfw, 10)}
               handleOnChange={handleOnChange}
             />
+            <SettingsItem
+              title={intl.formatMessage({
+                id: 'settings.dark_theme',
+              })}
+              type="toggle"
+              actionType="theme"
+              isOn={isDarkTheme}
+              handleOnChange={handleOnChange}
+            />
             {!!isLoggedIn && (
               <SettingsItem
                 title={intl.formatMessage({