PhyrFit/App.js at main · owacez/PhyrFit · 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
import React from 'react';
import { useFonts } from 'expo-font';
import { Image } from 'react-native';
import SignIn from './Screens/SignIn';
import SignUp from "./Screens/SignUp";
import Splash from "./Screens/Splash";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import UserContextProvider from "./Store/store";
import Home from "./Screens/Home";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {Colors} from "./assets/colors/colors";
import Reminders from "./Screens/Reminders";
import Workouts from "./Screens/Workouts";
import Profile from "./Screens/Profile";

export default function App() {
  const [fontsLoaded] = useFonts({
    'roboto_black': require('./assets/fonts/Roboto-Black.ttf'),
    'roboto_black_italic': require('./assets/fonts/Roboto-BlackItalic.ttf'),
    'roboto_bold': require('./assets/fonts/Roboto-Bold.ttf'),
    'roboto_bold_italic': require('./assets/fonts/Roboto-BoldItalic.ttf'),
    'roboto_italic': require('./assets/fonts/Roboto-Italic.ttf'),
    'roboto_light': require('./assets/fonts/Roboto-Light.ttf'),
    'roboto_light_italic': require('./assets/fonts/Roboto-LightItalic.ttf'),
    'roboto_medium': require('./assets/fonts/Roboto-Medium.ttf'),
    'roboto_medium_italic': require('./assets/fonts/Roboto-MediumItalic.ttf'),
    'roboto_regular': require('./assets/fonts/Roboto-Regular.ttf'),
    'roboto_thin': require('./assets/fonts/Roboto-Thin.ttf'),
    'roboto_thin_italic': require('./assets/fonts/Roboto-ThinItalic.ttf'),
  });

  const Stack = createStackNavigator();
  const Tab = createBottomTabNavigator();
  if (!fontsLoaded) {
    return <Splash />;
  }

  function BottomTabs() {
    return (
        <Tab.Navigator
            screenOptions={
          {animationEnabled: true, headerShown: false,  tabBarStyle: { backgroundColor: Colors.ButtonColor }}}>

          <Tab.Screen
              name="Home"
              component={Home}
              options={{
                  tabBarShowLabel: false,
                tabBarIcon: ({size, focused }) => (
                    <Image
                        source={require('./assets/icons/home-white.png')}
                        style={{width: focused ? 35 : size+5, height: focused ? 35 : size+5, tintColor: focused ? Colors.PrimaryColorFg : Colors.FilledCircleDark}}
                    />
                ),
              }}
          />
          <Tab.Screen
              name="Reminders"
              component={Reminders}
              options={{
                  tabBarShowLabel: false,
                tabBarIcon: ({size, focused }) => (
                    <Image
                        source={require('./assets/icons/reminder-white.png')}
                        style={{width: focused ? 30 : size, height: focused ? 30 : size, tintColor: focused ? Colors.PrimaryColorFg : Colors.FilledCircleDark}}
                    />
                ),
              }}
          />
            <Tab.Screen
                name="Workouts"
                component={Workouts}
                options={{
                    tabBarShowLabel: false,
                    tabBarIcon: ({ size, focused }) => (
                        <Image
                            source={require('./assets/icons/dumbell-white.png')}
                            style={{ width: focused ? 30 : size, height: focused ? 30 : size, tintColor: focused ? Colors.PrimaryColorFg : Colors.FilledCircleDark }}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Profile"
                component={Profile}
                options={{
                    tabBarShowLabel: false,
                    tabBarIcon: ({ size, focused }) => (
                        <Image
                            source={require('./assets/icons/account-white.png')}
                            style={{ width: focused ? 32 : size, height: focused ? 32 : size + 2, tintColor: focused ? Colors.PrimaryColorFg : Colors.FilledCircleDark }}
                        />
                    ),
                }}
            />
        </Tab.Navigator>
    );
  }

  return (
      <UserContextProvider>
        <NavigationContainer>
          <Stack.Navigator screenOptions={{ animationEnabled: true, headerShown: false }}>
            <Stack.Screen name={"SignIn"} component={SignIn} />
            <Stack.Screen name={"SignUp"} component={SignUp} />
            <Stack.Screen name={"Main"} component={BottomTabs} />
          </Stack.Navigator>
        </NavigationContainer>
      </UserContextProvider>
  );
}