Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
PPL KI Ganjil 2021 2022
Clicks - Ecosystem Business
clicks-frontend
Commits
2b374b25
Commit
2b374b25
authored
Dec 03, 2021
by
Abraham Rudolf Brahmana
Committed by
Ahmad Izzudin Alifyandra
Dec 03, 2021
Browse files
feat: Add tab bar icon
parent
4db6309b
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/navigation/BottomTabNavigator.tsx
View file @
2b374b25
import
*
as
React
from
"
react
"
;
import
{
createBottomTabNavigator
}
from
"
@react-navigation/bottom-tabs
"
;
import
{
RootTabParamList
}
from
"
../types/navigation
"
;
import
{
FontAwesome
}
from
"
@expo/vector-icons
"
;
import
{
FontAwesome
,
MaterialIcons
,
MaterialCommunityIcons
,
}
from
"
@expo/vector-icons
"
;
import
{
Pressable
}
from
"
react-native
"
;
import
Colors
from
"
../constants/Colors
"
;
import
ProfileStackNavigator
from
"
./ProfileStackNavigator
"
;
...
...
@@ -18,6 +22,9 @@ const BottomTabNavigator = () => {
<
BottomTab
.
Navigator
initialRouteName
=
"Ecosystem"
screenOptions
=
{
{
tabBarLabel
:
()
=>
{
return
null
;
},
tabBarActiveTintColor
:
Colors
.
icon
.
tab
.
active
,
//TODO ganti warna nya
}
}
>
...
...
@@ -27,7 +34,14 @@ const BottomTabNavigator = () => {
options
=
{
()
=>
({
title
:
"
Ecosystem
"
,
headerShown
:
false
,
tabBarIcon
:
({
color
})
=>
<
TabBarIcon
name
=
"code"
color
=
{
color
}
/>,
tabBarIcon
:
({
color
})
=>
(
<
MaterialCommunityIcons
name
=
{
"
earth
"
}
size
=
{
30
}
style
=
{
{
marginBottom
:
-
3
}
}
color
=
{
color
}
/>
),
headerRight
:
()
=>
(
<
Pressable
onPress
=
{
()
=>
null
}
...
...
@@ -51,7 +65,14 @@ const BottomTabNavigator = () => {
options
=
{
()
=>
({
title
:
"
Profile
"
,
headerShown
:
false
,
tabBarIcon
:
({
color
})
=>
<
TabBarIcon
name
=
"code"
color
=
{
color
}
/>,
tabBarIcon
:
({
color
})
=>
(
<
MaterialIcons
name
=
{
"
person-outline
"
}
size
=
{
30
}
style
=
{
{
marginBottom
:
-
3
}
}
color
=
{
color
}
/>
),
headerRight
:
()
=>
(
<
Pressable
onPress
=
{
()
=>
null
}
...
...
@@ -73,14 +94,4 @@ const BottomTabNavigator = () => {
);
};
/**
* You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
*/
function
TabBarIcon
(
props
:
{
name
:
React
.
ComponentProps
<
typeof
FontAwesome
>
[
"
name
"
];
color
:
string
;
})
{
return
<
FontAwesome
size
=
{
30
}
style
=
{
{
marginBottom
:
-
3
}
}
{
...
props
}
/>;
}
export
default
BottomTabNavigator
;
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment