Add icons to main tabs

src/view/index.ts

@@ -1,8 +1,12 @@
 import moment from 'moment'
 import {library} from '@fortawesome/fontawesome-svg-core'
 
+import {faBars} from '@fortawesome/free-solid-svg-icons/faBars'
+import {faBell} from '@fortawesome/free-solid-svg-icons/faBell'
 import {faComment} from '@fortawesome/free-regular-svg-icons/faComment'
 import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart'
+import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse'
+import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
 import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
 import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
 
@@ -27,5 +31,14 @@ export function setup() {
       yy: '%dy',
     },
   })
-  library.add(faComment, faHeart, faRetweet, faShareFromSquare)
+  library.add(
+    faBars,
+    faBell,
+    faComment,
+    faHeart,
+    faHouse,
+    faMagnifyingGlass,
+    faRetweet,
+    faShareFromSquare,
+  )
 }

src/view/routes/index.tsx

@@ -9,6 +9,7 @@ import {
 import {createNativeStackNavigator} from '@react-navigation/native-stack'
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
 import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import type {RootTabsParamList} from './types'
 import {useStores} from '../../state'
 import * as platform from '../../platform/detection'
@@ -54,8 +55,19 @@ const tabBarScreenOptions = ({
 }) => ({
   headerShown: false,
   tabBarIcon: (_state: {focused: boolean; color: string; size: number}) => {
-    // TODO: icons
-    return <Text>{route.name?.[0] || ''}</Text>
+    switch (route.name) {
+      case 'Home':
+        return <FontAwesomeIcon icon="house" />
+      case 'Search':
+        return <FontAwesomeIcon icon="magnifying-glass" />
+      case 'Notifications':
+        return <FontAwesomeIcon icon="bell" />
+      case 'Menu':
+        return <FontAwesomeIcon icon="bars" />
+      default:
+        return <FontAwesomeIcon icon="bars" />
+    }
+    // return <Text>{route.name?.[0] || ''}</Text>
   },
 })