created tab bar according to scroll element && enhanced couple comp && upvoted added && comment count added

src/components/basicUIElements/index.js

@@ -9,9 +9,11 @@ import ProfileSummaryPlaceHolder from './view/profileSummaryPlaceHolder';
 import Tag from './view/tagView';
 import TextWithIcon from './view/textWithIconView';
 import WalletLineItem from './view/walletLineItemView';
+import StickyBar from './view/stickyBarView';
 
 export {
   // Card,
+  StickyBar,
   Chip,
   GrayWrapper,
   LineBreak,

src/components/basicUIElements/view/stickyBarStyles.js

@@ -0,0 +1,20 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    backgroundColor: '$white',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '$deviceWidth',
+    height: 50,
+    shadowOpacity: 0.2,
+    shadowOffset: {
+      height: 1.5,
+    },
+  },
+  fixedFooter: {
+    position: 'absolute',
+    bottom: 0,
+  },
+});

src/components/basicUIElements/view/stickyBarView.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from './stickyBarStyles';
+
+const StickyBar = ({ children, isFixedFooter }) => (
+  <View style={[styles.container, isFixedFooter && styles.fixedFooter]}>{children}</View>
+);
+
+export default StickyBar;

src/components/basicUIElements/view/textWithIconStyles.js

@@ -10,12 +10,13 @@ export default EStyleSheet.create({
     alignSelf: 'flex-start',
   },
   icon: {
-    color: '#c1c5c7',
+    color: '$iconColor',
     fontSize: 12,
     marginRight: 3,
   },
   text: {
-    color: '#788187',
+    color: '$primaryDarkGray',
+    alignSelf: 'center',
     fontSize: 11,
   },
 });

src/components/basicUIElements/view/textWithIconView.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import { View, TouchableHighlight, Text } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Icon } from '../../icon';
 import styles from './textWithIconStyles';
 
 const TextWithIcon = ({
-  iconName, text, isClickable, onPress,
+  iconName, text, isClickable, onPress, iconStyle, iconType,
 }) => (
   <View style={styles.container}>
     {isClickable || onPress ? (
       <TouchableHighlight underlayColor="transparent" onPress={() => onPress && onPress()}>
         <View style={styles.wrapper}>
-          {text && <Ionicons style={styles.icon} name={iconName} />}
+          <Icon style={[styles.icon, iconStyle]} name={iconName} iconType={iconType} />
-          <Text style={styles.text}>{text}</Text>
+          <Text style={[styles.text]}>{text}</Text>
         </View>
       </TouchableHighlight>
     ) : (
       <View style={styles.wrapper}>
-        {text && <Ionicons style={styles.icon} name={iconName} />}
+        {text && <Icon style={[styles.icon, iconStyle]} name={iconName} iconType={iconType} />}
         <Text style={styles.text}>{text}</Text>
       </View>
     )}

src/components/markdownEditor/view/markdownEditorStyles.js

@@ -17,17 +17,6 @@ export default EStyleSheet.create({
   inlinePadding: {
     padding: 8,
   },
-  editorButtons: {
-    flexDirection: 'row',
-    backgroundColor: '$white',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: 50,
-    shadowOpacity: 0.2,
-    shadowOffset: {
-      height: 1.5,
-    },
-  },
   leftButtonsWrapper: {
     marginLeft: 16,
     flexDirection: 'row',

src/components/markdownEditor/view/markdownEditorView.js

@@ -8,6 +8,7 @@ import { MarkdownView } from 'react-native-markdown-view';
 import Formats from './formats/formats';
 import { IconButton } from '../../iconButton';
 import { DropdownButton } from '../../dropdownButton';
+import { StickyBar } from '../../basicUIElements';
 
 // Styles
 import styles from './markdownEditorStyles';
@@ -85,7 +86,7 @@ export default class MarkdownEditorView extends Component {
   );
 
   _renderEditorButtons = ({ getState, setState }) => (
-    <View style={styles.editorButtons}>
+    <StickyBar>
       <View style={styles.leftButtonsWrapper}>
         <FlatList
           data={Formats}
@@ -111,7 +112,7 @@ export default class MarkdownEditorView extends Component {
           isHasChildIcon
         />
       </View>
-    </View>
+    </StickyBar>
   );
 
   render() {

src/components/postView/container/postDisplayContainer.js

@@ -42,9 +42,15 @@ class PostDisplayContainer extends Component {
   };
 
   render() {
-    const { post } = this.props;
+    const { post, currentUser } = this.props;
 
-    return <PostDisplayView handleOnUserPress={this._handleOnUserPress} post={post} />;
+    return (
+      <PostDisplayView
+        currentUser={currentUser}
+        handleOnUserPress={this._handleOnUserPress}
+        post={post}
+      />
+    );
   }
 }
 

src/components/postView/view/postDisplayStyles.js

@@ -35,4 +35,15 @@ export default EStyleSheet.create({
     color: '$primaryBlack',
     fontWeight: 'bold',
   },
+  stickyWrapper: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+  },
+  barIcons: {
+    color: '$primaryDarkGray',
+    fontSize: 20,
+    marginRight: 8,
+    marginLeft: 25,
+    alignSelf: 'center',
+  },
 });

src/components/postView/view/postDisplayView.js

@@ -1,15 +1,20 @@
 import React, { Component, Fragment } from 'react';
-import { View, Text, ScrollView } from 'react-native';
+import {
+  View, Text, ScrollView, Dimensions,
+} from 'react-native';
 
 // Constants
 
 // Components
 import { PostHeaderDescription, PostBody, Tags } from '../../postElements';
-import { PostPlaceHolder } from '../../basicUIElements';
+import { PostPlaceHolder, StickyBar, TextWithIcon } from '../../basicUIElements';
+import { Upvote } from '../../upvote';
+import { IconButton } from '../../iconButton';
 
 // Styles
 import styles from './postDisplayStyles';
 
+const HEIGHT = Dimensions.get('window').width;
 class PostDisplayView extends Component {
   /* Props
     * ------------------------------------------------
@@ -18,24 +23,73 @@ class PostDisplayView extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      postHeight: 0,
+      scrollHeight: 0,
+    };
   }
 
   // Component Life Cycles
 
   // Component Functions
+  _handleOnScroll = (event) => {
+    const { y } = event.nativeEvent.contentOffset;
+
+    this.setState({
+      scrollHeight: HEIGHT + y,
+    });
+  };
+
+  _handleOnPostLayout = (event) => {
+    const { height } = event.nativeEvent.layout;
+
+    this.setState({
+      postHeight: height,
+    });
+  };
+
+  _getTabBar = (isFixedFooter = false) => {
+    const { post, currentUser } = this.props;
+
+    console.log(post);
+    return (
+      <StickyBar isFixedFooter={isFixedFooter}>
+        <View style={styles.stickyWrapper}>
+          <Upvote isShowpayoutValue content={post} user={currentUser} isLoggedIn={!!currentUser} />
+          <TextWithIcon
+            isClickable
+            iconStyle={styles.barIcons}
+            textMarginLeft={20}
+            text={post && post.vote_count}
+            iconName="ios-people"
+          />
+          <TextWithIcon
+            isClickable
+            iconStyle={styles.barIcons}
+            textMarginLeft={20}
+            text="64"
+            iconName="comments"
+            iconType="FontAwesome"
+          />
+        </View>
+      </StickyBar>
+    );
+  };
 
   render() {
     const { post, handleOnUserPress } = this.props;
+    const { postHeight, scrollHeight } = this.state;
+
+    const isPostEnd = scrollHeight > postHeight;
 
     return (
       <View style={styles.container}>
-        <ScrollView style={styles.scroll}>
+        <ScrollView style={styles.scroll} onScroll={event => this._handleOnScroll(event)}>
           <View style={styles.header}>
             {!post ? (
               <PostPlaceHolder />
             ) : (
-              <Fragment>
+              <View onLayout={event => this._handleOnPostLayout(event)}>
                 <Text style={styles.title}>{post.title}</Text>
                 <PostHeaderDescription
                   handleOnUserPress={handleOnUserPress}
@@ -58,10 +112,13 @@ class PostDisplayView extends Component {
                     {post.created}
                   </Text>
                 </View>
-              </Fragment>
+              </View>
             )}
           </View>
+          {isPostEnd && this._getTabBar()}
+          {/* Comments Here! */}
         </ScrollView>
+        {!isPostEnd && this._getTabBar(true)}
       </View>
     );
   }

src/components/posts/view/postsView.js

@@ -29,9 +29,10 @@ class PostsView extends Component {
   }
 
   componentDidMount() {
-    const { user } = this.state;
+    const { user, isLoggedIn, isLoginMust } = this.state;
+    const isCanLoad = isLoginMust ? isLoggedIn : true;
 
-    this._loadPosts(user);
+    isCanLoad && this._loadPosts(user);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -55,8 +56,8 @@ class PostsView extends Component {
             this.setState({
               isReady: true,
               posts: result,
-              startAuthor: result[result.length - 1].author,
+              startAuthor: result[result.length - 1] && result[result.length - 1].author,
-              startPermlink: result[result.length - 1].permlink,
+              startPermlink: result[result.length - 1] && result[result.length - 1].permlink,
               refreshing: false,
             });
           }
@@ -126,7 +127,12 @@ class PostsView extends Component {
       isReady, refreshing, posts, user,
     } = this.state;
     const {
-      componentId, handleOnUserPress, filterOptions, handleOnContentPress,
+      componentId,
+      handleOnUserPress,
+      filterOptions,
+      isLoginMust,
+      handleOnContentPress,
+      isLoggedIn,
     } = this.props;
 
     if (user && posts && posts.length > 0) {
@@ -148,7 +154,7 @@ class PostsView extends Component {
                 componentId={componentId}
                 content={item}
                 user={user}
-                isLoggedIn
+                isLoggedIn={isLoggedIn}
                 handleOnUserPress={handleOnUserPress}
                 handleOnContentPress={handleOnContentPress}
               />
@@ -178,6 +184,10 @@ class PostsView extends Component {
       );
     }
 
+    // if (isLoginMust && !isLoggedIn) {
+    //   return <NoPost defaultText="Login to see!" />;
+    // }
+
     return (
       <Fragment>
         <PostCardPlaceHolder />

src/components/upvote/view/upvoteStyles.js

@@ -57,4 +57,10 @@ export default EStyleSheet.create({
   overlay: {
     backgroundColor: '#403c4449',
   },
+  payoutValue: {
+    alignSelf: 'center',
+    fontSize: 10,
+    color: '$primaryDarkGray',
+    marginLeft: 8,
+  },
 });

src/components/upvote/view/upvoteView.js

@@ -103,7 +103,7 @@ class UpvoteView extends Component {
   };
 
   render() {
-    const { isLoggedIn } = this.props;
+    const { isLoggedIn, isShowpayoutValue, content } = this.props;
     const {
       isVoting, isModalVisible, amount, value, isVoted,
     } = this.state;
@@ -126,11 +126,14 @@ class UpvoteView extends Component {
               {isVoting ? (
                 <ActivityIndicator />
               ) : (
-                <Icon
+                <Fragment>
-                  style={[styles.upvoteIcon, { color: '#007ee5' }]}
+                  <Icon
-                  active={!isLoggedIn}
+                    style={[styles.upvoteIcon, { color: '#007ee5' }]}
-                  name={isVoted ? 'ios-arrow-dropup-circle' : 'ios-arrow-dropup-outline'}
+                    active={!isLoggedIn}
-                />
+                    name={isVoted ? 'ios-arrow-dropup-circle' : 'ios-arrow-dropup-outline'}
+                  />
+                  {isShowpayoutValue && <Text style={styles.payoutValue}>$ {content && content.pending_payout_value}</Text> }
+                </Fragment>
               )}
             </TouchableOpacity>
 

src/screens/home/screen/homeScreen.js

@@ -94,26 +94,15 @@ export default class HomeScreen extends PureComponent {
             )}
           >
             <View tabLabel="Feed" style={styles.tabbarItem}>
-              {isLoggedIn ? (
+              <Posts
-                <Posts
+                filterOptions={['NEW POSTS', 'VOTES', 'REPLIES', 'MENTIONS', 'FOLLOWS', 'REBLOGS']}
-                  filterOptions={[
+                isLoginMust
-                    'NEW POSTS',
+                getFor="feed"
-                    'VOTES',
+                tag={user.name}
-                    'REPLIES',
+                user={user}
-                    'MENTIONS',
+                isLoggedIn={isLoggedIn}
-                    'FOLLOWS',
+                componentId={componentId}
-                    'REBLOGS',
+              />
-                  ]}
-                  isLoginMust
-                  getFor="feed"
-                  tag={user.name}
-                  user={user}
-                  isLoggedIn={isLoggedIn}
-                  componentId={componentId}
-                />
-              ) : (
-                <Text>Login to see your Feed</Text>
-              )}
             </View>
             <View tabLabel="Hot" style={styles.tabbarItem}>
               <Posts

src/screens/post/container/postContainer.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 // import { connect } from 'react-redux';
 
 // Services and Actions
-import { getPost } from '../../../providers/steem/dsteem';
+import { getUserData, getAuthStatus } from '../../../realm/realm';
+import { getPost, getUser } from '../../../providers/steem/dsteem';
 
 // Middleware
 
@@ -25,6 +26,7 @@ class PostContainer extends Component {
     this.state = {
       post: null,
       error: null,
+      currentUser: null,
     };
   }
 
@@ -34,6 +36,7 @@ class PostContainer extends Component {
     const { author, permlink } = navigation.state && navigation.state.params;
 
     this._loadPost(author, permlink);
+    this._getUser();
   }
 
   // Component Functions
@@ -50,10 +53,34 @@ class PostContainer extends Component {
       });
   };
 
-  render() {
+  async _getUser() {
-    const { post, error } = this.state;
+    let _currentUser;
+    let userData;
+    let isLoggedIn;
 
-    return <PostScreen key={Math.random * 100} post={post} error={error} />;
+    await getAuthStatus().then((res) => {
+      isLoggedIn = res;
+    });
+
+    if (isLoggedIn) {
+      await getUserData().then((res) => {
+        _currentUser = Array.from(res);
+      });
+
+      userData = _currentUser && (await getUser(_currentUser[0].username));
+
+      await this.setState({
+        currentUser: userData,
+      });
+    }
+  }
+
+  render() {
+    const { post, error, currentUser } = this.state;
+
+    return (
+      <PostScreen currentUser={currentUser} key={Math.random * 100} post={post} error={error} />
+    );
   }
 }
 

src/screens/post/screen/postScreen.js

@@ -25,12 +25,12 @@ class PostScreen extends Component {
   // Component Functions
 
   render() {
-    const { post } = this.props;
+    const { post, currentUser } = this.props;
 
     return (
       <Fragment>
         <EditorHeader isHasDropdown title="Post" />
-        <PostDisplay post={post} />
+        <PostDisplay post={post} currentUser={currentUser} />
       </Fragment>
     );
   }