rendering empty comments view

src/components/comments/view/commentStyles.js

@@ -18,4 +18,11 @@ export default EStyleSheet.create({
     color: '$white',
     fontSize: 10,
   },
+  emptyText: {
+    color: '$primaryDarkGray',
+    fontSize: 16,
+    justifyContent: 'center',
+    marginTop: 5,
+    padding: 32,
+  },
 });

src/components/comments/view/commentsView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, Fragment, useRef } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, Text } from 'react-native';
 import get from 'lodash/get';
 import { useIntl } from 'react-intl';
 
@@ -44,21 +44,21 @@ const CommentsView = ({
 
 
   const _openCommentMenu = (item) => {
-    if(commentMenu.current){
+    if (commentMenu.current) {
       setSelectedComment(item);
       commentMenu.current.show();
     }
   };
 
   const _openReplyThread = (item) => {
-    if(item && openReplyThread){
+    if (item && openReplyThread) {
       openReplyThread(item)
     }
-    
+
   }
 
   const _readMoreComments = () => {
-    if(comments[0] && openReplyThread){
+    if (comments[0] && openReplyThread) {
       openReplyThread(comments[0])
     }
   };
@@ -111,7 +111,7 @@ const CommentsView = ({
         key={get(item, 'permlink')}
         marginLeft={marginLeft}
         handleOnLongPress={() => _openCommentMenu(item)}
-        openReplyThread={()=> _openReplyThread(item)}
+        openReplyThread={() => _openReplyThread(item)}
         fetchedAt={fetchedAt}
         incrementRepliesCount={incrementRepliesCount}
       />
@@ -120,19 +120,31 @@ const CommentsView = ({
 
 
   const styleOerride = commentNumber > 1 ? {
-    backgroundColor:EStyleSheet.value('$primaryLightBackground'),
-    marginTop:8,
-  }:null
+    backgroundColor: EStyleSheet.value('$primaryLightBackground'),
+    marginTop: 8,
+  } : null
+
+  const _renderEmptyContent = () => {
+    const _onPress = () => {
+      handleOnReplyPress()
+    }
+    return (
+      <Text onPress={_onPress} style={styles.emptyText}>
+        {intl.formatMessage({ id: "comments.no_comments" })}
+      </Text>
+    )
+  }
 
 
   return (
     <Fragment>
       <FlatList
-        style={{...styles.list, ...styleOerride  }}
-        contentContainerStyle={{padding:0}}
+        style={{ ...styles.list, ...styleOerride }}
+        contentContainerStyle={{ padding: 0 }}
         data={comments}
         renderItem={_renderItem}
         keyExtractor={(item) => get(item, 'permlink')}
+        ListEmptyComponent={_renderEmptyContent()}
         {...flatListProps}
       />
       <OptionsModal

src/components/postView/view/postDisplayView.js

@@ -6,6 +6,7 @@ import get from 'lodash/get';
 // Providers
 import { useSelector } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import EStyleSheet from 'react-native-extended-stylesheet';
 import { userActivity } from '../../../providers/ecency/ePoint';
 
 // Utils
@@ -18,11 +19,12 @@ import { Upvote } from '../../upvote';
 import { IconButton } from '../../iconButton';
 import { CommentsDisplay } from '../../commentsDisplay';
 import { ParentPost } from '../../parentPost';
+import { UserAvatar, QuickReplyModal } from '../..';
 
 // Styles
 import styles from './postDisplayStyles';
 import { OptionsModal } from '../../atoms';
-import { QuickReplyModal } from '../..';
+
 import getWindowDimensions from '../../../utils/getWindowDimensions';
 import { useAppDispatch } from '../../../hooks';
 import { showReplyModal } from '../../../redux/actions/uiAction';
@@ -107,9 +109,39 @@ const PostDisplayView = ({
     setCacheVoteIcrement(1);
   };
 
+  const _listHeader = (
+    <View
+      style={{ padding: 16, height: 40, flexDirection: 'row', alignItems: 'center', marginTop: 12 }}
+    >
+      <UserAvatar username="demo.com" />
+      <View
+        style={{
+          marginLeft: 16,
+          justifyContent: 'center',
+          height: 36,
+          borderRadius: 12,
+          flex: 1,
+          backgroundColor: EStyleSheet.value('$primaryLightGray'),
+        }}
+      >
+        <Text
+          style={{
+            color: EStyleSheet.value('$primaryDarkGray'),
+            fontSize: 16,
+            marginTop: 5,
+            paddingHorizontal: 16,
+          }}
+        >
+          Write a comment...
+        </Text>
+      </View>
+    </View>
+  );
+
   const _getTabBar = (isFixedFooter = false) => {
     return (
       <StickyBar isFixedFooter={isFixedFooter} style={styles.stickyBar}>
+        {_listHeader}
         <View style={[styles.stickyWrapper, { paddingBottom: insets.bottom ? insets.bottom : 8 }]}>
           <Upvote
             activeVotes={activeVotes}
@@ -211,9 +243,9 @@ const PostDisplayView = ({
   };
 
   // show quick reply modal
-  const _showQuickReplyModal = (post) => {
+  const _showQuickReplyModal = (_post = post) => {
     if (isLoggedIn) {
-      dispatch(showReplyModal(post));
+      dispatch(showReplyModal(_post));
     } else {
       console.log('Not LoggedIn');
     }

src/config/locales/en-US.json

@@ -724,7 +724,8 @@
     "title": "Comments",
     "reveal_comment": "Reveal comment",
     "read_more": "Read more comments",
-    "more_replies": "replies"
+    "more_replies": "replies",
+    "no_comments":"Be the first to respond..."
   },
   "search_result": {
     "others": "Others",