Add icons to main tabs

zio/stable
Paul Frazee 2022-07-20 19:39:51 -05:00
parent 9e0ee99d6e
commit 139c9deb75
2 changed files with 28 additions and 3 deletions

View File

@ -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,
)
}

View File

@ -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>
},
})