Fakultas Ilmu Komputer UI

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

/**
 * 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
19
      initialRouteName="Ecosystem"
20
      screenOptions={{
21
        tabBarActiveTintColor: Colors.icon.tab.active, //TODO ganti warna nya
22
23
      }}
    >
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
      <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>
          ),
        })}
      />
48
49
50
      <BottomTab.Screen
        name="Profile"
        component={ProfileStackNavigator}
51
        options={() => ({
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
          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>
          ),
        })}
      />
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
    </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;