Add icons

src/view/com/FeedItem.tsx

@@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite'
 import {Text, Image, ImageSourcePropType, StyleSheet, View} from 'react-native'
 import {bsky} from '@adxp/mock-api'
 import moment from 'moment'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FeedViewItemModel} from '../../state/models/feed-view'
 
 const IMAGES: Record<string, ImageSourcePropType> = {
@@ -20,9 +21,12 @@ export const FeedItem = observer(function FeedItem({
   return (
     <View style={styles.outer}>
       {item.repostedBy && (
-        <Text style={styles.repostedBy}>
-          Reposted by {item.repostedBy.displayName}
-        </Text>
+        <View style={styles.repostedBy}>
+          <FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} />
+          <Text style={styles.repostedByText}>
+            Reposted by {item.repostedBy.displayName}
+          </Text>
+        </View>
       )}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
@@ -44,6 +48,36 @@ export const FeedItem = observer(function FeedItem({
             </Text>
           </View>
           <Text style={styles.postText}>{record.text}</Text>
+          <View style={styles.ctrls}>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlReplyIcon}
+                icon={['far', 'comment']}
+              />
+              <Text>{item.replyCount}</Text>
+            </View>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlRepostIcon}
+                icon="retweet"
+                size={22}
+              />
+              <Text>{item.repostCount}</Text>
+            </View>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlLikeIcon}
+                icon={['far', 'heart']}
+              />
+              <Text>{item.likeCount}</Text>
+            </View>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlShareIcon}
+                icon="share-from-square"
+              />
+            </View>
+          </View>
         </View>
       </View>
     </View>
@@ -58,7 +92,14 @@ const styles = StyleSheet.create({
     padding: 10,
   },
   repostedBy: {
+    flexDirection: 'row',
     paddingLeft: 70,
+  },
+  repostedByIcon: {
+    marginRight: 2,
+    color: 'gray',
+  },
+  repostedByText: {
     color: 'gray',
     fontWeight: 'bold',
     fontSize: 13,
@@ -100,5 +141,32 @@ const styles = StyleSheet.create({
   },
   postText: {
     fontSize: 15,
+    paddingBottom: 5,
+  },
+  ctrls: {
+    flexDirection: 'row',
+  },
+  ctrl: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    paddingLeft: 4,
+    paddingRight: 4,
+  },
+  ctrlReplyIcon: {
+    marginRight: 5,
+    color: 'gray',
+  },
+  ctrlRepostIcon: {
+    marginRight: 5,
+    color: 'gray',
+  },
+  ctrlLikeIcon: {
+    marginRight: 5,
+    color: 'gray',
+  },
+  ctrlShareIcon: {
+    marginRight: 5,
+    color: 'gray',
   },
 })

src/view/index.ts

@@ -0,0 +1,31 @@
+import moment from 'moment'
+import {library} from '@fortawesome/fontawesome-svg-core'
+
+import {faComment} from '@fortawesome/free-regular-svg-icons/faComment'
+import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart'
+import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
+import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
+
+export function setup() {
+  moment.updateLocale('en', {
+    relativeTime: {
+      future: 'in %s',
+      past: '%s ago',
+      s: 'a few seconds',
+      ss: '%ds',
+      m: 'a minute',
+      mm: '%dm',
+      h: 'an hour',
+      hh: '%dh',
+      d: 'a day',
+      dd: '%dd',
+      w: 'a week',
+      ww: '%dw',
+      M: 'a month',
+      MM: '%dmo',
+      y: 'a year',
+      yy: '%dy',
+    },
+  })
+  library.add(faComment, faHeart, faRetweet, faShareFromSquare)
+}

src/view/screens/Home.tsx

@@ -14,9 +14,6 @@ export function Home(/*{navigation}: RootTabsScreenProps<'Home'>*/) {
   return (
     <Shell>
       <View>
-        <Text style={{fontSize: 20, fontWeight: 'bold'}}>
-          Hello, {store.me.displayName} ({store.me.name})
-        </Text>
         <Feed feed={store.homeFeed} />
       </View>
     </Shell>