React Navigation

1
import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
2
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
3
import { createNativeStackNavigator } from "@react-navigation/native-stack";
4
import ExploreScreen from "../screens/ExploreScreen";
5
import StreamScreen from "../screens/StreamScreen";
6
import ClassWorkScreen from "../screens/ClassWorkScreen";
7
import WelcomeScreen from "../screens/WelcomeScreen";
8
import SignInScreen from "../screens/SignInScreen";
9
import SignUpScreen from "../screens/SignUpScreen";
10
import GradeScreen from "../screens/GradeScreen";
11
import ProvinceScreen from "../screens/ProvinceScreen";
12

13
import ExploreSVG from "../assets/explore.svg";
14
import BlueExploreSVG from "../assets/explore-blue.svg";
15
import StreamSVG from "../assets/stream.svg";
16
import BlueStreamSVG from "../assets/stream-blue.svg";
17
import ClassworkSVG from "../assets/classwork.svg";
18
import BlueClassworkSVG from "../assets/classwork-blue.svg";
19

20
import { AuthProvider, useAuth } from "../context/AuthContext";
21

22
const Stack = createNativeStackNavigator();
23
const Tab = createBottomTabNavigator();
24

25
const tabBarLabelStyle = {
26
  fontSize: 12,
27
  fontStyle: "normal",
28
  fontWeight: 500,
29
};
30

31
function MainTabNavigator() {
32
  const { userIsLoggedIn } = useAuth();
33
  if (!userIsLoggedIn) return null;
34
  return (
35
    <Tab.Navigator
36
      initialRouteName="Explore"
37
      screenOptions={{
38
        tabBarActiveTintColor: "#5667FD",
39
        tabBarInactiveTintColor: "#364356",
40
        tabBarStyle: {
41
          padding: 0,
42
          paddingTop: 10,
43
          display: "flex",
44
          alignItems: "center",
45
        },
46
        tabBarVisible: false,
47
        headerShown: false,
48
        tabBarLabelStyle,
49
      }}
50
    >
51
      <Tab.Screen
52
        name="Explore"
53
        component={ExploreScreen}
54
        options={({ route }) => ({
55
          title: "Explore",
56
          tabBarIcon: ({ focused, size }) => {
57
            return focused ? (
58
              <BlueExploreSVG width={size} height={size} />
59
            ) : (
60
              <ExploreSVG width={size} height={size} />
61
            );
62
          },
63
        })}
64
      />
65
      <Tab.Screen
66
        name="Stream"
67
        component={StreamScreen}
68
        options={({ route }) => ({
69
          title: "Stream",
70
          tabBarIcon: ({ focused, size }) => {
71
            return focused ? (
72
              <BlueStreamSVG width={size} height={size} />
73
            ) : (
74
              <StreamSVG width={size} height={size} />
75
            );
76
          },
77
        })}
78
      />
79
      <Tab.Screen
80
        name="ClassWork"
81
        component={ClassWorkScreen}
82
        options={({ route }) => ({
83
          title: "ClassWork",
84
          tabBarIcon: ({ focused, size }) => {
85
            return focused ? (
86
              <BlueClassworkSVG width={size} height={size} />
87
            ) : (
88
              <ClassworkSVG width={size} height={size} />
89
            );
90
          },
91
        })}
92
      />
93
    </Tab.Navigator>
94
  );
95
}
96

97
function AuthStack() {
98
  const { userIsLoggedIn } = useAuth();
99
  if (userIsLoggedIn) return null;
100
  return (
101
    <Stack.Navigator
102
      initialRouteName="Welcome"
103
      screenOptions={{
104
        headerShown: false,
105
        contentStyle: {
106
          backgroundColor: "#F0F4F8",
107
        },
108
      }}
109
    >
110
      <Stack.Screen
111
        name="Welcome"
112
        component={WelcomeScreen}
113
        options={{
114
          title: "",
115
        }}
116
      />
117
      <Stack.Screen
118
        name="SignIn"
119
        component={SignInScreen}
120
        options={{ title: "", headerBackVisible: false }}
121
      />
122
      <Stack.Screen
123
        name="SignUp"
124
        component={SignUpScreen}
125
        options={{ title: "", headerBackVisible: false }}
126
      />
127
      <Stack.Screen
128
        name="GradeScreen"
129
        component={GradeScreen}
130
        options={{ title: "", headerBackVisible: false }}
131
      />
132
      <Stack.Screen
133
        name="ProvinceScreen"
134
        component={ProvinceScreen}
135
        options={{ title: "", headerBackVisible: false }}
136
      />
137
    </Stack.Navigator>
138
  );
139
}
140

141
const MyTheme = {
142
  ...DefaultTheme,
143
  colors: {
144
    ...DefaultTheme.colors,
145
    background: "#F4F5F9",
146
  },
147
};
148

149
function AppNavigator() {
150
  return (
151
    <AuthProvider>
152
      <NavigationContainer theme={MyTheme}>
153
        <AuthStack />
154
        <MainTabNavigator />
155
      </NavigationContainer>
156
    </AuthProvider>
157
  );
158
}
159

160
export default AppNavigator;