Fakultas Ilmu Komputer UI

BottomTabNavigator.tsx 3.37 KB
Newer Older
1
2
import * as React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
3
4
import { RootTabParamList, RootTabScreenProps } from "../types/navigation";
import TabOneScreen from "../screens/TabOneScreen";
5
6
import { FontAwesome } from "@expo/vector-icons";
import { Pressable } from "react-native";
7
import Colors from "../constants/Colors";
8
import ProfileStackNavigator from "./ProfileStackNavigator";
9
import EcosystemStackNavigator from "./EcosystemStackNavigator";
10
11
12
13
14
15
16
17
18
19
20
21

/**
 * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */
const BottomTab = createBottomTabNavigator<RootTabParamList>();

const BottomTabNavigator = () => {
  return (
    <BottomTab.Navigator
      initialRouteName="TabOne"
      screenOptions={{
22
        tabBarActiveTintColor: Colors.icon.tab.active, //TODO ganti warna nya
23
24
25
26
27
      }}
    >
      <BottomTab.Screen
        name="TabOne"
        component={TabOneScreen}
28
        options={() => ({
29
30
31
32
          title: "Tab One",
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
          headerRight: () => (
            <Pressable
33
              onPress={() => null}
34
35
36
37
38
39
40
              style={({ pressed }) => ({
                opacity: pressed ? 0.5 : 1,
              })}
            >
              <FontAwesome
                name="info-circle"
                size={25}
41
                color={Colors.text.title} //TODO ganti warna
42
43
44
45
46
47
                style={{ marginRight: 15 }}
              />
            </Pressable>
          ),
        })}
      />
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
      <BottomTab.Screen
        name="Ecosystem"
        component={EcosystemStackNavigator}
        options={() => ({
          title: "Ecosystem",
          headerShown: false,
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
          headerRight: () => (
            <Pressable
              onPress={() => null}
              style={({ pressed }) => ({
                opacity: pressed ? 0.5 : 1,
              })}
            >
              <FontAwesome
                name="info-circle"
                size={25}
                color={Colors.text.title} //TODO ganti warna
                style={{ marginRight: 15 }}
              />
            </Pressable>
          ),
        })}
      />
72
73
74
      <BottomTab.Screen
        name="Profile"
        component={ProfileStackNavigator}
75
        options={() => ({
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
          title: "Profile",
          headerShown: false,
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
          headerRight: () => (
            <Pressable
              onPress={() => null}
              style={({ pressed }) => ({
                opacity: pressed ? 0.5 : 1,
              })}
            >
              <FontAwesome
                name="info-circle"
                size={25}
                color={Colors.text.title} //TODO ganti warna
                style={{ marginRight: 15 }}
              />
            </Pressable>
          ),
        })}
      />
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
    </BottomTab.Navigator>
  );
};

/**
 * 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;