aspa/App.js at main · arthaggarwal/aspa · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
// import { StatusBar } from "expo-status-bar";
import CalcScreen from "./screens/CalcScreen";
import Main from "./screens/Main";
import { NavigationContainer } from "@react-navigation/native";
import CrisisNavigator from "./screens/Crisis";
import {
  DarkModeProvider,
  DarkModeContext,
  useDarkMode,
} from "./components/DarkModeContext";
import Info from "./screens/Info";
const Tab = createBottomTabNavigator();
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
import Settings from "./screens/Settings";
import Logo from "./screens/logo";

function MyTabs() {
  const { isDarkMode, toggleDarkMode } = useDarkMode();
  return (
    <DarkModeProvider>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          headerShown: false,
          tabBarStyle: {
            height: 90,
            paddingHorizontal: 5,
            paddingTop: 0,
            backgroundColor: isDarkMode ? "rgba(34,36,40,1)" : "#F2EDEB",
            position: "absolute",
            borderTopWidth: 0,
          },
        })}
      >
        <Tab.Screen
          name="Calculator"
          component={CalcScreen}
          options={{
            headerShown: false,
            tabBarIcon: () => (
              <FontAwesome5
                name="calculator"
                style={{ fontSize: 30, color: "#F3EDC8" }}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Reference"
          component={Main}
          options={{
            headerShown: false,
            tabBarIcon: () => (
              <FontAwesome5
                name="clipboard-list"
                style={{ fontSize: 30, color: "#5F8670" }}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Crisis"
          component={CrisisNavigator}
          options={{
            headerShown: false,
            tabBarIcon: () => (
              <FontAwesome5
                name="bolt"
                style={{ fontSize: 30, color: "gold" }}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Info"
          component={Info}
          options={{
            headerShown: false,
            tabBarIcon: () => (
              <FontAwesome5
                name="exclamation-circle"
                style={{
                  fontSize: 30,
                  color: "#D24545",
                }}
              />
            ),
          }}
        />
        <Tab.Screen
          name="logo"
          component={Logo}
          options={{
            headerShown: false,
            tabBarIcon: () => (
              <FontAwesome5
                name="hospital"
                style={{ fontSize: 30, color: "#F3EDC8" }}
              />
            ),
          }}
        />
      </Tab.Navigator>
    </DarkModeProvider>
  );
}

export default function App() {
  return (
    <>
      <DarkModeProvider>
        {/* <StatusBar style="light" /> */}
        <NavigationContainer>
          <MyTabs />
        </NavigationContainer>
      </DarkModeProvider>
    </>
  );
}